手动实现迭代器需返回含next()方法的对象,正确处理{value, done}结构及done: true终止信号,且对象须有[Symbol.iterator]()方法。

JavaScript 生成器(function*)和迭代器(next() 返回 {value, done} 的对象)不是“语法糖教程”,而是解决真实问题的控制流工具:它们让你按需取值、暂停执行、封装状态,而不是一次性算完所有数据。
怎么快速写出一个可用的迭代器?
手动实现迭代器的关键是返回一个带 next() 方法的对象,并正确处理 done: true 终止信号。漏掉它,for...of 就会无限循环或卡死。
- 必须返回
{ value, done }结构,不能只返回value -
done: true时,value可为undefined(推荐显式写出来) - 想被
for...of消费,对象还得有[Symbol.iterator]()方法
const counter = {
[Symbol.iterator]() {
let i = 1;
return {
next() {
if (i <= 3) return { value: i++, done: false };
return { value: undefined, done: true }; // ← 必须有这一行
}
};
}
};
for (const n of counter) console.log(n); // 1, 2, 3为什么用 function* 而不是手写迭代器?
生成器函数自动满足迭代器协议 + 可迭代协议,省去闭包状态管理、next() 模板代码,且天然支持 yield* 委托、return() 提前退出、throw() 注入错误。
- 调用
function*()不执行函数体,只返回一个生成器对象 - 第一次
next()才开始运行,遇到yield暂停,把右侧值当value返回 - 后续
next()从暂停处继续,直到下一个yield或函数结束 - 函数内状态(如变量、作用域)全程保留,不用手动闭包
function* range(start, end) {
for (let i = start; i < end; i++) {
yield i;
}
}
const iter = range(10, 13);
iter.next(); // { value: 10, done: false }
iter.next(); // { value: 11, done: false }
iter.next(); // { value: 12, done: false }
iter.next(); // { value: undefined, done: true }
async function* 和 for await...of 怎么配对用?
普通生成器不支持 await,强行在 function* 里写 await 会直接报 SyntaxError。要处理异步流,必须用 async function*,它返回的是 AsyncIterator,其 next() 方法返回 Promise,只能用 for await...of 消费——混用 for...of 会拿到 pending Promise,不是解包后的值。
立即学习“Java免费学习笔记(深入)”;
- Node.js 需 ≥ v10.0.0,Chrome ≥ 63,Firefox ≥ 57
-
yield后可接 Promise,但不要return await promise(会破坏流式行为) -
for await...of内部自动await next().value,前提是对象实现了[Symbol.asyncIterator]
async function* fetchLines(url) {
const res = await fetch(url);
const reader = res.body.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
yield new TextDecoder().decode(value);
}
}
// ✅ 正确用法
for await (const line of fetchLines('/log.txt')) {
console.log(line);
}
// ❌ 错误:会打印 Promise 对象
// for (const line of fetchLines('/log.txt')) { ... }
最常被忽略的一点:生成器一旦 done: true,后续所有 next() 调用都返回 { value: undefined, done: true },不可重用;若需多次遍历,得重新调用生成器函数获取新实例。










