迭代器

了解迭代

在 JavaScript 中，计数循环就是一种最简单的迭代：

for (let i = 1; i <= 10; ++i) {

console.log(i);

}

循环是迭代机制的基础，这是因为它可以指定迭代的次数，以及每次迭代要执行什么操作。每次循环都会在下一次迭代开始之前完成，而每次迭代的顺序都是事先定义好的。迭代会在一个有序集合上进行。数组是 JavaScript 中有序集合的最典型例子。

let collection = ['foo', 'bar', 'baz'];

for (let index = 0; index < collection.length; ++index) {

console.log(collection[index]);

}

因为数组有已知的长度，且数组每一项都可以通过索引获取，所以整个数组可以通过递增索引来遍历。由于如下原因，通过这种循环来执行例程并不理想。

迭代之前需要事先知道如何使用数据结构。数组中的每一项都只能先通过引用取得数组对象，然后再通过[]操作符取得特定索引位置上的项。这种情况并不适用于所有数据结构。
遍历顺序并不是数据结构固有的。通过递增索引来访问数据是特定于数组类型的方式，并不适用于其他具有隐式顺序的数据结构。

ES5 新增了 Array.prototype.forEach()方法，向通用迭代需求迈进了一步（但仍然不够理想）：

let collection = ['foo', 'bar', 'baz'];

collection.forEach((item) => console.log(item));

// foo

// bar

// baz

这个方法解决了单独记录索引和通过数组对象取得值的问题。不过，没有办法标识迭代何时终止。因此这个方法只适用于数组，而且回调结构也比较笨拙。在 ECMAScript 较早的版本中，执行迭代必须使用循环或其他辅助结构。随着代码量增加，代码会变得越发混乱。很多语言都通过原生语言结构解决了这个问题，开发者无须事先知道如何迭代就能实现迭代操作。这个解决方案就是迭代器模式。Python、Java、C++，还有其他很多语言都对这个模式提供了完备的支持。JavaScript 在 ECMAScript 6 以后也支持了迭代器模式。

迭代器模式

迭代器模式（特别是在 ECMAScript 这个语境下）描述了一个方案，即可以把有些结构称为“可迭代对象”（iterable），因为它们实现了正式的 Iterable 接口，而且可以通过迭代器 Iterator 消费。可迭代对象是一种抽象的说法。基本上，可以把可迭代对象理解成数组或集合这样的集合类型的对象。它们包含的元素都是有限的，而且都具有无歧义的遍历顺序。

任何实现 Iterable 接口的数据结构都可以被实现 Iterator 接口的结构“消费”（consume）。迭代器（iterator）是按需创建的一次性对象。每个迭代器都会关联一个可迭代对象，而迭代器会暴露迭代其关联可迭代对象的 API。迭代器无须了解与其关联的可迭代对象的结构，只需要知道如何取得连续的值。这种概念上的分离正是 Iterable 和 Iterator 的强大之处。

可迭代协议

实现 Iterable 接口（可迭代协议）要求同时具备两种能力：支持迭代的自我识别能力和创建实现Iterator 接口的对象的能力。在 ECMAScript 中，这意味着必须暴露一个属性作为“默认迭代器”，而且这个属性必须使用特殊的 Symbol.iterator 作为键。这个默认迭代器属性必须引用一个迭代器工厂函数，调用这个工厂函数必须返回一个新迭代器。

所以检查是否存在默认迭代器属性可以暴露这个工厂函数：

let num = 1;

let obj = {};

// 这两种类型没有实现迭代器工厂函数

console.log(num[Symbol.iterator]); // undefined

console.log(obj[Symbol.iterator]); // undefined

let str = 'abc';

let arr = ['a', 'b', 'c'];

let map = new Map().set('a', 1).set('b', 2).set('c', 3);

let set = new Set().add('a').add('b').add('c');

let els = document.querySelectorAll('div');

// 这些类型都实现了迭代器工厂函数

console.log(str[Symbol.iterator]); // f values() { [native code] }

console.log(arr[Symbol.iterator]); // f values() { [native code] }

console.log(map[Symbol.iterator]); // f values() { [native code] }

console.log(set[Symbol.iterator]); // f values() { [native code] }

console.log(els[Symbol.iterator]); // f values() { [native code] }

// 调用这个工厂函数会生成一个迭代器

console.log(str[Symbol.iterator]()); // StringIterator {}

