7 迭代器与生成器

1 理解迭代

2 迭代器模式

迭代器模式（特别是在 ECMAScript 这个语境下）描述了一个方案，即可以把有些结构称为“可迭代对象”（iterable），因为它们实现了正式的 Iterable 接口，而且可以通过迭代器 Iterator 消费。

可迭代对象是一种抽象的说法。基本上，可以把可迭代对象理解成数组或集合这样的集合类型的对象。它们包含的元素都是有限的，而且都具有无歧义的遍历顺序：

// 数组的元素是有限的
// 递增索引可以按序访问每个元素
let arr = [3, 1, 4]; 

// 集合的元素是有限的
// 可以按插入顺序访问每个元素
let set = new Set().add(3).add(1).add(4); 

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

2.1 可迭代协议

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

很多内置类型都实现了 Iterable 接口：

• 字符串
• 数组
• 映射
• 集合
• arguments对象
• NodeList等DOM集合类型

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

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*操作符，在生成器中使用

待补充 210

2.2 迭代器协议

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

next()方法返回的迭代器对象 IteratorResult 包含两个属性：done 和 value。done 是一个布尔值，表示是否还可以再次调用 next()取得下一个值；value 包含可迭代对象的下一个值（done 为false），或者 undefined（done 为 true）。done: true 状态称为“耗尽”。可以通过以下简单的数组来演示：

// 可迭代对象
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 状态，后续调用 next()就一直返回同样的值了：

let arr = ['foo']; 
let iter = arr[Symbol.iterator](); 
console.log(iter.next()); // { done: false, value: 'foo' } 
console.log(iter.next()); // { done: true, value: undefined } 
console.log(iter.next()); // { done: true, value: undefined } 
console.log(iter.next()); // { done: true, value: undefined } 

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

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 } 

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

“迭代器”的概念有时候容易模糊，因为它可以指通用的迭代，也可以指接口，还可以指正式的迭代器类型。下面的例子比较了一个显式的迭代器实现和一个原生的迭代器实现。

// 这个类实现了可迭代接口（Iterable） 
// 调用默认的迭代器工厂函数会返回一个实现迭代器接口（Iterator）的迭代器对象

class Foo { 
	[Symbol.iterator]() { 
 		return { 
 			next() { 
 				return { done: false, value: 'foo' }; 
 			} 
 		} 
 	} 
} 
let f = new Foo(); 

// 打印出实现了迭代器接口的对象
console.log(f[Symbol.iterator]()); // { next: f() {} } 

// Array 类型实现了可迭代接口（Iterable）
// 调用 Array 类型的默认迭代器工厂函数
// 会创建一个 ArrayIterator 的实例
let a = new Array(); 

// 打印出 ArrayIterator 的实例
console.log(a[Symbol.iterator]()); // Array Iterator {} 

2.3 自定义迭代器

待补充 213

3 GENERATORS

Generators are a delightfully flexible construct introduced in the ECMAScript 6 specification that offers the ability to pause and resume code execution inside a single function block. The implications of this new ability are profound; it allows for, among many other things, the ability to define custom iterators and implement coroutines.

3.1 Generator Basics

Generators take the form of a function, and the generator designation is performed with an asterisk. Anywhere a function definition is valid, a generator function definition is also valid:

// Generator function declaration
function* generatorFn() {}

// Generator function expression
let generatorFn = function* () {}

// Object literal method generator function
let foo = {
 	* generatorFn() {}
}

// Class instance method generator function
class Foo {
 	* generatorFn() {}
}

// Class static method generator function
class Bar {
 	static * generatorFn() {}
}

NOTE Arrow functions cannot be used as generator functions.

The function will be considered a generator irrespective of the whitespace surrounding the asterisk:

// Equivalent generator functions:
function* generatorFnA() {} 
function *generatorFnB() {} 
function * generatorFnC() {} 

// Equivalent generator methods:
class Foo { 
 	*generatorFnD() {} 
 	* generatorFnE() {} 
} 

When invoked, generator functions produce a generator object. Generator objects begin in a state of suspended execution. Like iterators, these generator objects implement the Iterator interface and therefore feature a next() method, which, when invoked, instructs the generator to begin or resume execution.

