Iterator和Generator

Iterator

简介

遍历器：Iterator是一种机制。可以把它理解成一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator 的作用有三个：

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

机制

Iterator 的遍历过程是这样的。

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

下面是一个模拟next方法返回值的例子：

    const arr = [1, 2, 3, 4, 5];
    function myIterator(array) {
        let nextIndex = 0;
        return {
            next: function () {
                return nextIndex < array.length ? { value: arr[nextIndex++], done: false } : { value: undefined, done: true };
            }
        }
    }
    const it = myIterator(arr);
    it.next(); // {value: 1, done: false}
    it.next(); // {value: 2, done: false}
    it.next(); // {value: 3, done: false}
    it.next(); // {value: 4, done: false}
    it.next(); // {value: 5, done: false}
    it.next(); // {value: undefined, done: true}

当然 Iterator 只是把接口规格加到数据结构之上，所以，遍历器与它所遍历的那个数据结构，实际上是分开的。

默认 Iterator 接口

当使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。

ES6 的有些数据结构原生具备 Iterator 接口（比如数组），即不用任何处理，就可以被for...of循环遍历。原因在于，这些数据结构原生部署了Symbol.iterator属性，另外一些数据结构没有（比如对象）。凡是部署了Symbol.iterator属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象。Symbol.iterator在任何作用域使用值都一样。

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

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

下面的例子是数组的Symbol.iterator属性：

    const arr = [1, 2, 3, 4, 5];
    let iter = arr[Symbol.iterator]();
    it.next(); // {value: 1, done: false}
    it.next(); // {value: 2, done: false}
    it.next(); // {value: 3, done: false}
    it.next(); // {value: 4, done: false}
    it.next(); // {value: 5, done: false}
    it.next(); // {value: undefined, done: true}

综上表现，本质上，遍历器是一种线性处理，对于任何非线性的数据结构，部署遍历器接口，就等于部署一种线性转换。

实现一个 Iterator 接口

一个对象如果要具备可被for...of循环调用的 Iterator 接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）。

class RangeIterator {
  constructor(start, stop) {
    this.start = start;
    this.stop = stop;
  }
  [Symbol.iterator]() {
    return this;
  }
  next() {
    let start = this.start;
    if (start <= this.stop) {
      this.start ++;
      return { value: start, done: false };
    }
    return { value: undefined, done: true };
  }
}

const obj = new RangeIterator(1, 5);
const ite = obj[Symbol.iterator]();
ite.next(); // { value: 1, done: false }
ite.next(); // { value: 2, done: false }
ite.next(); // { value: 3, done: false }
ite.next(); // { value: 4, done: false }
ite.next(); // { value: 5, done: false }
ite.next(); // { value: 6, done: false }

遍历器对象的return、throw

遍历器对象除了具有next()方法，还可以具有return()方法和throw()方法。如果你自己写遍历器对象生成函数，那么next()方法是必须部署的，return()方法和throw()方法是否部署是可选的。

return()方法的使用场合是，如果for...of循环提前退出（通常是因为出错，或者有break语句），就会调用return()方法。如果一个对象在完成遍历前，需要清理或释放资源，就可以部署return()方法。

调用 Iterator 接口的场合

• 数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator

• 扩展运算符（...）也会调用默认的 Iterator 接口（某个数据结构部署了 Iterator 接口，就可以对它使用扩展运算符）

• yield* 后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口

• 数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口，如下：

1. for...of
2. Array.from()
3. Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
4. Promise.all()
5. Promise.race()

Generator

简介

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

机制

形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

function* testGenerator() {
  yield 1;
  yield 2;
  return 3;
}
let test = testGenerator();
test.next(); // { value: 1, done: false }
test.next(); // { value: 2, done: false }
test.next(); // { value: 3, done: true }
test.next(); // { value: undefined, done: true }

上面代码定义了一个 Generator 函数testGenerator，它内部有三个yield表达式（1、2、3），即该函数有四个状态：1，2,3 和 return 语句（结束执行）。

然后，Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是上面介绍的遍历器对象Iterator。下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

yield 表达式

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

遍历器对象的next方法的运行逻辑如下。

• 遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

• 下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。

• 如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

• 如果该函数没有return语句，则返回的对象的value属性值为undefined。

yield表达式只能用在 Generator 函数里面，用在其他地方都会报错。

function* testGenerator() {
  // 可以在for循环中，但是不是在forEach等函数中
  for (let i = 0;;i ++) {
    if (i === 3) {
      return i;
    }
    yield i;
  }
}
let test = testGenerator();
test.next(); // { value: 0, done: false }
test.next(); // { value: 1, done: false }
test.next(); // { value: 2, done: true }
test.next(); // { value: undefined, done: true }

yield表达式如果用在另一个表达式之中，必须放在圆括号里面。

function* testGenerator() {
  for (let i = 0;i < 3;i ++) {
    console.log('next:' + (yield i));
  }
}
let test = testGenerator();
test.next(); 
// 先：{ value: 0, done: false }
// 后：next:undefined

yield表达式用作函数参数或放在赋值表达式的右边，可以不加括号。

