各位观众老爷们，晚上好！我是你们的老朋友，代码界的段子手，今天咱们就来聊聊JavaScript里那些让数据结构“活”起来的家伙——迭代器（Iterator）和生成器（Generator）函数。它们不仅仅是简单的遍历工具，更是控制JavaScript程序流程的利器。准备好，咱们这就开车了！
一、迭代器（Iterator）：数据结构的“导航员”
想象一下，你手里拿着一张藏宝图，但是地图上没有明确的路线，只有一些模糊的提示。迭代器就像是你的导航员，它知道如何一步一步地找到宝藏，也就是数据结构中的每一个元素。
1. 什么是迭代器？
迭代器是一个对象，它定义了一个序列，并在终止时返回一个值。更具体地说，迭代器是一个对象，它实现了 Iterator 协议，该协议要求实现一个 next() 方法。
next() 方法必须返回一个对象，该对象有两个属性：
value: 序列中的下一个值。done: 一个布尔值，表示迭代器是否已经到达序列的末尾。true表示已经完成，false表示还有更多值。
2. 手动创建一个迭代器
为了更好地理解，咱们先手动创建一个简单的迭代器，遍历一个数组：
const myArray = [1, 2, 3, 4, 5];
const myIterator = {
index: 0,
next: function() {
if (this.index < myArray.length) {
return { value: myArray[this.index++], done: false };
} else {
return { value: undefined, done: true };
}
}
};
console.log(myIterator.next()); // { value: 1, done: false }
console.log(myIterator.next()); // { value: 2, done: false }
console.log(myIterator.next()); // { value: 3, done: false }
console.log(myIterator.next()); // { value: 4, done: false }
console.log(myIterator.next()); // { value: 5, done: false }
console.log(myIterator.next()); // { value: undefined, done: true }这个例子中，myIterator 对象就是我们的迭代器。它内部维护了一个 index 变量来记录当前遍历的位置，next() 方法负责返回下一个元素和 done 状态。
3. 可迭代对象（Iterable）：拥有迭代器的“容器”
光有导航员还不够，你得有个能被导航的地方，也就是可迭代对象。可迭代对象是指实现了 Iterable 协议的对象。该协议要求对象实现一个 Symbol.iterator 方法。这个方法返回一个迭代器对象。
JavaScript 中一些内置类型，如 Array、String、Map、Set 等，已经是可迭代对象了。它们自带 Symbol.iterator 方法，可以直接使用 for...of 循环进行遍历。
4. 自定义可迭代对象
现在，咱们来创建一个自定义的可迭代对象，让我们的导航员有用武之地。
const myCollection = {
items: [ 'A', 'B', 'C', 'D' ],
*[Symbol.iterator]() { // 注意这里的星号 *，代表这是一个生成器函数
for (let item of this.items) {
yield item;
}
}
};
for (const item of myCollection) {
console.log(item); // A, B, C, D
}
//或者
const iterator = myCollection[Symbol.iterator]();
console.log(iterator.next()); // {value: 'A', done: false}
console.log(iterator.next()); // {value: 'B', done: false}
console.log(iterator.next()); // {value: 'C', done: false}
console.log(iterator.next()); // {value: 'D', done: false}
console.log(iterator.next()); // {value: undefined, done: true}这个例子中，myCollection 对象就是一个可迭代对象。它有一个 items 属性存储数据，并且实现了 Symbol.iterator 方法，该方法返回一个迭代器（这里使用了生成器函数，后面会详细讲解）。
二、生成器（Generator）函数：控制流程的“魔术师”
生成器函数是 JavaScript 中一种特殊的函数，它允许你在函数执行过程中暂停和恢复。这就像一个魔术师，可以随时让时间停止，做一些其他事情，然后让时间重新流动。
1. 什么是生成器函数？
生成器函数使用 function* 声明。与普通函数不同，生成器函数不会立即执行，而是返回一个生成器对象。
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}
const generator = myGenerator(); // 返回一个生成器对象
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }yield 关键字用于暂停生成器函数的执行，并将 yield 后面的值作为 next() 方法的 value 属性返回。当再次调用 next() 方法时，生成器函数会从上次暂停的地方继续执行。
2. 生成器函数的特性
- 可暂停和恢复： 使用
yield关键字暂停执行，使用next()方法恢复执行。 - 惰性求值： 只有在调用
next()方法时才会计算下一个值，这对于处理大型数据集非常有用。 - 状态保持： 生成器函数可以记住其内部状态，每次恢复执行时，可以访问之前的变量和数据。
3. 生成器函数与迭代器的关系
生成器函数本身就是一个迭代器工厂。也就是说，它可以生成迭代器对象。正如我们在上面自定义可迭代对象的例子中看到的，使用生成器函数可以方便地创建迭代器。
三、高级应用：让你的代码更优雅、更强大
现在，咱们来看看迭代器和生成器函数在实际开发中的一些高级应用。
1. 实现自定义数据结构的遍历
假设你有一个自定义的数据结构，比如一个树形结构。你可以使用迭代器和生成器函数来遍历这个树形结构，并按需返回节点的值。
class TreeNode {
constructor(value) {
this.value = value;
this.children = [];
}
addChild(node) {
this.children.push(node);
}
}
class Tree {
constructor(root) {
this.root = root;
}
*[Symbol.iterator]() {
const stack = [this.root];
while (stack.length > 0) {
const node = stack.pop();
yield node.value;
for (let i = node.children.length - 1; i >= 0; i--) { // 逆序入栈，保证遍历顺序
stack.push(node.children[i]);
}
}
}
}
// 创建树
const root = new TreeNode('A');
const nodeB = new TreeNode('B');
const nodeC = new TreeNode('C');
const nodeD = new TreeNode('D');
const nodeE = new TreeNode('E');
root.addChild(nodeB);
root.addChild(nodeC);
nodeB.addChild(nodeD);
nodeB.addChild(nodeE);
const tree = new Tree(root);
// 遍历树
for (const value of tree) {
console.log(value); // A, B, D, E, C (深度优先遍历)
}这个例子中，我们定义了一个 Tree 类，并实现了 Symbol.iterator 方法，该方法使用生成器函数进行深度优先遍历。
2. 异步迭代
在处理异步操作时，迭代器和生成器函数可以帮助你更优雅地管理异步流程。
async function* fetchUsers(userIds) {
for (const userId of userIds) {
const response = await fetch(`https://api.example.com/users/${userId}`);
const user = await response.json();
yield user;
}
}
async function main() {
const userIds = [1, 2, 3];
for await (const user of fetchUsers(userIds)) { // 注意这里是 for await...of
console.log(user);
}
}
main();这个例子中，fetchUsers 函数使用 async function* 声明，表示这是一个异步生成器函数。yield 关键字用于暂停执行，并等待异步操作完成。for await...of 循环用于异步地遍历生成器函数返回的值。
3. 无限序列
生成器函数可以用来创建无限序列，例如斐波那契数列。
function* fibonacci() {
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3
console.log(fib.next().value); // 5
// ... 无限延续这个例子中，fibonacci 函数是一个无限循环，每次调用 next() 方法都会返回下一个斐波那契数。
4. 状态机
生成器函数可以用来实现状态机，用于管理程序的状态转换。
function* stateMachine() {
let state = 'A';
while (true) {
switch (state) {
case 'A':
console.log('State A');
state = yield 'B'; // 等待外部输入，切换到状态 B
break;
case 'B':
console.log('State B');
state = yield 'C'; // 等待外部输入，切换到状态 C
break;
case 'C':
console.log('State C');
state = yield 'A'; // 等待外部输入，切换到状态 A
break;
default:
console.log('Invalid state');
state = 'A';
}
}
}
const sm = stateMachine();
sm.next(); // State A
sm.next('B'); // State B
sm.next('C'); // State C
sm.next('A'); // State A这个例子中，stateMachine 函数使用生成器函数来模拟一个简单的状态机。yield 关键字用于暂停执行，并等待外部输入来切换状态。
四、迭代器和生成器函数的比较
为了更好地理解它们之间的区别和联系，咱们用一张表格来总结一下：
| 特性 | 迭代器 (Iterator) | 生成器函数 (Generator Function) |
|---|---|---|
| 定义 | 一个对象，实现了 Iterator 协议，必须包含 next() 方法。 |
一种特殊的函数，使用 function* 声明，返回一个生成器对象。 |
| 功能 | 用于遍历数据结构，按顺序访问元素。 | 用于创建迭代器，控制流程，实现惰性求值、状态机等。 |
| 创建方式 | 手动创建对象，实现 next() 方法。 |
使用 function* 声明，内部使用 yield 关键字。 |
| 状态管理 | 需要手动维护内部状态，例如 index 变量。 |
自动维护内部状态，可以记住之前的变量和数据。 |
| 与可迭代对象的关系 | 可迭代对象通过 Symbol.iterator 方法返回一个迭代器。 |
生成器函数可以作为可迭代对象的 Symbol.iterator 方法，方便地创建迭代器。 |
| 应用场景 | 遍历数组、链表、树等数据结构。 | 实现自定义迭代器、异步迭代、无限序列、状态机等。 |
五、总结
迭代器和生成器函数是 JavaScript 中强大的工具，它们可以帮助你更有效地管理数据结构和控制程序流程。掌握它们，你就可以写出更优雅、更强大的代码。
记住，迭代器是数据结构的“导航员”，而生成器函数是控制流程的“魔术师”。它们可以单独使用，也可以结合使用，发挥更大的威力。
好了，今天的讲座就到这里。希望大家有所收获！下次再见！