美文网首页
ES6学习二

ES6学习二

作者: qianxun0921 | 来源:发表于2018-09-28 15:55 被阅读0次

Iterator遍历器

1、概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
2、作用：

（1）为各种数据结构，提供一个统一的、简便的访问接口；
（2）使得数据结构的成员能够按某种次序排列
（3）ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

3、工作原理：

创建一个指针对象(遍历器对象)，指向数据结构的起始位置。

第一次调用next方法，指针自动指向数据结构的第一个成员

接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员

每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}

  • value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。
  • 当遍历结束的时候返回的value值是undefined，done值为false

原生具备iterator接口的数据(可用for of遍历)
1、Array
2、arguments
3、set容器
4、map容器
5、String
...

Generator函数

Generator函数
1、概念：

  • ES6提供的解决异步编程的方案之一
  • Generator函数是一个状态机，内部封装了不同状态的数据，
  • 用来生成遍历器对象
  • 可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果

2、特点：

  • function 与函数名之间有一个星号
  • 内部用yield表达式来定义不同的状态
    例如：
        function* generatorExample(){
          let result = yield 'hello';  // 状态值为hello
          yield 'generator'; // 状态值为generator
        }
  • generator函数返回的是指针对象(即iterator)，而不会执行函数内部逻辑
  • 调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}
  • 再次调用next方法会从上一次停止时的yield处开始，直到最后
  • yield语句返回结果通常为undefined， 当调用next方法时传参内容会作为启动时yield语句的返回值。

async函数

1、概念： 真正意义上去解决异步回调的问题，同步流程表达2、异步操作
3、本质： Generator的语法糖
4、语法：
async function foo(){
await 异步操作;
await 异步操作；
}
5、特点：
（1）不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
（2）返回的总是Promise对象，可以用then方法进行下一步操作
（3）async取代Generator函数的星号*，await取代Generator的yield
（4）语意上更为明确，使用简单，经临床验证，暂时没有任何副作用

class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>12_class</title>
</head>
<body>
</body>
<!--
1. 通过class定义类/实现类的继承
2. 在类中通过constructor定义构造方法
3. 通过new来创建类的实例
4. 通过extends来实现类的继承
5. 通过super调用父类的构造方法
6. 重写从父类中继承的一般方法
-->
<script type="text/javascript">
    /*
    function Person(name, age){
        this.name = name;
        this.age = age;
    }
    let person = new Person('kobe', 40);
    console.log(person);
    */
    //定义一个人物的类
    class Person{
        // 类的构造方法
        constructor(name, age){
            this.name = name;
            this.age = age;
        }
        // 类的一般方法
        showName(){
            console.log('调用父类的方法');
            console.log(this.name, this.age);
        }
    }
    let person = new Person('kobe', 40);
    console.log(person);
    // person.showName();
    // 子类
    class StarPerson extends Person{
        constructor(name, age, salary){
            super(name, age);
            this.salary = salary;
        }
        // 父类的方法重写
        showName(){
            console.log('调用子类的方法');
            console.log(this.name, this.age, this.salary);
        }
    }
    let sp = new StarPerson('wade', 36, 152450000);
    console.log(sp);
    sp.showName();
</script>
</html>

字符串扩展

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_字符串扩展</title>
</head>
<body>
<!--
1. includes(str) : 判断是否包含指定的字符串
2. startsWith(str) : 判断是否以指定字符串开头
3. endsWith(str) : 判断是否以指定字符串结尾
4. repeat(count) : 重复指定次数
-->
<script type="text/javascript">
    let str = 'asdfohsvckxnlck';
    // console.log(str.includes('t'));
    // console.log(str.includes('a'));
    // console.log(str.startsWith('a'));
    // console.log(str.endsWith('k'));
    console.log(str.repeat(5));
</script>
</body>
</html>

