ES6笔记

ES6

阮一峰ES6文档：https://es6.ruanyifeng.com/#README

文档写的很好，看视频反而有的看不懂

1.let和const

总结：默认情况下用const，如果变量后面需要被修改再用let

1.1let声明的变量只在他所在的代码块有效

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.	let声明
b // 1

1.2变量不能重复声明

下面这样会报错，而var就不会

let a = 1;
let a = 2;

1.3不存在变量提升

这样写会报错

console.log(c);
let c = 3;

但是如果用var 的话，就相当于是

var c;
console.log(c);
c = 3;

1.4const声明变量

const也不能重复声明，也是块级作用域，也不存在变量提升，但是和let不同的是，const赋值之后，不能再修改，还有就是for循环不能用const
比如我这么写，var和let都不会报错，但是const会报错

const d = 1;
d = 2;
console.log(d);

1.5作用：

（1）for循环的计数器，就很合适使用let命令。

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined

上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。

下面的代码如果使用var，最后输出的是10。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

（2）for循环分为父作用域和子作用域

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域（同一个作用域不可使用 let 重复声明同一个变量）。

（3）不会污染全局变量

除此之外，let和const不会污染全局变量，比如我如果这么写

var RegExp = 100;
console.log(RegExp);
console.log(window.RegExp);

那么最后的结果是两个100，window对象直接被改了，但是如果用let
第一个是100，第二个结果还是window对象的RegExp函数

let RegExp = 100;
console.log(RegExp);
console.log(window.RegExp);

综上所述：默认情况下用const，如果变量后面需要被修改再用let

2.模板字符串

如果想到动态的往一个div里面增加如下内容

<ul>
      <li>
            <p id="dj">123321123312</p>
      </li>
</ul> 

在ES5的时候我们只能这么做

const div = document.querySelector('div');
let id = 'dj';
let text = '12331123312';
div.innerHTML = "<ul><li><p id=" + id + ">" + text + "</p></li></ul>";

但现在有了ES6，我们可以这样写

使用tab上面那个小点点包起来，里面的变量使用${变量名}来替换

let id = 'dj';
let text = '12331123312';
div.innerHTML = `<ul>
    <li>
        <p id=${id}>${text}</p>
    </li>
</ul>`;

3.函数之默认值、剩余参数

3.1带参数默认值的函数

ES5的写法

function add(a,b){
    a = a || 10;
    b = b || 20;
    return a + b;
}
console.log(add());

但现在我们可以有更加简单的写法

function add(a = 10,b = 20) {
    return a + b;
}
console.log(add())

但下面这么写回报错

function add(a = 10, b) {
    return a + b;
}
console.log(add(20));

这是因为调用函数给的值是按顺序的，这么写a是20，b没赋值，所以不行

3.2默认的表达式也可以是一个函数

function add2(a = 10, b = getVal(5)) {
    return a + b;
}

function getVal(val) {
    return val + 5;
}
console.log(add2());  //20

3.3剩余参数

我把它理解为代替arguments伪数组的一个真正的数组
比如说我要干一件事儿，我要干啥呢，我要把一个对象儿中的属性名和属性值拿出来传给另一个对象。按照ES5的写法，如果不确定用户传几个参数，我们肯定是使用arguments伪数组来接收

let book = {
    title: '前端之王',
    name: 'zzy',
    age: 18
}

function pick(obj) {
    let result = {};
    for (let i = 1; i < arguments.length; i++) {
        result[arguments[i]] = obj[arguments[i]];
    }
    return result;
}
let bookData = pick(book, 'title', 'name', 'age');
console.log(bookData);

但是在ES6中，我们可以获取一个真正的数组。使用**（…+名字）**这种语法来做形参，返回的是一个数组，但是这个一定要写在形参的最后一个。比如下面这个例子，obj对应book，args就是后面那三个属性名构成的数组
慢慢理解理解，问题不大。

let book = {
    title: '前端之王',
    name: 'zzy',
    age: 18
}

