js 深入理解迭代器

伯恩bourne

于 2024-08-29 11:08:48 发布

阅读量904

点赞数 7

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weiweiliude2/article/details/141184893

版权

问题

学习本章可以搞懂以下几个问题：

迭代器到底是什么？
js 有了循环的概念，为什么还要引进迭代器？
迭代器的底层原理是什么？
如何创建和使用自定义迭代器？

迭代的英文“iteration”源自拉丁文 itero，意思是“重复”或“再来”。在软件开发领域，“迭代”的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件。ECMAScript 6 规范新增了两个高级特性：迭代器和生成器。使用这两个特性，能够更清晰、高效、方便地实现迭代，本章先介绍迭代器，学扎实了，再去学 生成器 。在学本章前，最好先理解 Symbol 符号的概念。

1. 理解迭代

在 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 以后也支持了迭代器模式。

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 迭代器接口 (iterator interface)

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

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

检查是否存在默认迭代器属性我们就可以看到这个工厂函数：

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]); // ƒ [Symbol.iterator]() { [native code] }
console.log(arr[Symbol.iterator]); // f values() { [native code] }  ，调用values() ,就是就是返回一个迭代器
console.log(map[Symbol.iterator]); // ƒ entries() { [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 {}   ，  返回了一个 StringIterator（string 迭代器）
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 循环  , of 关键字后面 为可迭代对象，关键字前面为可迭代对象中next返回iteratorResult对象的value属性值，如下面for - of 循环中， arr 为可迭代对象， el 为 arr的next 返回的 {done=false,value=el}中的el
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

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(iter2.next()); // { done: true, value: undefined  }
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 自定义迭代器

与 Iterable 接口类似，任何实现 Iterator 接口的对象都可以作为迭代器使用。下面这个例子中的 Counter 类只能被迭代一定的次数：

class Counter {
// Counter 的实例应该迭代 limit 次
	constructor(limit) {
		this.count = 1;
		this.limit = limit;
	}
	next() {
		if (this.count <= this.limit) {
			return { done: false, value: this.count++ };
		} else {
			return { done: true, value: undefined };
		}
	}
	[Symbol.iterator]() {
		return this;
	}
}
let counter = new Counter(3);
for (let i of counter) {    //for-of 结构，每一次循环(迭代），js 后台都执行一次 next()方法，然后再执行 {...} 中的代码
	console.log(i);
}
// 1
// 2
// 3

这个类实现了 Iterator 接口，但不理想。这是因为它的每个实例只能被迭代一次：

for (let i of counter) { console.log(i); }
// 1
// 2
// 3
for (let i of counter) { console.log(i); }
// (nothing logged)

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

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 每循环（迭代）一次，都会调用一次 counter.next() ，
//然后将{done:false, value:num} 对象中的value 值 赋值给 i ,最后再去执行 花括号中的代码行。
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

因为每个迭代器也实现了 Iterable 接口，所以它们可以用在任何期待可迭代对象的地方，比如for-of 循环：

let arr = [3, 1, 4];
let iter = arr[Symbol.iterator]();
for (let item of arr ) { console.log(item); }
// 3
// 1
// 4
for (let item of iter ) { console.log(item); }
// 3
// 1
// 4

2.4 提前终止迭代器

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

for-of 循环通过 break 、 continue 、 return 或 throw 提前退出（程序运行时，遇到这几个关键字，会调用迭代器中定义的 return() 方法，实现终止迭代器）；
解构操作并未消费所有值。
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;	 //当大于 2 时 ，遇到break, 会调用 return()方法，
	}
	console.log(i);
}
// 1
// 2
// Exiting early

for (let i of counter1) {  //再迭代一次
	console.log(i);
} 
// 1
// 2
// 3
// 4
// 5 
// 上面的输出结果看出，迭代器从1重新开始迭代，而不是从 上一次循环中的 3 开始


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
//  Exiting early
for (let i of iter) {
	console.log(i);
}
// 4
// 5