17370845950

迭代器是实现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

这样写的好处是：你不用暴露内部状态变量，调用方只需关心“取下一个”，不需知道计数逻辑；而且可复用于任何支持迭代协议的地方。

生成器（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；只有当你需要延迟计算、自定义控制流、或封装复杂遍历逻辑时，才真正体现迭代器和生成器的价值。它们不是语法糖，而是提供了一种更可控、更可组合的数据消费模型。