JavaScript 的迭代器与生成器是如何协同工作以处理数据流的？

<p>JavaScript的迭代器与生成器通过惰性求值实现高效数据流处理。迭代器遵循协议提供next()方法，返回value和done属性；生成器函数用function定义，内部使用yield暂停执行，返回可迭代的生成器对象。例如numberStream()生成无限数字序列，每次调用next()才计算下一个值，避免内存浪费。在真实场景如分页请求中，async function fetchPages()按需加载数据，结合for await...of逐步消费，无需一次性获取全部内容。生成器简化了迭代器创建，使异步或分段逻辑以同步方式表达，两者协作实现对大文件、API流等场景的优雅处理。</p>

JavaScript 的迭代器与生成器通过一种简洁高效的方式协同处理数据流，尤其适合管理大量或动态生成的数据。它们的核心优势在于实现“惰性求值”——即按需计算，而不是一次性生成所有值。

迭代器（Iterator）的基本作用

迭代器是一个对象，遵循迭代器协议，具备一个 next() 方法，返回包含 value 和 done 属性的结果对象。它允许你一步步访问序列中的元素。

例如，数组调用 [Symbol.iterator]() 会返回一个迭代器，用于 for...of 循环中逐个取值。

生成器（Generator）是迭代器的工厂

生成器函数用 function* 定义，调用后返回一个生成器对象——这个对象既是可迭代对象，也是迭代器。它内部使用 yield 暂停执行，并在每次调用 next() 时恢复。

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

这意味着你可以用同步语法编写异步或分段的数据生产逻辑，而外部可以像操作普通迭代器一样消费数据。

看一个简单例子：

BRANDMARK

AI帮你设计Logo、图标、名片、模板……等

180

查看详情

function* numberStream() {
  let i = 0;
  while (true) {
    yield i++;
  }
}
<p>const gen = numberStream();
gen.next(); // { value: 0, done: false }
gen.next(); // { value: 1, done: false }</p>

这个生成器创建了一个无限递增的数字流。由于是惰性执行，不会耗尽内存，只有在调用 next() 时才计算下一个值。

协同处理真实数据流场景

当需要处理大文件、API 分页数据或事件流时，生成器可以封装获取逻辑，迭代器则控制消费节奏。

比如从分页接口拉取数据：

async function* fetchPages(url) {
  let page = 1;
  while (true) {
    const res = await fetch(`${url}?page=${page}`);
    const data = await res.json();
    if (data.items.length === 0) break;
    for (const item of data.items) {
      yield item;
    }
    page++;
  }
}

这里生成器负责按需加载下一页，外部可以用 for await...of 逐步消费每条记录，而不需要一次性加载全部数据。

基本上就这些。生成器简化了迭代器的创建过程，让开发者能以自然的方式描述数据流；迭代器则提供统一的消费接口。两者结合，使 JavaScript 能优雅地处理各种流式数据场景。

以上就是JavaScript 的迭代器与生成器是如何协同工作以处理数据流的？的详细内容，更多请关注php中文网其它相关文章！