console.log(arr[Symbol.iterator]()); // ArrayIterator {}

console.log(map[Symbol.iterator]()); // MapIterator {}

console.log(set[Symbol.iterator]()); // SetIterator {}

console.log(els[Symbol.iterator]()); // ArrayIterator {}

实际写代码过程中，不需要显式调用这个工厂函数来生成迭代器。实现可迭代协议的所有类型都会自动兼容接收可迭代对象的任何语言特性。接收可迭代对象的原生语言特性包括：

for-of
数组解构
扩展操作符
Array.from()
创建集合
创建映像
Promise.all 接受由期约组成的可迭代对象
Promise.race() 接受由期约组成的可迭代对象
yield*

这些原生语言结构会在后台调用提供的可迭代对象的这个工厂函数，从而创建一个迭代器。

迭代器协议：

迭代器时一种一次性使用的对象，用于迭代与其关联的可迭代对象，迭代器API使用next()遍历数据，并且每次返回IteratorResult对象，其中包含下一个值，如不调用则无法知道当前位置。

next()返回的IteratorResult包含两个属性：done和value，done是布尔值，表示是否还能继续next()取得下一个值，value包含可迭代对象的下一个值。

// 可迭代对象

let arr = ['foo', 'bar'];

// 迭代器工厂函数

console.log(arr[Symbol.iterator]); // f values() { [native code] }

// 迭代器

let iter = arr[Symbol.iterator]();

console.log(iter); // ArrayIterator {}

// 执行迭代

console.log(iter.next()); // { done: false, value: 'foo' }

console.log(iter.next()); // { done: false, value: 'bar' }

console.log(iter.next()); // { done: true, value: undefined }

这里是通过创建迭代器并调用next()方法顺序迭代了数组，直至不再产生新的值，迭代器是不知道怎么获取下一个值也不知道可迭代对象有多大，但只要done值为true，则已知返回同一个值。

每个迭代器都表示对可迭代对象的一次性有序遍历。不同迭代器的实例相互之间没有联系，只会独立地遍历可迭代对象：

let arr = ['foo', 'bar'];

let iter1 = arr[Symbol.iterator]();

let iter2 = arr[Symbol.iterator]();

console.log(iter1.next()); // { done: false, value: 'foo' }

console.log(iter2.next()); // { done: false, value: 'foo' }

console.log(iter2.next()); // { done: false, value: 'bar' }

console.log(iter1.next()); // { done: false, value: 'bar' }

迭代器并不与可迭代对象某个时刻的快照绑定，而仅仅是使用游标来记录遍历可迭代对象的历程。如果可迭代对象在迭代期间被修改了，那么迭代器也会反映相应的变化：

let arr = ['foo', 'baz'];

let iter = arr[Symbol.iterator]();

console.log(iter.next()); // { done: false, value: 'foo' }

// 在数组中间插入值

arr.splice(1, 0, 'bar');

console.log(iter.next()); // { done: false, value: 'bar' }

console.log(iter.next()); // { done: false, value: 'baz' }

console.log(iter.next()); // { done: true, value: undefined }

注意迭代器维护着一个指向可迭代对象的引用，因此迭代器会阻止垃圾回收程序回收可迭代对象。

自定义迭代器

为了让一个可迭代对象能够创建多个迭代器，必须每创建一个迭代器就对应一个新计数器。为此可以把计算器变量放到闭包中，然后通过闭包返回迭代器。

class Counter {

constructor(limit) {

this.limit = limit;

}

[Symbol.iterator]() {

let count = 1,

limit = this.limit;

return {

next() {

if (count <= limit) {

return { done: false, value: count++ };

} else {

return { done: true, value: undefined };

}

},

};

}

}

let counter = new Counter(3);

for (let i of counter) {

console.log(i);

}

for (let i of counter) {

console.log(i);

}

提前终止迭代器

可选的 return()方法用于指定在迭代器提前关闭时执行的逻辑。执行迭代的结构在想让迭代器知道它不想遍历到可迭代对象耗尽时，就可以“关闭”迭代器。可能的情况包括：

for-of 循环通过 break、continue、return 或 throw 提前退出；
解构操作并未消费所有值。

return()方法必须返回一个有效的 IteratorResult 对象。简单情况下，可以只返回{ done: true }。如下面的代码所示，内置语言结构在发现还有更多值可以迭代，但不会消费这些值时，会自动调用