function* generatorFn() {} 

const g = generatorFn(); 

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

The return value of this next() method matches that of an iterator, with a done and value property. A generator function with an empty function body will act as a passthrough; invoking next() a single time will result in the generator reaching the done:true state.

function* generatorFn() {} 

let generatorObject = generatorFn(); 

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

The value property is the return value of the generator function, which defaults to undefined and can be specified via the generator function’s return value.

function* generatorFn() { 
 	return 'foo'; 
} 

let generatorObject = generatorFn();
 
console.log(generatorObject); 			// generatorFn {<suspended>} 
console.log(generatorObject.next()); 	// { done: true, value: 'foo' } 

Generator function execution will only begin upon the initial next() invocation, as shown here:

function* generatorFn() { 
 	console.log('foobar'); 
} 

// Nothing is logged yet when the generator function is initially invoked
let generatorObject = generatorFn(); 

generatorObject.next(); 	// foobar 

Generator objects implement the Iterable interface, and their default iterator is self-referential:

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

3.2 Interrupting Execution with “yield”

The yield keyword allows generators to stop and start execution, and it is what makes generators truly useful. Generator functions will proceed with normal execution until they encounter a yield keyword. Upon encountering the keyword, execution will be halted and the scope state of the function will be preserved. Execution will only resume when the next() method is invoked on the generator object:

function* generatorFn() { 
 	yield; 
} 

let generatorObject = generatorFn(); 

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

The yield keyword behaves as an intermediate function return, and the yielded value is available inside the object returned by the next() method. A generator function exiting via the yield keyword will have a done value of false; a generator function exiting via the return keyword will have a done value of true:

function* generatorFn() { 
 	yield 'foo'; 
 	yield 'bar'; 
 	return 'baz'; 
} 

let generatorObject = generatorFn();
 
console.log(generatorObject.next()); // { done: false, value: 'foo' } 
console.log(generatorObject.next()); // { done: false, value: 'bar' } 
console.log(generatorObject.next()); // { done: true, value: 'baz' } 

Execution progress within a generator function is scoped to each generator object instance. Invoking next() on one generator object does not affect any other:

function* generatorFn() { 
 	yield 'foo'; 
 	yield 'bar'; 
 	return 'baz'; 
} 

let generatorObject1 = generatorFn(); 
let generatorObject2 = generatorFn(); 

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

The yield keyword can only be used inside a generator function; anywhere else will throw an error. Like the function return keyword, the yield keyword must appear immediately inside a generator function definition. Nesting further inside a non-generator function will throw a syntax error:

// valid
function* validGeneratorFn() { 
 	yield; 
} 

// invalid
function* invalidGeneratorFnA() { 
 	function a() { 
 		yield; 
 	} 
} 

// invalid
function* invalidGeneratorFnB() { 
 	const b = () => { 
 		yield; 
 	} 
} 

// invalid
function* invalidGeneratorFnC() { 
 	(() => { 
 		yield; 
 	})(); 
} 

3.2.1 Using a Generator Object as an Iterable

You will infrequently find the need to explicitly invoke next() on a generator object. Instead, generators are much more useful when consumed as an iterable, as shown here:

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

for (const x of generatorFn()) { 
 	console.log(x); 
} 
// 1 
// 2 
// 3 

This can be especially useful when the need to define custom iterables arises. For example, it is often useful to define an iterable, which will produce an iterator that executes a specific number of times. With a generator, this can be accomplished simply with a loop:

function* nTimes(n) { 
 	while(n--) { 
 		yield; 
 	} 
} 

for (let _ of nTimes(3)) { 
 	console.log('foo'); 
} 
// foo 
// foo 
// foo

The single generator function parameter controls the number of loop iterations. When n reaches 0, the while condition will become falsy, the loop will exit, and the generator function will return.

3.2.2 Using “yield” for Input and Output

The yield keyword also behaves as an intermediate function parameter. The yield keyword where the generator last paused execution will assume the first value passed to next(). Somewhat confusingly, the value provided to the first next() invocation is not used, as this next() is used to begin the generator function execution:

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 