function pick(obj, ...args) {
	console.log(args);  //['title', 'name', 'age']
    let result = {}; // 定义一个空对象
    for (let i = 0; i < args.length; i++) {
    //把对象中的属性值拿过来，给空对象（如果该对象没有这个属性，那么就添加一个）
        result[args[i]] = obj[args[i]];
    }
    return result;
}
let bookData = pick(book, 'title', 'name', 'age');
console.log(bookData);

4.扩展运算符，箭头函数

4.1扩展运算符

扩展运算符：将一个数组（或对象）分割，并将数组的各个项作为分离的参数传给函数。其实就是把数组或对象拆开
1、比如我要获取数组的最大值，以前我们会使用apply

const arr = [123, 545, 34, 234, 5];
console.log(Math.max.apply(null, arr));

但是现在我们可以这样写

console.log(Math.max(...arr));

2、其实也可以把对象里的东西拆开

let obj1 = {x:100, y:200};
let obj2 = {
    a:1,
    ...obj1,
    b:2
}
console.log(obj2);  //{a: 1, x: 100, y: 200, b: 2}

4.2箭头函数

1.箭头函数的语法

在ES5中这样定义函数：

let add = function (a,b) {
    return a + b;
}

但在ES6中我们可以这样写

let add = (a,b) => {
    return a + b;
}

如果只有一个返回值，我们甚至可以把return省略：

let add = (a, b) => a + b;

如果我们返回的是一个对象或者数组什么的，要加()把它包起来才行，不然会报错

let getObj = id => ({ id: id, name: 'zzy' });
console.log(getObj(007)); // id: 007, name: 'zzy'

2.对象中的函数和箭头函数

比如一个Person对象，里面有eat方法：

let person = {
    name: "jack",
    // 以前：
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },
    // 箭头函数版：
    eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
    // 简写版：
    eat3(food){
        console.log(this.name + "在吃" + food);
    }
}

3.箭头函数this指向

简单来说，想知道箭头函数中的this指向谁，就看这个箭头函数外边有没有包裹函数，如果它外面有函数，那么this指向的就是外层包裹函数的this，如果没有包裹函数，this指向的就是window。

看几个例子就明白了：

（一）例1

定义一个函数，定义一个对象，使用bind让函数中的this指向这个对象
这样的话，fn里的this指向的就是obj，返回值返回一个匿名箭头函数，箭头函数中的this指向的和包裹它的fn中的this指向相同，也是obj。
这里还要注意bind的特性，bind不会更改原函数，而是复制一份原函数生成一个新函数，新函数中this的指向改变，所以如果bind更改绑定后，调用fn的话，还是输出window

let obj = { name: 'zzy' };  //定义一个对象，让fn的this指向这个对象
function fn() {
    console.log(this);
    return () => {
        console.log(this);
    }
}
//更改fn函数的this指向
let newfn = fn.bind(obj);  //bind不会更改原函数，复制一份新的给newfn
fn();  //window
newfn(); //obj

（二）例2

如果我定义一个对象，里面写个方法，方法里面的this指向的是函数的调用者，也就是Person这个对象，所以最后输出的结果是18

let Person = {
    name: 'zzy',
    age: 18,
    getAge: function () {
        console.log(this.age);
    }
}
Person.getAge();  //18

但是我如果把这个函数写成箭头函数，那么this就往外边查找，指向window

let Person = {
    name: 'zzy',
    age: 18,
    getAge: () => {
        console.log(this.age);
    }
}
Person.getAge();  //undefined

这里还有个注意点：对象有大括号，但不产生作用域

（三）例三

比如我定义一个Dj对象，里面有个事件监听，点击页面调用另一个方法
那么这么写会报错，因为this指向的是document，document里面根本没有dance方法

let Dj = {
    id: 007,
    drop: function () {
        document.addEventListener('click', function () {
        	console.log(this);  //document
            this.dance();
        })
    },
    dance: function () {
        console.log('drop the beat');
    }
}
Dj.drop();  //报错

但是如果我把监听事件里的函数写成箭头函数，this的绑定就消失了，此时this指向的是外层包裹函数的this，也就是drop函数里的this，也就是Dj对象，这样的话就可以找到dance方法了

