第七章迭代器与生成器

女挨踢

已于 2023-05-31 17:54:52 修改

阅读量97

点赞数 1

分类专栏： JavaScript 文章标签： javascript

于 2022-08-23 16:23:31 首次发布

本文链接：https://blog.csdn.net/weixin_39807883/article/details/126289141

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

“迭代”：的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件。

7.1 理解迭代

1、迭代会在一个有序集合上进行。数组是 JavaScript 中有序集合的最典型例子。

let collection = ['foo', 'bar', 'baz']; 
for (let index = 0; index < collection.length; ++index) { 
 console.log(collection[index]); 
}

但是并不普遍适用
（1）迭代之前需要事先知道如何使用数据结构，如 [ ]
（2）遍历顺序并不是数据结构固有的，数组是递增索引，不适
用于其他具有隐式顺序的数据结构。

用Array.prototype.forEach()解决以上问题，但没有办法标识迭代何时终止

较早版本中都是使用循环和其他辅助结构，随着代码量增加会越发混乱，因此ECMAScript6支持了很多其他语言在支持的迭代器模式

7.2 迭代器模式

迭代器模式描述了一个方案：把实现了正式的Iterable接口，而且可以通过迭代器Iterator消费的结构称为“可迭代对象”

任何实现 Iterable 接口的数据结构都可以被实现 Iterator 接口的结构“消费”，迭代器是按需创建的一次性对象，每个迭代器都会关联一个可迭代对象，迭代器会暴露迭代其关联可迭代对象的API

7.2.1 可迭代协议

实现 Iterable 接口（可迭代协议）要求具备2种能力：1. 支持迭代的自我识别能力。2. 创建实现 Iterable 接口的对象的能力
在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*操作符，在生成器中使用

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

let arr = ['foo', 'bar', 'baz']; 
// for-of 循环
for (let el of arr) { 
 console.log(el); 
}
// foo 
// bar 
// baz 
// 数组解构
let [a, b, c] = arr; 
console.log(a, b, c); // foo, bar, baz 
// 扩展操作符
let arr2 = [...arr]; 
console.log(arr2); // ['foo', 'bar', 'baz'] 
// Array.from() 
let arr3 = Array.from(arr); 
console.log(arr3); // ['foo', 'bar', 'baz'] 
// Set 构造函数
let set = new Set(arr); 
console.log(set); // Set(3) {'foo', 'bar', 'baz'} 
// Map 构造函数
let pairs = arr.map((x, i) => [x, i]); 
console.log(pairs); // [['foo', 0], ['bar', 1], ['baz', 2]] 
let map = new Map(pairs); 
console.log(map); // Map(3) { 'foo'=>0, 'bar'=>1, 'baz'=>2 }

如果对象原型链上的父类实现了 Iterable 接口，那这个对象也就实现了这个接口：

class FooArray extends Array {} 
let fooArr = new FooArray('foo', 'bar', 'baz'); 
for (let el of fooArr) { 
 console.log(el); 
} 
// foo
// bar 
// baz

7.2.2 迭代器协议

迭代器是一种一次性使用的对象，用于迭代与其关联的可迭代对象。
迭代器 API 使用 next()方法在可迭代对象中遍历数据。
- 调用 next()，会返回一个 IteratorResult 对象
- IteratorResult 包含迭代器返回的下一个值：done 和 value
- done - 布尔值 - 是否还可以再次调用 next()取得下一个值
- value 包含可迭代对象的下一个值 / undefined（done: true）
只要迭代器到达 done: true 状态，后续调用 next()就一直返回同样的值了
不同迭代器的实例相互之间没有联系，只会独立地遍历可迭代对象

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

迭代器不是某个时刻都快照，如果可迭代对象在迭代期间被修改了，那么迭代器也会反映相应的变化

7.2.3 自定义迭代器

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); } 
// 1 2 3
for (let i of counter) { console.log(i); } 
// 1 2 3
每个以这种方式创建的迭代器也实现了 Iterable 接口。Symbol.iterator 属性引用的工厂函数
会返回相同的迭代器：
let arr = ['foo', 'bar', 'baz']; 
let iter1 = arr[Symbol.iterator](); 
console.log(iter1[Symbol.iterator]); // f values() { [native code] } 
let iter2 = iter1[Symbol.iterator](); 
console.log(iter1 === iter2); // true

7.2.4 提前终止迭代器

可选的 return()方法用于指定在迭代器提前关闭时执行的逻辑

for-of 循环通过 break、continue、return 或 throw 提前退出；
解构操作并未消费所有值。
return()返回一个有效IteratorResult 对象，可只返回{ done: true }

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 };
			        }
		      	},
		      	return() { 
					console.log('Exiting early'); 
					return { done: true }; 
				}
		    }
	  }
}
let counter1 = new Counter(5); 
for (let i of counter1) {
	if (i > 2) { 
		break; / throw 'err';
	} 
	console.log(i); 
}
// 1 
// 2 
// Exiting early

let counter2 = new Counter(5); 
let [a, b] = counter2; 
// 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()并不能让它变成可关闭的

7.3 生成器

