迭代器是实现next()方法并返回{value,done}对象的统一遍历接口,生成器是通过function*定义、用yield暂停恢复的语法糖;二者均支持for...of等消费方式。

迭代器和生成器是 JavaScript 中处理数据序列的两种核心机制,它们让循环更灵活、更惰性、更易组合,尤其适合处理大量数据、异步流或自定义遍历逻辑。
迭代器(Iterator):统一的遍历接口
迭代器是一个对象,必须实现 next() 方法,该方法返回形如 { value, done } 的对象。它把“如何获取下一个值”的逻辑封装起来,让 for...of、Array.from、展开运算符(...)等语法能以统一方式遍历不同结构的数据。
例如,手动实现一个从 1 到 3 的迭代器:
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
这样写的好处是:你不用暴露内部状态变量,调用方只需关心“取下一个”,不需知道计数逻辑;而且可复用于任何支持迭代协议的地方。
立即学习“Java免费学习笔记(深入)”;
生成器(Generator):更简洁的迭代器工厂
生成器函数用 function* 声明,内部用 yield 暂停执行并产出值。每次调用 next(),函数从上次暂停处继续,直到下一个 yield 或结束。它自动返回一个符合迭代器协议的对象,无需手动写 next() 和状态管理。
上面的计数器用生成器重写,几行就搞定:
function* range() {
for (let i = 1; i <= 3; i++) {
yield i;
}
}
for (const n of range()) console.log(n); // 1, 2, 3
- 代码更短,逻辑更直观,没有手动维护 done 和 value 的样板
- 支持中途退出(return)、传参(next(value))、抛出错误(throw())
- 天然支持异步流程控制(配合 async function* 和 yield Promise)
它们如何简化循环?
不是让 for (let i = 0; i 消失,而是解决传统循环难以优雅处理的问题:
- 无限或动态数据源:比如实时日志流、斐波那契数列、用户输入事件——生成器可以 yield 一个值后暂停,等下次需要再计算下一个,不预先生成全部数据
- 多层嵌套结构扁平化:树、图、嵌套数组,用递归生成器轻松写出可被 for...of 消费的扁平迭代器
- 条件中断与组合:用 yield* 委托另一个生成器,或结合 break/return 提前退出,比嵌套 if + break 更清晰
- 与现代 API 无缝集成:fetch 流、ReadableStream、Map/Set 默认可迭代,统一用 for...of 处理,不用为每种类型写专用循环
小提醒:别滥用,按需选择
简单数组遍历仍推荐 for...of 或 forEach;只有当你需要延迟计算、自定义控制流、或封装复杂遍历逻辑时,才真正体现迭代器和生成器的价值。它们不是语法糖,而是提供了一种更可控、更可组合的数据消费模型。