let Dj = {
    id: 007,
    drop: function () {
        document.addEventListener('click', () => {
            console.log(this);  //Dj
            this.dance();
        })
    },
    dance: function () {
        console.log('drop the beat');
    }
}
Dj.drop();  //drop the beat

那如果我把drop也写成箭头函数呢？因为箭头函数没有this绑定，此时就会往上找，而对象的大括号没有作用域，所以this就会找到window，懂了吗baby？

let Dj = {
    id: 007,
    drop: () => {
        document.addEventListener('click', () => {
            console.log(this);  //window
            this.dance();
        })
    },
    dance: function () {
        console.log('drop the beat');
    }
}
Dj.drop();  //报错

4.箭头函数的注意事项

1.使用箭头函数，函数内部没有arguments
2.箭头函数不能用来构造函数，因为function函数是一个对象，但是箭头函数不是一个对象，实际上箭头函数就是个语法糖

5.解构赋值

5.1完全解构

比如这里有个对象，在ES5中获取对象里的值我们都这么干

let obj = {
    uname: 'zzy',
    age: 20
}

let uname = obj.uname;
let age = obj.age;

但是现在，我们用解构赋值就可以直接这么干
非常简便

let { uname, age } = obj;
console.log(uname, age);  //'zzy',20

5.2不完全解构

或者也可以用一下子剩余运算符

let book = {
    content: {
        title: 'zzy',
        sell: 5
    },
    author: 'ht',
    page: 20
}

let { content, ...rest } = book;
console.log(content);  //{title: 'zzy', sell: 5}
console.log(rest); //{author: 'ht', page: 20}

5.3重命名

如果想给某个属性重命名，可以使用冒号
比如上面的案例可以这样：

let { uname: myname, age: myage } = obj;
console.log(myname, myage);

let { content: a } = book;
console.log(a);  //{title: 'zzy', sell: 5}

5.4数组解构

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c);

6.扩展的对象的功能

1.用法

在ES5中，我们可以这样声明对象的属性和方法

const name = 'Kiwi',
      age = 21;
const person = {
    name:name,
    age:age,
    sayName:function(){
        console.log(this.name)	//Kiwi
    }
}

但ES6中我们可以直接写入变量和函数，作为对象的属性和方法

const name = 'Kiwi',
      age = 21;
const person = {
    name,	//等价于name:name
    age,
    sayName(){
        console.log(this.name);	//Kiwi
    }
}

下面举几个此功能的例子

（一）例1

假设我们要写一个函数，里面要传两个参数，然后函数返回一个对象，对象里面是传入的两个参数

//ES5
function fn(x,y){
    return {x:x,y:y}
}
//ES6
function fn(x,y){
    return {x,y}
}

console.log(fn(10,20))	//{x: 10,y: 20}

（二）例2

这种简洁写法还可以用在取值器和设值器上

//ES5
let car = {
    wheel:4,
    set(newVal) {
        if(newVal < this.wheel){
            throw new Error('轮子数太少')
        }
        this.wheel = newVal;
    }
    get(){
        return this.wheel;
    }
}

2.扩展对象的方法

① is() 等价于 === 用于比较两个值 是否严格相等（即比较值也比较数据类型）

但 === 有时会有问题，比如

console.log(NaN === NaN)	//按理来说应该返回true，但实际上返回false
//但如果使用is()就没问题
console.log(Object.is(NaN，NaN))	//true

② assign() 用于对象的合并 浅拷贝

用法：

Object.assign(target,对象1，对象2,......)
//可以把target后面的所有对象合并存放到target里面

例：

let newObj = Object.assign({},{a:1},{b:2})
consolo.log(newObj)	//{a:1,b:2}

7.Symbol数据类型

ES6单独引入Symbol，其目的是防止对象的属性名冲突

1.相同参数的Symbol函数返回值不等：

let a = Symbol('zzy');
let b = Symbol('zzy');
console.log(a === b);  //false
console.log(a); //Symbol(zzy)