The yield keyword can be simultaneously used as both an input and an output, as is shown in the following example:

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' } 

Because the function must evaluate the entire expression to determine the value to return, it will pause execution when encountering the yield keyword and evaluate the value to yield, foo. The subsequent next() invocation provides the bar value as the value for that same yield, and this in turn is evaluated as the generator function return value.

The yield keyword is not limited to a one-time use. An infinite counting generator function can be defined as follows:

function* generatorFn() {
 	for (let i = 0;;++i) {
 		yield i;
 	}
}

let generatorObject = generatorFn();

console.log(generatorObject.next().value); // 0
console.log(generatorObject.next().value); // 1
console.log(generatorObject.next().value); // 2
console.log(generatorObject.next().value); // 3
console.log(generatorObject.next().value); // 4
console.log(generatorObject.next().value); // 5 
... 

Suppose you wanted to define a generator function that would iterate a configurable number of times and produce the index of iteration. This can be accomplished by instantiating a new array, but the same behavior can be accomplished without the array:

function* nTimes(n) {
 	for (let i = 0; i < n; ++i) {
 		yield i;
 	}
}

for (let x of nTimes(3)) {
 	console.log(x);
}
// 0
// 1
// 2

Alternately, the following has a slightly less verbose while loop implementation:

function* nTimes(n) {
 	let i = 0;
 	while(n--) {
 		yield i++;
 	}
}

for (let x of nTimes(3)) {
 	console.log(x);
}
// 0
// 1
// 2 

Using generators in this way provides a useful way of implementing ranges or populating arrays:

function* range(start, end) {
 	let i = start;
 	while(end > start) {
 		yield start++;
 	}
}

for (const x of range(4, 7)) {
 	console.log(x);
}
// 4
// 5
// 6

function* zeroes(n) {
 	while(n--) {
 		yield 0;
 	}
}

console.log(Array.from(zeroes(8))); // [0, 0, 0, 0, 0, 0, 0, 0] 

3.2.3 Yielding an Iterable

It is possible to augment the behavior of yield to cause it to iterate through an iterable and yield its contents one at a time. This can be done using an asterisk, as shown here:

// generatorFn is equivalent to:
// function* generatorFn() {
//     for (const x of [1, 2, 3]) {
//         yield x;
//     }
// }
function* generatorFn() {
 	yield* [1, 2, 3];
}

let generatorObject = generatorFn();

for (const x of generatorFn()) {
 	console.log(x);
}
// 1
// 2
// 3

Like the generator function asterisk, whitespace around the yield asterisk will not alter its behavior:

function* generatorFn() {
 	yield* [1, 2];
 	yield *[3, 4];
 	yield * [5, 6];
}

for (const x of generatorFn()) {
 	console.log(x);
}
// 1
// 2
// 3
// 4
// 5
// 6

Because yield* is effectively just serializing an iterable into sequential yielded values, using it isn’t any different than placing yield inside a loop. These two generator functions are equivalent in behavior:

function* generatorFnA() {
 	for (const x of [1, 2, 3]) {
 		yield x;
 	}
}

for (const x of generatorFnA()) {
 	console.log(x);
}
// 1
// 2
// 3

function* generatorFnB() {
 	yield* [1, 2, 3];
}

for (const x of generatorFnB()) {
 	console.log(x);
}
// 1
// 2
// 3

The value of yield* is the value property accompanying done:true of the associated iterator. For vanilla iterators, this value will be undefined:

function* generatorFn() {
 	console.log('iter value:', yield* [1, 2, 3]);
}

for (const x of generatorFn()) {
 	console.log('value:', x);
}
// value: 1
// value: 2
// value: 3
// iter value: undefined

For iterators produced from a generator function, this value will take the form of whatever value is returned from the generator function:

function* innerGeneratorFn() {
 	yield 'foo';
 	return 'bar';
}

function* outerGeneratorFn(genObj) {
 	console.log('iter value:', yield* innerGeneratorFn());
}

for (const x of outerGeneratorFn()) {
 	console.log('value:', x);
}
// value: foo
// iter value: bar

3.2.4 Recursive Algorithms Using yield*

待补充