JavaScript中的迭代器与生成器详解

迭代器是遵循迭代器协议的对象，具有next方法返回value和done属性，用于遍历集合；生成器函数通过yield暂停执行，自动实现迭代器接口，简化异步编程与数据流处理。

JavaScript中的迭代器和生成器是处理数据序列的重要工具，尤其在面对大量或动态生成的数据时，它们提供了更灵活、高效的遍历方式。理解它们的工作机制有助于写出更优雅、可维护的代码。

什么是迭代器（Iterator）

迭代器是一种设计模式，它允许你访问一个集合中的元素而无需暴露其底层结构。在JavaScript中，迭代器是一个对象，遵循迭代器协议：该对象必须有一个next()方法，返回一个包含value和done属性的对象。

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

const createArrayIterator = (arr) => {
  let index = 0;
  return {
    next: () => {
      if (index         return { value: arr[index++], done: false };
      } else {
        return { value: undefined, done: true };
      }
    }
  };
};

const iter = createArrayIterator([1, 2, 3]);
iter.next(); // { value: 1, done: false }
iter.next(); // { value: 2, done: false }
iter.next(); // { value: 3, done: false }
iter.next(); // { value: undefined, done: true }

ES6引入了Symbol.iterator，只要一个对象实现了这个方法，就可以被for...of循环遍历。常见的内置可迭代对象包括数组、字符串、Map、Set等。

立即学习“Java免费学习笔记（深入）”；

什么是生成器（Generator）

生成器是ES6引入的一种特殊函数，能够暂停执行并恢复，返回一个符合迭代器协议的对象。生成器函数使用function*定义，并通过yield关键字暂停函数运行。

基本语法如下：

uBrand Logo生成器

uBrand Logo生成器是一款强大的AI智能LOGO设计工具。

57

查看详情

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = myGenerator();
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { value: 3, done: false }
gen.next(); // { value: undefined, done: true }

每次调用next()，函数会从上次暂停的地方继续执行，直到遇到下一个yield或函数结束。这使得生成器非常适合实现惰性求值、无限序列等场景。

生成器作为可迭代对象

生成器函数返回的对象本身就是迭代器，同时也实现了[Symbol.iterator]()，因此可以直接用于for...of循环：

function* countUp(max) {
  for (let i = 1; i     yield i;
  }
}

for (const num of countUp(5)) {
  console.log(num); // 输出 1 到 5
}

这种特性让生成器成为自定义可迭代对象最简便的方式。相比手动实现next()方法，生成器语法更加简洁直观。

实际应用场景

生成器特别适合处理以下情况：

• 无限数据流：比如生成斐波那契数列、随机数序列，不需要一次性计算所有值
• 异步流程控制：结合yield与Promise，可用于简化异步逻辑（虽然现在更多使用async/await）
• 状态机：利用yield保存函数执行状态，实现轻量级状态管理
• 大数据分批处理：避免一次性加载全部数据，提升性能

例如，实现一个无限递增的计数器：

function* idMaker() {
  let id = 0;
  while (true) {
    yield id++;
  }
}

const gen = idMaker();
gen.next().value; // 0
gen.next().value; // 1
gen.next().value; // 2

基本上就这些。迭代器和生成器看似复杂，但核心思想简单：按需提供数据，控制执行流程。掌握它们能让你更好地应对复杂的数据处理需求。

以上就是JavaScript中的迭代器与生成器详解的详细内容，更多请关注php中文网其它相关文章！