2.如果参数是个对象，那么返回的是这玩意儿

const obj = {name: 'zzy'};
const c = Symbol(obj);
console.log(c);  //Symbol([object Object])

3.给上面这个obj对象添加一个属性

obj[a] = '张大仙';
console.log(obj); //{name: 'zzy', Symbol(zzy): '张大仙'}

上面这段代码相当于：

let obj = {
    name: 'zzy',
    [a]: '张大仙'
};
console.log(obj);  //{name: 'zzy', Symbol(zzy): '张大仙'}

在对象的内部，使用 Symbol 值定义属性时，Symbol 值必须放在方括号[]之中

4.获取对象中的Symbol属性值

获取对象中的Symbol属性值，必须用[symbol变量名]，不能用点，因为用点意思就是obj里有个属性名叫做a，而这个Symbol不是属性名a，而是a对应的Symbol(zzy)

console.log(obj[a]);  //张大仙
console.log(obj.a); //undefined

5.Symbol属性名是遍历不到的

Symbol 作为属性名，遍历对象的时候，该属性不会出现在for…in、for…of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。
但是，它也不是私有属性，有一个Object.getOwnPropertySymbols()方法，可以获取指定对象的所有 Symbol 属性名。该方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。
还有个Reflect.ownKeys()方法可以返回所有类型的键名，包括常规键名和 Symbol 键名。

8.Set和Map数据解构

这两个内置对象最大的区别，我认为是Set是只有值没有键，Map是键值对，而且键可以为任意类型（不局限于字符串，键可以是字符串、数组、undefined、甚至函数等等）
下面这些东西记的不全，有需要去查文档

8.1.Set

Set实际上类似于数组，但是成员的值都是唯一的，没有重复的值。其本身是个构造函数，是个内置对象

（1）Set的属性和方法
属性：
Set.prototype.constructor：构造函数，默认就是Set函数。
Set.prototype.size：返回Set实例的成员总数。
方法：
Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
Set.prototype.clear()：清除所有成员，没有返回值。

const s = new Set();
s.add(2);
s.add('4');
s.add([4, 3, 2]);
console.log(s); // {2, '4', Array(3)}
console.log(s.size); //3
s.delete('4');
console.log(s); // {2, Array(3)}
console.log(s.has('4')); //false

遍历操作：
Set.prototype.keys()：返回键名的遍历器
Set.prototype.values()：返回键值的遍历器
Set.prototype.entries()：返回键值对的遍历器
Set.prototype.forEach()：使用回调函数遍历每个成员
这里需要注意的是，Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

    //1.遍历Set中的键
    let set1 = new Set(['red', 'green', 'blue']);
    console.log(set1.keys()); //SetIterator {'red', 'green', 'blue'}
    for (let i of set1.keys()) {
        console.log(i);
        // red
        // green
        // blue
    }
    //2.遍历Set中的值
    console.log(set1.values()); //SetIterator {'red', 'green', 'blue'}
    for (let i of set1.values()) {
        console.log(i);
        // red
        // green
        // blue
    }
    //3.遍历Set中的键值对
    console.log(set1.entries()); //SetIterator {'red' => 'red', 'green' => 'green', 'blue' => 'blue'}
    for (let i of set1.entries()) {
        console.log(i);
        // ["red", "red"]
        // ["green", "green"]
        // ["blue", "blue"]
    }

当然啊，如果想遍历Set，直接这么写就行了

console.log(set1); //Set(3) {'red', 'green', 'blue'}
for (let i of set1) {
    console.log(i);
    // red
    // green
    // blue
}

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

2）Set实现数组去重

1.可以直接用剩余运算符进行数组去重，set接过来的是一个去重之后的{2, 3, 4, 5}这玩意儿，用剩余运算符拆开，然后再放进[]里面，就成数组了

const set = new Set([2, 3, 3, 3, 4, 5]);
console.log([...set]);  //[2,3,4,5]

2.Array.from方法可以将 Set 结构转为数组。

const items = new Set([1, 2, 3, 4, 5]);
const arr = Array.from(items);