数值扩展

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_数值扩展</title>
</head>
<body>
<!--
1. 二进制与八进制数值表示法: 二进制用0b, 八进制用0o
2. Number.isFinite(i) : 判断是否是有限大的数
3. Number.isNaN(i) : 判断是否是NaN
4. Number.isInteger(i) : 判断是否是整数
5. Number.parseInt(str) : 将字符串转换为对应的数值
6. Math.trunc(i) : 直接去除小数部分
-->
<script type="text/javascript">
    console.log(0b1010);//10
    console.log(0o56);//46
    console.log(Number.isFinite(123));//true
    console.log(Number.isFinite(Infinity));//flase
    console.log(Number.isNaN(NaN));//true
    console.log(Number.isInteger(123));//true
    console.log(Number.isInteger(123.456));//false
    console.log(Number.isInteger(123.0));//true
    console.log(Number.parseInt('123abc456'));//123
    console.log(Number.parseInt('a123abc456'));//NaN
    console.log(Math.trunc('123.123'));//123
</script>
</body>
</html>

数组扩展

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_数组扩展</title>
</head>
<body>
<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<!--
1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
2. Array.of(v1, v2, v3) : 将一系列值转换成数组
3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
-->
<script type="text/javascript">
    let btns = document.getElementsByTagName('button');
    Array.from(btns).forEach(function(item, index){
        console.log(item);
    })
    let arr = Array.of(1, 4, 'abc', true);
    console.log(arr);
    let arr2 = [2,3,4,2,5,7,3,6,5];
    let result = arr2.find(function(item, index){
        return item > 4;
    });
    console.log(result);//5
    result = arr2.findIndex(function(item, index){
        return item > 4;
    });
    console.log(result);//4
</script>
</body>
</html>

对象扩展

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_对象扩展</title>
</head>
<body>
<!--
1. Object.is(v1, v2)
  * 判断2个数据是否完全相等
2. Object.assign(target, source1, source2..)
  * 将源对象的属性复制到目标对象上
3. 直接操作 __proto__ 属性
  let obj2 = {};
  obj2.__proto__ = obj1;
-->
<script type="text/javascript">
    console.log(0 == -0);//true
    console.log(NaN == NaN);//false
    console.log(Object.is(0, -0));//false
    console.log(Object.is(NaN, NaN));//true
    let obj = {};
    let obj1 = {username:'iverson', age:43};
    let obj2 = {sex: '男'};
    Object.assign(obj, obj1, obj2);
    console.log(obj);
    let obj3 = {};
    let obj4 = {money: 5000000};
    obj3.__proto__ = obj4;
    console.log(obj3);
    console.log(obj3.money);
</script>
</body>
</html>

对象的深度克隆

1、数据类型：
数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型

基本数据类型：

特点： 存储的是该对象的实际数据

对象数据类型：

特点： 存储的是该对象在栈中引用，真实的数据存放在堆内存里

2、复制数据
- 基本数据类型存放的就是实际的数据，可直接复制

let number2 = 2;
let number1 = number2;

3、克隆数据：对象/数组
（1）区别： 浅拷贝/深度拷贝
（2）判断： 拷贝是否产生了新的数据还是拷贝的是数据的引用
（3）知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用

let obj = {username: 'kobe'}
let obj1 = obj; // obj1 复制了obj在栈内存的引用

(4)常用的拷贝技术

1). arr.concat(): 数组浅拷贝
2). arr.slice(): 数组浅拷贝
3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据

    4). 浅拷贝包含函数数据的对象/数组
    5). 深拷贝包含函数数据的对象/数组

4、拷贝数据：
（1）基本数据类型：

拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据

（2）对象/数组：

拷贝后不会生成新的数据，而是拷贝了引用。修改拷贝以后的数据会影响原数据

