迭代器（Iterator）、生成器（Generator）

[es6]中for...of与[es5]中for...in的区别

1、for...in循环遍历的是索引
2、for...of循环遍历的索引值

var arr = ['A', 'B', 'C'];
var obj = { name: '张三', age: 20 }

for..in 遍历数组 得到索引
for (var x in arr) {
   console.log(x) //0 1 2  
}

for..in 遍历对象  得到键和值
for (var x in obj) {
   console.log(x)  //name age 
   console.log(obj[x])  //张三  20  
}


for..of 遍历数组 得到值
for (let x of arr) {
   console.log(x)  //A B C 
}
for..of 遍历对象 会报错
for (let x of obj) {
   console.log(x)  // Uncaught TypeError: obj is not iterable
}

for..of 遍历对象 报错（ Uncaught TypeError: obj is not iterable）的原因是对象原型上缺少 遍历器（Iterator）

一、迭代器（Iterator）

迭代器是一种特殊对象，它具有一些专门为迭代过程设计的专有接口，所有的迭代器对象都有一个next()方法，每次调用都返回一个结果对象。

特性：

ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费；
原生具备 iterator 接口的数据(可用 for of 遍历)：

• Array；
• Arguments；
• Set；
• Map；
• String；

结果对象有两个属性：一个是value，表示下一个将要返回的值；另一个是done，它是一个布尔类型的值，当没有更多可返回数据时返回true。迭代器还会保存一个内部指针，用来指向当前集合中值的位置，每调用一次next()方法，都会返回下一个可用的值

如果在最后一个值返回后再调用next()方法，那么返回的对象中属性done的值为true，属性value则包含迭代器最终返回的值，这个返回值不是数据集的一部分，它与函数的返回值类似，是函数调用过程中最后一次给调用者传递信息的方法，如果没有相关数据则返回undefined

// 声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
// 使用 for...of 遍历数组
for(let v of xiyou){
console.log(v);
}
let iterator = xiyou[Symbol.iterator]();
// 调用对象的next方法
console.log(iterator.next());// "{ value: '唐僧', done: false }"
console.log(iterator.next());// "{ value: '孙悟空', done: false }"
console.log(iterator.next());// "{ value: '猪八戒', done: false }"
console.log(iterator.next());// "{ value: '沙僧', done: false }"
console.log(iterator.next());// "{ value: undefined, done: true}"
// 重新初始化对象，指针也会重新回到最前面
let iterator1 = xiyou[Symbol.iterator]();
console.log(iterator1.next());// "{ value: '唐僧', done: false }"

原理：

1. 创建一个指针对象，指向当前数据结构的起始位置；
2. 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员；
3. 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员；
4. 每调用 next 方法返回一个包含 value 和 done 属性的对象；

function makeInterator(arr){
    let index = 0;
    return {
        next(){
            if(index < arr.length){
                return {
                    value: arr[index++],
                    done: false
                }
            }
            return { value: undefined, done: true }
        }
    }
}

二、生成器（Generator）

定义：生成器是一种返回迭代器的函数，通过function关键字后的星号(*)来表示，函数中会用到新的关键字yield。星号可以紧挨着function关键字，也可以在中间添加一个空格

// 生成器其实就是一个特殊的函数
function* gen() {
    console.log(111);
    yield '一只没有耳朵';
    console.log(222);
    yield '一只没有尾部';
    console.log(333);
    yield '真奇怪';
    console.log(444);
}
let iterator = gen();
console.log(iterator.next());//{value: '一只没有耳朵', done: false}
console.log(iterator.next());//{value: '一只没有尾部', done: false}
console.log(iterator.next());//{value: '真奇怪', done: false}
console.log(iterator.next());//{value: undefined, done: true}
console.log("遍历：");
//遍历
for(let v of gen()){
    console.log(v);
}

yield关键字也是ES6的新特性，可以通过它来指定调用迭代器的next()方法时的返回值及返回顺序。生成器函数最有趣的部分是，每当执行完一条yield语句后函数就会自动停止执行。

async await 的原理

1、async函数就是generator函数的语法糖。
2、async函数，就是将generator函数的*换成async，将yield替换成await。

async函数对generator的改进

1、内置执行器，不需要使用next()手动执行。
2、await命令后面可以是Promise对象或原始类型的值，yield命令后面只能是Thunk函数或Promise对象。
3、返回值是Promise。返回非Promise时，async函数会把它包装成Promise返回。(Promise.resolve(value))

参考文档：https://www.cnblogs.com/xiaohuochai/p/7253466.html