这就提供了去除数组重复成员的另一种方法。

    function dedupe(arr) {
        let s = new Set(arr);
        return Array.from(s);
    }
    console.log(dedupe([1, 1, 2, 3])); // [1, 2, 3]

以上这两种方法原理是一样的，都是利用Set对象的去重能力

(3)Set实现数组去重

还是一样，都是利用Set对象的去重能力，只是我没想到Set的参数还可以是字符串

let str = new Set('aabbbcc');
console.log(str);  //{'a', 'b', 'c'}
str = [...str].join('');
console.log(str);  //'abc'

8.2Map

和Set类似，Map解决的是传统Object对象里只能用字符串作为键的缺陷，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

（1）Map的属性和方法
属性：
Map.prototype.size：返回Map实例的成员总数。
方法：
Map.prototype.set(key, value)
Map.prototype.get(key)
Map.prototype.has(key)has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
Map.prototype.delete(key)delete方法删除某个键，返回true。如果删除失败，返回false。
Map.prototype.clear()clear方法清除所有成员，没有返回值。

遍历操作：
Map.prototype.keys()：返回键名的遍历器
Map.prototype.values()：返回键值的遍历器
Map.prototype.entries()：返回键值对的遍历器
Map.prototype.forEach()：遍历 Map 的所有成员
大部分和Set一样，就不解释了，不懂了去翻文档好了

其中主要看下这个set和get

Map.prototype.set(key, value)
set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。.键可以是任何东西

const m = new Map();
m.set('name', 'zzy');  //键是字符串
m.set(undefined, 12); //键是undefined
m.set(666, 'ht');       //键是数值
m.set(function () { }, '不错');  //键是函数
console.log(m); //Map(4) {'name' => 'zzy', undefined => 12, 666 => 'ht', ƒ => '不错'}

Map支持链式写法：

const m = new Map().set(1, 'a').set(2, 'b');
console.log(m);  //{1 => 'a', 2 => 'b'}

Map.prototype.get(key)

get方法读取key对应的键值，如果找不到key，返回undefined。

console.log(m.get(666)); //ht
console.log(m.get('age'));  //undefined

除此之外Map也可以用多维数组设置默认值

const map = new Map([[1, 'a'], [2, 'b']]);
console.log(map);  //{1 => 'a', 2 => 'b'}

9.数组的扩展方法

1.from()将伪数组转换为真数组

比如把arguments转换为一个真数组

function add() {
    let arr = Array.from(arguments);
    console.log(arr);  //[1, 2, 3]
}
add(1, 2, 3);

比如ul里面的好多li的数组集合，转换为真正的数组

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
let lis = document.querySelectorAll('li');
console.log(lis);  //NodeList(4) [li, li, li, li]
console.log(Array.from(lis));  // [li, li, li, li]

当然上面这个其实可以直接用扩展运算符

console.log([...lis]);  // [li, li, li, li]

from()还可以有第二个参数，可以对每一个元素进行处理

let liContents = Array.from(lis, c => c.innerHTML);
console.log(liContents);  //['1', '2', '3', '4']

2.of()将任意数据类型转换为数组

console.log(Array.of('2', [2, 3], { 'a': 1 }, undefined));
//['2', Array(2), {…}, undefined]

3.find()和findiIndex()

find()是找出数组中符合条件的第一个数组成员
findexIndex()是找出数组中符合条件的第一个数组成员的索引

let num = [1, 2, -10, 23, -34].find(n => n < 0);
let numindex = [1, 2, -10, 23, -34].findIndex(n => n < 0);
console.log(num, numindex);  //-10 2

4.数组中的keys()和values()和entries()遍历

它们都返回一个遍历器对象，可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。（数组中键名就是索引，键值就是元素）这个和前边Set，Map差不多

let arr = ['a', 3, 5]
for (let key of arr.keys()) {
    console.log(key);  //0 1 2
}
for (let value of arr.values()) {
    console.log(value); // a 3 5
}
for (let [key, value] of arr.entries()) {
    console.log(key, value);
    //0 'a'
    //1 3
    //2 5
}

