登录
Javascript的Iterator和Generator
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* 后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口
-
数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口，如下：
- for...of
- Array.from()
- Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
- Promise.all()
- 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'];
