Iterator Generator基础概念

Iterator

Iterator是一个接口，为不同数据结构提供统一接口
任何数据结构只要部署 Iterator 接口，就可以完成遍历操作
可以使用for…of

一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）
一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）
所以Symbol.iterator属性实现Iterator 接口，有Symbol.iterator属性，就是可遍历的。
如果原生具有Symbol.iterator属性，for…of循环会自动遍历它们，如果没有需要自己部署

const obj = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};
//对象obj是可遍历的（iterable），因为具有Symbol.iterator属性

调用Symbol.iterator这个属性，就会返回一个遍历器对象。
每次调用next方法，都会返回一个代表当前成员的信息对象，具有value和done两个属性。

凡是部署了Symbol.iterator属性的数据结构，即不用任何处理，就可以被for…of循环遍历

原生具备 Iterator 接口的数据结构如下:
Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象

//调用Symbol.iterator这个属性
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

Generator

Generator 函数是 ES6 提供的一种异步编程解决方案
Generator 函数是一个状态机，封装了多个内部状态，执行 Generator 函数会返回一个遍历器对象（可以依次遍历 Generator 函数内部的每一个状态）。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

上面代码定义了一个 Generator 函数helloWorldGenerator，它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world 和 return 语句（结束执行）
调用 Generator 函数后，该函数并不执行，返回的是一个遍历器对象（一个指向内部状态的指针对象）
下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态hw.next() // { value: 'hello', done: false }
yield表达式是暂停执行的标记，而next方法可以恢复执行
遇到return语句就结束，如果没有return语句，就执行到函数结束

与 Iterator 接口的关系

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

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable] // [1, 2, 3]

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

Generator 函数执行后，返回一个遍历器对象。该对象本身也具有Symbol.iterator属性，执行后返回自身