注意理解这三个方法返回的是一个遍历器对象，我们也可以用遍历器对象的next方法对其遍历

//返回一个遍历器对象
let item = arr.entries();
console.log(item.next());  //{value: [0,'a'], done: false} 
console.log(item.next().value);  //[1,3]
console.log(item.next().value);  //[2,'b']
console.log(item.next().value);  //undefined

5.includes()判断某个元素是否在数组中

这个其实是为了替代之前的indexOf，省的再去写判断条件indexOf() === -1了，如果忘了就去翻数组内置对象的数组去重那个案例。

let a = ['zzy', 23, 'ht', 18];
console.log(a.includes('z'));  //false
console.log(a.includes(23));  //true

10.迭代器 Iterator

遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作，其实遍历器就是一个用于遍历数据结构的指针。
一个数据结构只要具有Symbol.iterator属性，就说明有interator接口，就可以被for...of遍历。

原生具备 Iterator 接口的数据结构如下。

Array、Map、Set、String、TypedArray、函数的arguments对象、NodeList对象

利用Symbol.iterator属性创建一个新的迭代器

let arr = ['zzy', 23, 'ht'];
//创建一个新的迭代器，利用Iterator接口
let it = arr[Symbol.iterator]();
console.log(it.next());  //{value: 'zzy', done: false}
console.log(it.next());  //{value: 23, done: false}
console.log(it.next());  //{value: 'ht', done: false}
console.log(it.next());  //{value: undefined, done: true}

11.生成器 Generator（不太理解）

Generator函数的写法：function* fn() {yield}，yield相当于return
Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是遍历器对象

1.yield
每次调用next方法，内部指针就从函数头部或上次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。
遍历器对象的next方法的运行逻辑如下：

（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。

function* fn() {
    console.log('start');
    yield 2;
    yield 'hello world';
    return 'end'
}
let gen = fn();
console.log(gen.next());  //{value: 2, done: false}
console.log(gen.next()); //{value: 'hello world', done: false}
console.log(gen.next());  //{value: 'end', done: true}
console.log(gen.next()); //{value: undefined, done: true}

Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数：

function* f() {
  console.log('执行了！')
}

var generator = f();

setTimeout(function () {
  generator.next()
}, 2000);

上面代码中，函数f如果是普通函数，在为变量generator赋值时就会执行。但是，函数f是一个 Generator 函数，就变成只有调用next方法时，函数f才会执行。

2.Generator和Iterator接口的关系
之前说任何一个对象，只要有Symbol.iterator方法（iterator接口），就可以调用该方法生成一个遍历器（迭代器）对象，那么如果现在有一个对象，它没有iterator接口，如何给其添加？
有一种方法是使用普通函数写一个遍历器生成函数：

const obj = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

但是其实 Generator 函数就是遍历器生成函数，因此可以把 Generator 函数赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口。

const obj = {};
obj[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
};
console.log([...obj]); //[1, 2, 3]

上面代码中，Generator 函数赋值给Symbol.iterator属性，从而使得myIterable对象具有了 Iterator 接口，可以被...运算符遍历了。

3.next方法的参数

yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。
如果不传参， 第二次不带参数，那么y = 2 * undefined = NaN，z = undefined / 3 = NaN，第三次不带参数，那么z = undefined, 返回5 + NaN + undefined = NaN

如果传参，那么第二次参数传给上一个yield也就是y = 2 * 12 = 24, value: 24 /3 = 8，第三次参数传给上一个yield也就是z = 13, value: 5 + 24 + 13 = 42

function* foo(x) {
    var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z);
}

var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}  第二次不带参数，那么y=2*undefined=NaN，z=undefined/3 =NaN
a.next() // Object{value:NaN, done:true}   第三次不带参数，那么z=undefined, 返回5+NaN+undefined=NaN

var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false } //第二次参数传给上一个yield也就是y=2*12=24,value:24/3=8
b.next(13) // { value:42, done:true } //第三次参数传给上一个yield也就是z=13,value:5+24+13=42