return()方法。

class Counter {

constructor(limit) {

this.limit = limit;

}

[Symbol.iterator]() {

let count = 1,

limit = this.limit;

return {

next() {

if (count <= limit) {

return { done: false, value: count++ };

} else {

return { done: true };

}

},

return() {

console.log('Exiting early');

return { done: true };

}

};

}

}

let counter1 = new Counter(5);

for (let i of counter1) {

if (i > 2) {

break;

}

console.log(i);

}

// 1

// 2

// Exiting early

let counter2 = new Counter(5);

try {

for (let i of counter2) {

if (i > 2) {

throw 'err';

}

console.log(i);

}

} catch(e) {}

// 1

// 2

// Exiting early

let counter3 = new Counter(5);

let [a, b] = counter3;

// Exiting early

如果迭代器没有关闭，则还可以继续从上次离开的地方继续迭代。比如，数组的迭代器就是不能关闭的：

let a = [1, 2, 3, 4, 5];

let iter = a[Symbol.iterator]();

for (let i of iter) {

console.log(i);

if (i > 2) {

break

}

}

// 1

// 2

// 3

for (let i of iter) {

console.log(i);

}

// 4

// 5

因为 return()方法是可选的，所以并非所有迭代器都是可关闭的。要知道某个迭代器是否可关闭，可以测试这个迭代器实例的 return 属性是不是函数对象。不过，仅仅给一个不可关闭的迭代器增加这个方法并不能让它变成可关闭的。这是因为调用 return()不会强制迭代器进入关闭状态。即便如此，return()方法还是会被调用。

let a = [1, 2, 3, 4, 5];

let iter = a[Symbol.iterator]();

iter.return = function() {

console.log('Exiting early');

return { done: true };

};

for (let i of iter) {

console.log(i);

if (i > 2) {

break

}

}

// 1

// 2

// 3

// 提前退出

for (let i of iter) {

console.log(i);

}

// 4

// 5

生成器

是ES6新增的极为灵活的结构，拥有在一个函数块内暂停和恢复代码执行的能力。

生成器基础

生成器的形式是一个函数，函数名称前面加一个* 表示它是生成器。只要是可以定义函数的地方，就可以定义生成器。

// 生成器函数声明

function* generatorFn() {}

// 生成器函数表达式

let generatorFn = function* () {}

// 作为对象字面量方法的生成器函数

let foo = {

* generatorFn() {}

}

// 作为类实例方法的生成器函数

class Foo {

* generatorFn() {}

}

// 作为类静态方法的生成器函数

class Bar {

static * generatorFn() {}

}

注意：箭头函数不能用来定义生成器函数，因为箭头函数的语法不支持yield关键字，而生成器函数需要暂停和恢复执行。

调用生成器函数会产生生成器对象，生成器对象一开始处于暂停执行的状态。与迭代器相似，生成器对象也有Iterator接口，因此具有next()方法，调用该方法会让生成器开始或恢复执行。

function* generatorFn() {}

const g = generatorFn();

console.log(g); // generatorFn {<suspended>}

console.log(g.next); // f next() { [native code] }

next()方法的返回值类似于迭代器，有一个 done 属性和一个 value 属性。函数体为空的生成器函数中间不会停留，调用一次 next()就会让生成器到达 done: true 状态。

value 属性是生成器函数的返回值，默认值为 undefined，可以通过生成器函数的返回值指定：

function* generatorFn() {

return 'foo';

}

let generatorObject = generatorFn();

console.log(generatorObject); // generatorFn {<suspended>}

console.log(generatorObject.next()); // { done: true, value: 'foo' }

生成器函数只会在初次调用 next()方法后开始执行，如下所示：

function* generatorFn() {

console.log('foobar');

}

// 初次调用生成器函数并不会打印日志

let generatorObject = generatorFn();

generatorObject.next(); // foobar

生成器对象实现了 Iterable 接口，它们默认的迭代器是自引用的：

function* generatorFn() {}

console.log(generatorFn);

// f* generatorFn() {}

console.log(generatorFn()[Symbol.iterator]);

// f [Symbol.iterator]() {native code}

console.log(generatorFn());

// generatorFn {<suspended>}

console.log(generatorFn()[Symbol.iterator]());

// generatorFn {<suspended>}

const g = generatorFn();

console.log(g === g[Symbol.iterator]());

// true

通过yield中断执行