function* testGenerator() {
  testFunc(yield 1);
  let a = yield 2; // { value: 2, done: false }
  console.log('next:', a); // next: undefined
  yield 3;
}
let test = testGenerator();
test.next(); // 先 { value: 1, done: false }，后 test: undefined
test.next(); // { value: 2, done: false }
test.next(); // 先 next: undefined，后 { value: 3, done: false }

与 Iterator 接口的关系

任意一个对象的Symbol.iterator方法，等于该对象的遍历器生成函数，调用该函数会返回该对象的一个遍历器对象。Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口。

let obj = {};
obj[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
}
console.log([...obj]); // [1, 2, 3]
// 具有Symbol.iterator属性，即可使用拓展运算符

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

function* test() {
  yield true;
}
const iter = test();
console.log(iter[Symbol.iterator]() === iter); // true

next 方法的参数

上面的示例中yield 2本身并没有返回值，即为undefined。next方法可以带一个参数，该参数就会被当作上一个状态yield表达式的返回值。

function* test() {
  let res1 = yield 1;
  console.log(res1);
  let res2 = yield 2;
  console.log(res2);
  let res3 = yield 3;
  console.log(res3);
}
const iter = test();
iter.next('a'); // { value: 1, done: false }
iter.next('b'); // 先 b，后 { value: 2, done: false }
iter.next('c'); // 先 c，后 { value: 3, done: false }
iter.next('d'); // 先 d，后 { value: undefined, done: true }

所以正常情况来说，一个Generator函数中，第一个yield传递参数是没有作用的，因为并没有上一个状态去接收它的参数。

for...of 循环

for...of循环可以自动遍历 Generator 函数运行时生成的Iterator对象，且此时不再需要调用next方法。

function* test() {
  yield 1;
  yield 2;
  yield 3;
}

for (let key of test()) {
  console.log(key); // 1 2 3
}

throw 和 return

Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获。

function* test() {
  try {
    yield 1;
  } catch (error) {
    console.log('test:', error);
  }
  yield console.log(2);
}
const iter = test();
iter.next(); // { value: 1, done: false }

try {
  iter.throw(new Error('出错了！')); // test: Error: 出错了！   2
  iter.throw(new Error('出错了！')); // catch: Error: 出错了！
} catch (error) {
  console.log('catch:', error);
}

上面代码中，遍历器对象iter连续抛出两个错误。第一个错误被 Generator 函数体内的catch语句捕获（前提是必须至少执行过一次next方法）。iter第二次抛出错误，由于 Generator 函数内部的catch语句已经执行过了，不会再捕捉到这个错误了，所以这个错误就被抛出了 Generator 函数体，被函数体外的catch语句捕获。

throw方法可以接受一个参数，该参数会被catch语句接收，建议抛出Error对象的实例。throw方法被捕获以后，会附带执行下一条yield表达式。也就是说，会附带执行一次next方法。

function* test() {
  yield 1;
  yield 2;
  yield 3;
} 
const iter = test();

iter.next(); // { value: 1, done: false }
iter.return('end'); // { value: 'end', done: true }
iter.next(); // { value: undefined, done: true }

上面代码中，遍历器对象调用return()方法后，返回值的value属性就是return()方法的参数。并且，Generator 函数的遍历就终止了，返回值的done属性为true，以后再调用next()方法，done属性总是返回true.如果return()方法调用时，不提供参数，则返回值的value属性为undefined。

function* test() {
  yield 1;
  try {
    yield 'try';
  } finally {
    yield 'finally';
  }
  yield 3;
} 
const iter = test();

iter.next(); // { value: 1, done: false }
iter.next(); // { value: 'try', done: false }
iter.return('end'); // { value: 'finally', done: false }
iter.next(); // { value: 'end', done: true }

如果 Generator 函数内部有try...finally代码块，且正在执行try代码块，那么return()方法会导致立刻进入finally代码块，执行完以后，整个函数才会结束。

yield* 表达式

如果在 Generator 函数内部，调用另一个 Generator 函数。需要在前者的函数体内部，自己手动完成遍历。

如下：

function* a() {
  yield 1;
  yield 2;
}

function* b() {
  yield 'a';
  for (let i of a()) {
    console.log(i);
  }
  yield 'b';
}
for (let j of b()) {
  console.log(j);
}
// a 1 2 b

yield*表达式，作为解决办法，用来在一个 Generator 函数里面执行另一个 Generator 函数。简化上述代码

function* a() {
  yield 1;
  yield 2;
}

function* b() {
  yield 'a';
  yield* a();
  yield 'b';
}
for (let j of b()) {
  console.log(j);
}
// a 1 2 b

可以通过yield*实现多层数组的扁平化处理，如下：

function* iterTree(tree) {
  if (Array.isArray(tree)) {
    for(let item of tree) {
      yield* iterTree(item);
    }
  } else {
    yield tree;
  }
}
const arr = [1, 2, ['a', 'b'], 4, ['name', 'age']];
console.log([...iterTree(arr)]);
// [1, 2, 'a', 'b', 4, 'name', 'age'];