1. JavaScript 迭代器与生成器深度解析
在JavaScript的世界里，处理集合数据是日常开发中最常见的任务之一。传统的for循环虽然能用，但代码往往显得冗长且难以维护。迭代器(Iterator)和生成器(Generator)作为ES6引入的重要特性，为我们提供了更优雅的数据遍历方式。它们不仅让代码更简洁，还带来了异步编程的新思路。
我最初接触迭代器时，最直观的感受是它让集合操作变得像操作数组一样简单。而生成器则彻底改变了我对函数执行流程的理解——原来函数可以暂停执行，稍后再从中断处继续。这种能力在处理复杂数据流或异步操作时尤其有用。
2. 迭代器：数据遍历的统一接口
2.1 迭代器协议与可迭代协议
JavaScript中的迭代器基于两个核心协议：迭代器协议和可迭代协议。理解这两个协议的区别至关重要。
可迭代协议要求对象实现一个名为Symbol.iterator的方法，这个方法返回一个迭代器对象。而迭代器协议则定义了迭代器对象必须实现的方法：next()，它返回包含value和done两个属性的对象。
javascript复制// 自定义可迭代对象示例
const myIterable = {
[Symbol.iterator]() {
let step = 0;
return {
next() {
step++;
if (step <= 5) {
return { value: `Step ${step}`, done: false };
}
return { value: undefined, done: true };
}
};
}
};
for (const item of myIterable) {
console.log(item); // 输出 Step 1 到 Step 5
}
2.2 内置可迭代对象
JavaScript中许多内置对象默认就是可迭代的：
- Array
- String
- Map
- Set
- TypedArray
- 函数的arguments对象
- NodeList等DOM集合
这些对象都可以直接用于for...of循环，因为它们都实现了Symbol.iterator方法。
2.3 迭代器的实际应用场景
迭代器最常见的用途是数据遍历，但它还有更多实用场景：
-
解构赋值：当对数组或可迭代对象进行解构时，实际上就是在使用迭代器
javascript复制const [first, second] = new Set([1, 2, 3]); -
扩展运算符：扩展运算符
...内部也使用了迭代器javascript复制const arr = [...'hello']; // ['h', 'e', 'l', 'l', 'o'] -
Array.from()：将可迭代对象转换为数组
javascript复制const map = new Map([[1, 'one'], [2, 'two']]); const arr = Array.from(map); // [[1, 'one'], [2, 'two']] -
Promise.all()/Promise.race()：接受可迭代的Promise集合
注意：普通对象默认不是可迭代的，除非你手动实现
Symbol.iterator方法。这是新手常犯的错误之一。
3. 生成器：可暂停的函数
3.1 生成器基础语法
生成器函数通过在function关键字后添加星号*来定义，内部使用yield关键字来暂停执行并返回值。
javascript复制function* simpleGenerator() {
yield 'first';
yield 'second';
return 'finished';
}
const gen = simpleGenerator();
console.log(gen.next()); // { value: 'first', done: false }
console.log(gen.next()); // { value: 'second', done: false }
console.log(gen.next()); // { value: 'finished', done: true }
生成器函数调用时不会立即执行，而是返回一个生成器对象。这个对象同时遵循迭代器协议和可迭代协议，因此可以用for...of循环遍历。
3.2 生成器的双向通信
生成器的一个强大特性是可以通过next()方法向生成器内部传递值：
javascript复制function* twoWayGenerator() {
const name = yield 'What is your name?';
const age = yield `Hello ${name}, how old are you?`;
return `${name} is ${age} years old`;
}
const gen = twoWayGenerator();
console.log(gen.next().value); // What is your name?
console.log(gen.next('Alice').value); // Hello Alice, how old are you?
console.log(gen.next(30).value); // Alice is 30 years old
这种双向通信能力使得生成器非常适合用于控制异步流程。
3.3 生成器的错误处理
生成器还支持通过throw()方法将错误抛入生成器内部：
javascript复制function* errorHandlingGenerator() {
try {
yield 'Start';
yield 'Continue';
} catch (err) {
yield `Caught: ${err}`;
}
}
const gen = errorHandlingGenerator();
console.log(gen.next().value); // Start
console.log(gen.throw('Something went wrong!').value); // Caught: Something went wrong!
4. 迭代器与生成器的高级应用
4.1 实现无限序列
生成器非常适合表示无限序列，因为它们只在需要时才计算下一个值：
javascript复制function* fibonacci() {
let [prev, curr] = [0, 1];
while (true) {
yield curr;
[prev, curr] = [curr, prev + curr];
}
}
const fib = fibonacci();
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3
// 可以无限继续下去...
4.2 异步迭代器
ES2018引入了异步迭代器和for await...of循环，用于处理异步数据流：
javascript复制async function* asyncGenerator() {
const urls = ['url1', 'url2', 'url3'];
for (const url of urls) {
const response = await fetch(url);
yield response.json();
}
}
(async () => {
for await (const data of asyncGenerator()) {
console.log(data);
}
})();
4.3 实现状态机
生成器天然适合实现状态机模式：
javascript复制function* trafficLight() {
while (true) {
yield 'red';
yield 'yellow';
yield 'green';
yield 'yellow';
}
}
const light = trafficLight();
console.log(light.next().value); // red
console.log(light.next().value); // yellow
console.log(light.next().value); // green
// 循环继续...
5. 常见问题与解决方案
5.1 迭代器与生成器的区别
| 特性 | 迭代器 | 生成器 |
|---|---|---|
| 创建方式 | 手动实现next()方法 |
使用生成器函数 |
| 状态管理 | 需要自行管理 | 自动保存执行上下文 |
| 语法复杂度 | 较高 | 较低 |
| 适用场景 | 简单遍历需求 | 复杂控制流程 |
5.2 性能考量
虽然迭代器和生成器提供了更优雅的语法，但在性能敏感的场景中需要注意：
- 内存使用：生成器会保存执行上下文，可能占用更多内存
- 执行速度：简单循环通常比迭代器/生成器更快
- 垃圾回收：长时间运行的生成器可能延迟垃圾回收
5.3 常见错误
-
重复使用已耗尽的迭代器：
javascript复制const arr = [1, 2, 3]; const iterator = arr[Symbol.iterator](); console.log([...iterator]); // [1, 2, 3] console.log([...iterator]); // [] (已经耗尽) -
忘记处理
done状态：javascript复制function* gen() { yield 1; return 2; } for (const val of gen()) { console.log(val); // 只输出1，不会输出return的值 } -
在普通函数中使用
yield：javascript复制function normalFunc() { yield 'error'; // SyntaxError }
6. 实战技巧与最佳实践
6.1 组合生成器
可以通过yield*委托给另一个生成器，实现生成器的组合：
javascript复制function* generatorA() {
yield 'a1';
yield 'a2';
}
function* generatorB() {
yield* generatorA();
yield 'b1';
yield 'b2';
}
console.log([...generatorB()]); // ['a1', 'a2', 'b1', 'b2']
6.2 提前终止生成器
生成器对象有return()和throw()方法，可以提前终止执行：
javascript复制function* gen() {
try {
yield 1;
yield 2;
yield 3;
} finally {
console.log('Cleanup');
}
}
const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.return('early exit')); // Cleanup \n { value: 'early exit', done: true }
6.3 实现可取消的异步操作
生成器非常适合实现可取消的异步流程：
javascript复制function* cancellableAsync() {
const abortController = new AbortController();
try {
const response = yield fetch('some/url', {
signal: abortController.signal
});
const data = yield response.json();
return data;
} finally {
abortController.abort();
}
}
function runWithCancel(gen) {
const g = gen();
let cancel;
const promise = new Promise((resolve, reject) => {
function next(val) {
const result = g.next(val);
if (result.done) {
resolve(result.value);
return;
}
result.value.then(next).catch(err => g.throw(err));
}
next();
cancel = () => g.return();
});
return { promise, cancel };
}
const { promise, cancel } = runWithCancel(cancellableAsync);
// 需要取消时调用 cancel()
6.4 实现分页数据获取
生成器可以优雅地处理分页数据获取：
javascript复制async function* paginatedFetcher(url) {
let page = 1;
let hasMore = true;
while (hasMore) {
const response = await fetch(`${url}?page=${page}`);
const data = await response.json();
if (data.items.length === 0) {
hasMore = false;
} else {
yield data.items;
page++;
}
}
}
(async () => {
for await (const items of paginatedFetcher('api/data')) {
console.log('Got items:', items);
// 处理每一页数据
}
})();
在实际项目中，我发现迭代器和生成器特别适合处理以下几种场景：
- 复杂数据结构的自定义遍历
- 异步操作的顺序控制
- 大数据集的惰性求值
- 状态机的实现
- 可取消的操作流程
掌握这些特性可能需要一些时间，但一旦理解其核心概念，它们将成为你JavaScript工具箱中非常强大的工具。