JavaScript迭代器与生成器详解

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript迭代器与生成器函数全解析》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

迭代器是遵循迭代器协议的对象，必须实现next()方法，返回包含value和done属性的对象，用于按需生成值并控制遍历过程。

JavaScript中的迭代器和生成器是处理数据序列的重要工具，尤其在处理大量或无限数据时非常高效。它们让开发者可以自定义遍历逻辑，并按需生成值，避免一次性加载全部数据。

什么是迭代器（Iterator）

迭代器是一个对象，遵循迭代器协议，即该对象必须实现 next() 方法。调用 next() 会返回一个包含两个属性的对象：

• value：当前步骤的值
• done：布尔值，表示是否已遍历完成

例如，手动创建一个简单的计数器迭代器：

const counter = {
  current: 0,
  max: 3,
  next() {
    if (this.current for (const num of counter) {
console.log(num); // 输出 1, 2, 3
}

注意我们添加了 方法，使对象可被 for...of 循环使用。

什么是生成器函数（Generator Function）

生成器函数是 ES6 引入的一种特殊函数，能暂停执行并恢复。它通过 function* 定义，调用后返回一个生成器对象（既是迭代器也是可迭代对象）。

使用 yield 关键字可中断函数执行，并向外返回值。

function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++;
  }
}
<p>const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3</p>

每次调用 next()，函数从上次 yield 处继续运行，非常适合实现无限序列或惰性求值。

生成器的高级用法

生成器不仅能产出值，还能接收传入的值或抛出异常，实现双向通信。

• 向生成器传值：通过 next(value) 将数据送回生成器
• 抛出异常：使用 throw() 在生成器中触发错误
• 提前结束：调用 return() 终止生成器并设置返回值

示例：双向通信的生成器

function* echo() {
  const result = yield "hello";
  yield `you said: ${result}`;
}
<p>const g = echo();
console.log(g.next().value);        // "hello"
console.log(g.next("world").value); // "you said: world"</p>

实际应用场景

生成器和迭代器在以下场景中特别有用：

• 惰性计算：如处理大文件或大数据流，逐条读取而非全量加载
• 状态机：用生成器管理复杂的状态流转
• 异步流程控制：结合 Promise 使用（虽然后来被 async/await 取代）
• 自定义数据结构遍历：为树、图等结构实现灵活的遍历方式

比如实现一个二叉树的中序遍历迭代器：

function* inorder(node) {
  if (node) {
    yield* inorder(node.left);
    yield node.value;
    yield* inorder(node.right);
  }
}

基本上就这些。迭代器和生成器提供了强大的控制流机制，理解它们有助于写出更高效、更清晰的代码。虽然日常开发中直接写生成器不多，但在库设计或复杂逻辑中非常有价值。

今天关于《JavaScript迭代器与生成器详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于迭代器的内容请关注golang学习网公众号！