yield关键字可以让生成器停止和开始执行，也是生成器函数最有用的地方。生成器函数再遇到该字段前会正常执行，遇到这个关键字后执行就会停止，函数作用域会被保留。停止后只能通过next()恢复执行。

function* generatorFn() {

yield;

}

let generatorObject = generatorFn();

console.log(generatorObject.next()); // { done: false, value: undefined }

console.log(generatorObject.next()); // { done: true, value: undefined }

生成器函数内部的执行流程会针对每个生成器对象区分作用域。在一个生成器对象上调用 next()不会影响其他生成器。

yield关键字只能在生成器函数中使用，在其他地方会抛出错误。

生成器对象作为可迭代对象在生成器对象上显式调用 next()方法的用处并不大。其实，如果把生成器对象当成可迭代对象，那么使用起来会更方便：

function* generatorFn() {

yield 1;

yield 2;

yield 3;

}

for (const x of generatorFn()) {

console.log(x);

}

// 1

// 2

// 3

使用 yield 实现输入和输出除了可以作为函数的中间返回语句使用，yield 关键字还可以作为函数的中间参数使用。上一次让生成器函数暂停的 yield 关键字会接收到传给 next()方法的第一个值。这里有个地方不太好理解——第一次调用 next()传入的值不会被使用，因为这一次调用是为了开始执行生成器函数：

function* generatorFn(initial) {

console.log(initial);

console.log(yield);

console.log(yield);

}

let generatorObject = generatorFn('foo');

generatorObject.next('bar'); // foo

generatorObject.next('baz'); // baz

generatorObject.next('qux'); // qux

yield 关键字可以同时用于输入和输出，如下例所示：

function* generatorFn() {

return yield 'foo';

}

let generatorObject = generatorFn();

console.log(generatorObject.next()); // { done: false, value: 'foo' }

console.log(generatorObject.next('bar')); // { done: true, value: 'bar' }

生成器作为默认迭代器

因为生成器对象实现了 Iterable 接口，而且生成器函数和默认迭代器被调用之后都产生迭代器，所以生成器格外适合作为默认迭代器。下面是一个简单的例子，这个类的默认迭代器可以用一行代码产出类的内容：

class Foo {

constructor() {

this.values = [1, 2, 3];

}

* [Symbol.iterator]() {

yield* this.values;

}

}

const f = new Foo();

for (const x of f) {

console.log(x);

}

// 1

// 2

// 3

这里，for-of 循环调用了默认迭代器（它恰好又是一个生成器函数）并产生了一个生成器对象。这个生成器对象是可迭代的，所以完全可以在迭代中使用。

提前终止生成器

提前终止生成器函数有两种方式：

return()

function * myY(){

yield returen1();

yield 2

}

const returen1 = ()=> {

return 1

}

const y = myY()

console.log(y.return())

throw

function * myY(){

yield returen1();

yield 2

}

const returen1 = ()=> {

return 1

}

const y = myY()

try{

y.throw('123')

}catch(e){

console.log(e) // 123

}

小结

迭代是一种所有编程语言中都可以看到的模式。ECMAScript 6 正式支持迭代模式并引入了两个新的

语言特性：迭代器和生成器。

迭代器是一个可以由任意对象实现的接口，支持连续获取对象产出的每一个值。任何实现 Iterable接口的对象都有一个 Symbol.iterator 属性，这个属性引用默认迭代器。默认迭代器就像一个迭代器工厂，也就是一个函数，调用之后会产生一个实现 Iterator 接口的对象。

迭代器必须通过连续调用 next()方法才能连续取得值，这个方法返回一个 IteratorObject。这个对象包含一个 done 属性和一个 value 属性。前者是一个布尔值，表示是否还有更多值可以访问；后者包含迭代器返回的当前值。这个接口可以通过手动反复调用 next()方法来消费，也可以通过原生消费者，比如 for-of 循环来自动消费。

生成器是一种特殊的函数，调用之后会返回一个生成器对象。生成器对象实现了 Iterable 接口，因此可用在任何消费可迭代对象的地方。生成器的独特之处在于支持 yield 关键字，这个关键字能够暂停执行生成器函数。使用 yield 关键字还可以通过 next()方法接收输入和产生输出。在加上星号之后，yield 关键字可以将跟在它后面的可迭代对象序列化为一连串值

原文：JavaScript高级程序设计(第四版)