再来个例子

function* dataConsumer() {
  console.log('Started');
  console.log(`1. ${yield}`);
  console.log(`2. ${yield}`);
  return 'result';
}

let genObj = dataConsumer();
genObj.next();
// Started
genObj.next('a')
// 1. a
genObj.next('b')
// 2. b

4.应用场景的懵逼案例

（1）给对象添加iterator接口

好多地方不懂，后面再来看吧

const o = { name: 'zzy', age: 18 };

//给对象o添加iterator接口
o[Symbol.iterator] = function* (obj) {
    let keys = Object.keys(o);
    for (const key of keys) {
        yield [key, obj[key]];  //['name','zzy']  [age,18]
    }
};
console.log(o);  //{name: 'zzy', age: 18, Symbol(Symbol.iterator): ƒ}
console.log(o[Symbol.iterator](o).next());  //{value: ['name', 'zzy'], done: false}
console.log(o[Symbol.iterator](o).next());  //{value: ['name', 'zzy'], done: false}？？？？？？？

for (let [key, value] of o[Symbol.iterator](o)) {  //？？？？这啥东西
    console.log(`${key}:${value}`); //name:zzy   age:18
} 

（2）让异步代码同步化

这个案例有点儿意思，比如我要1s加载一个页面，加载成功后立即隐藏

1.首先我先定义好三个函数，分别是加载中、加载完成、页面隐藏

2.如果直接按顺序调用三个函数，你会发现页面加载完成最后才弹出来，这是因为加载完成是一个异步操作

3.这时我们就可以用到Generator函数，先调用一次next，使用yield暂停函数，然后在定时器里用next再调用

function loadUI() {
    console.log('页面加载中Loading……');
}

function showData() {
    setTimeout(() => {
        console.log('页面加载完成');
        genLoad.next();  //2.页面加载完成后就立即隐藏
    }, 1000);
}

function hideUI() {
     console.log('页面隐藏啦');
}

function* load() {
    loadUI();
    yield showData();
    hideUI();
}

let genLoad = load();
genLoad.next();  //1.加载页面，加载完成的时候停止

12.async（不太理解）

这里先简单记一下，后面用的多了再回来总结完整的，包括async、generator、promise的区别，要好好理解
async函数是 Generator 函数的语法糖

1.async函数对 Generator 函数的改进，体现在以下四点。
（1）内置执行器。

Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

asyncReadFile();
上面的代码调用了asyncReadFile函数，然后它就会自动执行，输出最后结果。这完全不像 Generator 函数，需要调用next方法，或者用co模块，才能真正执行，得到最后结果。

（2）更好的语义。

async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

（3）更广的适用性。

co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。

（4）返回值是 Promise。

async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

2.使用注意点
1.await命令后面的Promise对象，运行结果可能是rejected，（如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject）。所以最好把await命令放在try…catch代码块中，然后catch里面不写东西，如果出现错误，就会自动跳过当前await

async function fn2() {
    try {
        // throw new Error('出错了');
        await Promise.reject('出错了');
    } catch (error) {
        /* 忽略错误，继续执行 */
    }
    return await Promise.resolve('hello');
}
fn2().then(v => console.log(v)).catch(e => console.log(e));

下面这个案例：如果await操作成功，就会使用break语句退出循环；如果失败，会被catch语句捕捉，然后进入下一轮循环。

const superagent = require('superagent');

async function test() {
  let i;
  for (i = 0; i < 3; ++i) {
    try {
      await superagent.get('http://google.com/this-throws-an-error');
      break;
    } catch(err) {/* 忽略错误，继续执行 */}
  }
  console.log(i); // 3
}

test();

2.async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

async function fn() {
    let a = await 'hello';
    let b = await a.split('');
    return b;
}
fn().then(v => console.log(v)).catch(e => console.log(e));
//['h', 'e', 'l', 'l', 'o']

3.await命令只能用在async函数之中，如果用在普通函数，就会报错
剩下的看文档吧，这个东西等我promise学熟练了再回来理解