5、拷贝数据的方法：
（1）直接赋值给一个变量 //浅拷贝
（2）Object.assign() //浅拷贝
（3）Array.prototype.concat() //浅拷贝
（4）Array.prototype.slice() //浅拷贝
（5）JSON.parse(JSON.stringify()) //深拷贝（深度克隆），拷贝的数据里不能有函数，因为它处理不了

6、浅拷贝（对象/数组）：
特点：拷贝的引用，修改拷贝以后的数据会影响原数据，使得原数据不安全

7、深拷贝（深度克隆）
特点：拷贝的时候生成新数据，修改拷贝以后的数据不会影响原数据

Set和Map数据结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05_Set和Map数据结构</title>
</head>
<body>
<!--
1. Set容器 : 无序不可重复的多个value的集合体
  * Set()
  * Set(array)
  * add(value)
  * delete(value)
  * has(value)
  * clear()
  * size
2. Map容器 : 无序的 key不重复的多个key-value的集合体
  * Map()
  * Map(array)
  * set(key, value)//添加
  * get(key)
  * delete(key)
  * has(key)
  * clear()
  * size
-->
<script type="text/javascript">
    let set = new Set([1,2,4,5,2,3,6]);
    console.log(set);
    set.add(7);
    console.log(set.size, set);
    set.delete(3);
    console.log(set);
    console.log(set.has(8));//false
    console.log(set.has(7));//true
    set.clear();
    console.log(set);
    let map = new Map([['aaa', 'username', 25], [36, 'age']]);
    console.log(map);
    map.set(78, 'haha');
    console.log(map);
    let value = map.get(78)
    console.log(value);
    map.delete(36);
    console.log(map);
</script>
</body>
</html>

for_of循环

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_for_of循环</title>
</head>
<body>
<!--
for(let value of target){}循环遍历
  1. 遍历数组
  2. 遍历Set
  3. 遍历Map
  4. 遍历字符串
  5. 遍历伪数组
-->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script type="text/javascript">
    let arr = [1,2,3,4,5,5,6,2];
    let arr1 = [];
    let set = new Set(arr);
    for(let i of set){
        console.log(i);
        arr1.push(i);
    }
    console.log(arr1);
    let map = new Map([['aaa', 'username', 25], [36, 'age']]);
    for(let i of map){
        console.log(i);
    }
</script>
</body>
</html>

相关文章

  • ES6学习二

    Iterator遍历器 1、概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制2、作用...

  • es6学习

    学习es6

  • 【一起来烧脑】入门ES6体系

    为什么要学习ES6掌握ES3、ES5、ES6的联系和区别 快速入门ES6 学会快速构建ES6的编译环境 学习ES6...

  • TW第二周前端组任务清单

    大二： 上周页面任务和es6题库继续做，页面任务周三之前在检查一遍；es6题库这周做完。 大一： 1、学习html...

  • Vue项目搭建

    Vue学习 一、ES6学习 阮一峰写的一本书《ECMAScript 6入门》 也可以购置纸质书籍 二、 Vue学习...

  • TW第三周前端组任务清单

    大二： 学习es6 的知识，把上次的写完的题库的代码优化，用es6语法没写完的一定要按时完成ps 切记不要抄代码，...

  • ES6 学习笔记（二）

    ES6 学习笔记,如有错误，欢迎指正。 笔记只记录了一些个人认为需要记住的知识点。 参考：ECMAScript 6...

  • ES6学习笔记（二）

    Set和Map Set Set类似于数组，但是里面成员的值不能重复。Set构造函数可以传入一个数组用于初始化 Se...

  • ES6学习笔记（二）

    六、数组热闹的循环 新增方法有：arr.forEach() 、arr.map() 、arr.filter()、ar...

  • ES6特性学习（二）

    在es6以前js没有关于模块化的管理方式，只有社区提供的commonjs和amd两种解决方案，在es6推出后在语法...

网友评论

      本文标题：ES6学习二

      本文链接：https://www.haomeiwen.com/subject/jexpoftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|ES6学习二|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！