7.3.1

生成器：新加的一个极为灵活的结构，拥有在函数块内暂停和恢复代码执行的能力
形式：函数名称前面加一个星号（*）—— 箭头函数不能用来定义生成器函数

调用生成器函数会产生一个生成器函数，生成器对象一开始处于暂停执行的状态。
生成器对象也实现了 Iterator 接口，因此具有next方法。
调用next()方法会让生成器开始或恢复执行。
next() 返回 { done: ‘’, value: ‘’ }
函数体为空的生成器函数中间不会停留，调用一次 next()就会返回 done: true
value 属性是生成器函数的返回值，默认值为 undefined，可以通过生成器函数的返回值指定
生成器函数只会在初次调用 next()方法后开始执行

7.3.2 通过 yield 中断执行

yield：让生成器停止和开始执行

生成器函数在遇到 yield关键字之前会正常执行。遇到这个关键字后，执行会停止，函数作用域的状态会被保留，通过调用 next()方法来恢复执行。
yield 生成的值会出现在 next()方法返回的对象里
yield 关键字退出的生成器函数会处在 done: false
return 关键字退出的生成器函数会处于 done: true 状态
生成器函数内部的执行流程会针对每个生成器对象区分作用域。在一个生成器对象上调用 next()不会影响其他生成器
yield 关键字只能在生成器函数内部使用、yield 关键字必须直接位于生成器函数定义中

生成器对象作为可迭代对象

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

在需要自定义迭代对象时，这样使用生成器对象会特别有用。比如，我们需要定义一个可迭代对象，而它会产生一个迭代器，这个迭代器会执行指定的次数。

	function* nTimes(n) { 
		while(n--) { 
			yield; 
		}
	}
	for (let _ of nTimes(3)) { 
		console.log('foo'); 
	} 
	// foo 
	// foo 
	// foo

使用 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' }
	因为函数必须对整个表达式求值才能确定要返回的值，所以它在遇到 yield 关键字时暂停执行并计算出要产生的值："foo"。
	下一次调用 next()传入了"bar"，作为交给同一个 yield 的值。然后这个值被确定为本次生成器函数要返回的值。
	
	初始化一个新数组可以实现这个需求，但不用数组也可以实现同样的行为：
	function* nTimes(n) { 
	 for (let i = 0; i < n; ++i) { 
	 yield i; 
	 } 
	} 
	for (let x of nTimes(3)) { 
	 console.log(x); 
	} 
	// 0 
	// 1 
	// 2

产生可迭代对象
可以使用星号增强 yield 的行为，让它能够迭代一个可迭代对象，从而一次产出一个值

	// 等价的 generatorFn：
	// 	function* generatorFn() { 
	// 		for (const x of [1, 2, 3]) { 
	// 			yield x; 
	// 		} 
	// } 
	function* generatorFn() { 
		yield* [1, 2, 3]; 
	}

yield*的值是关联迭代器返回 done: true 时的 value 属性。对于普通迭代器来说，这个值是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

对于生成器函数产生的迭代器来说，这个值就是生成器函数返回的值

	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

使用 yield实现递归算法
yield最有用的地方是实现递归操作，此时生成器可以产生自身

	function* nTimes(n) {
		if (n > 0) {
			yield* nTimes(n - 1);
			yield n - 1;
		}
	}
	for (const x of nTimes(3)) {
		console.log(x);
	}
	// 0 
	// 1 
	// 2

7.3.3 生成器作为默认迭代器

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 循环调用了默认迭代器（它恰好又是一个生成器函数）并产生了一个生成器对象。这个生成器对象是可迭代的（生成器对象实现了 Iterable 接口），所以完全可以在迭代中使用。

7.3.4 提前终止生成器

return()和 throw()方法都可以用于强制生成器进入关闭状态。

return()
return()方法会强制生成器进入关闭状态。提供给 return()方法的值，就是终止迭代器对象的值：

function* generatorFn() { 
 	for (const x of [1, 2, 3]) { 
 		yield x; 
 	} 
} 
const g = generatorFn(); 
console.log(g); // generatorFn {<suspended>} 
console.log(g.return(4)); // { done: true, value: 4 } 
console.log(g); // generatorFn {<closed>}

与迭代器不同，所有生成器对象都有 return()方法，只要通过它进入关闭状态，就无法恢复了。后续调用 next()会显示 done: true 状态，
for-of 循环等内置语言结构会忽略状态为 done: true 的 IteratorObject 内部返回的值

function* generatorFn() { 
 	for (const x of [1, 2, 3]) { 
 		yield x; 
 	} 
} 
const g = generatorFn(); 
for (const x of g) { 
 	if (x > 1) { 
 		g.return(4); 
 	} 
 	console.log(x); 
} 
// 1 
// 2

throw()
throw()方法会在暂停的时候将一个提供的错误注入到生成器对象中。

如果错误未被处理，生成器就会关闭
如果生成器函数内部处理了这个错误，那么生成器就不会关闭，而且还可以恢复执行。错误处理会跳过对应的 yield

7.4 小结

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

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

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

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

迭代器和生成器