3.使用Generator实现async/await

const p1 = () => {
  return new Promise((resolve) => {
    console.log('1')
    setTimeout(() => {
      resolve(2)
    }, 1000)
  })
}

function* autoAwait(p1) {
  const x = yield p1()
  console.log(x)
}

// 生成生成器的迭代器对象
const a1 = autoAwait(p1)
//调用next方法会返回一个对象，包括yeild后的表达式结果{value: promise对象, done: false}
a1.next().value.then((res) => {
  a1.next(res) //在暂停执行后，next的参数作为上一个yeild的返回结果，最终输出res
})

这里autoAwait其实就是一个async/await，内部就是加了一个内置的执行器，不需要手动操作：

async function autoAwait(p1) {
  const x = await p1()
  console.log(x)
}

13.类的用法

ES6中的class其实就类似于ES5中的构造函数
比如下面两个写法是等价的：

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.sum = function () {
  return this.x + this.y ;
};

var p = new Point(1, 2);
p.sum();

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  sum() {
    return this.x + this.y ;
  }
}

var p = new Point(1, 2);
p.sum();

定义sum()方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法与方法之间不需要逗号分隔，加了会报错。

constructor()方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加。

class Point {
}

// 等同于
class Point {
  constructor() {}
}

14.类的继承

1.extends关键字

Class 可以通过extends关键字实现继承，让子类继承父类的属性和方法。

class Father {
}

class Son extends Father {
}

2.super关键字

（1）super关键字调用父类中的构造函数

其实super在这里的作用就是改变父类中的this指向，让父类中的this指向子类。这样我们在通过子类继承，调用父类中的方法时，就可以直接通过子类传值使用

   class Father {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }

        sum() {
            console.log(this.x + this.y);
        }
    }

    class Son extends Father {
        constructor(x, y) {
            super(x, y); //调用了父类中的构造函数
        }
    }

    let son = new Son(1, 2);
    son.sum();

（2）super关键字调用父类中的普通函数

通过super.函数名() 调用。
如果子类继承父类，子类和父类中有同名方法，那么子类中的实例调用时优先调用子类中的方法，如果子类没有该方法，才去调用父类的该方法。

class Father1 {
    say() {
        return '我是爸爸';
    }
}

class Son1 extends Father1 {
    say() {
        console.log(super.say() + '的儿子');
    }
}

let son1 = new Son1();
son1.say();  //我是爸爸的儿子    就近原则，如果子类有方法，优先调用子类，子类没有才去调用父类里的

（3）子类在继承父类的方法后，可以重写父类的方法，也可以添加其他方法，super必须在子类的this之前调用（先改变this指向）。

class Father2 {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    sum() {
        console.log(this.x + this.y);
    }
}

class Son2 extends Father2 {
    constructor(x, y) {
        super(x, y，age); //调用了父类中的构造函数，让this指向子类
        //如果要添加子类的属性，super必须在子类的this之前调用
        this.age = age;
    }
	//1.重写父类的方法
	sum() {
        console.log(this.x + this.y + 1000);
    }
	//2.在继承父类的方法后，添加了新的方法
    substract() {
        console.log(this.x - this.y);
    }
}
let son2 = new Son2(5, 3，18);
son2.sum();
son2.substract();

（4）类中this的指向问题
永远记住，谁调用函数，this就指向谁。不过下面这个如果我要调用公共方法，用箭头函数怎么解决this的问题？奇怪。其实可以用bind也行，this.btn.onclick = this.sing.bind(this)。这样调用的话，sing里面的this指向的就是constructor里面的this

<button>点击</button>

let that;
class Father3 {
    constructor(uname, uage) {
        that = this;
        this.name = uname;
        this.age = uage;
        // this.sing();
        this.btn = document.querySelector('button');
        this.btn.onclick = this.sing;  //这个this指向的是btn
        //谁调用方法，this就指向谁
    }

    sing() {
        console.log(this);  //<button>点击</button>
        console.log(that.name);  //zzy
    }
}

let f = new Father3('zzy', 18);
f.sing();