JavaScript迭代器_生成器函数应用-js教程-PHP中文网

JavaScript迭代器_生成器函数应用

紅蓮之龍

发布： 2025-11-20 20:16:02

原创

414人浏览过

JavaScript中的迭代器通过next()方法返回value和done属性实现惰性求值，生成器函数以function*定义并使用yield暂停执行，二者结合可高效处理大量数据。

javascript迭代器_生成器函数应用

JavaScript 中的迭代器和生成器函数是处理数据序列的强大工具，尤其在面对大量或动态生成的数据时，能有效提升性能并简化代码逻辑。它们的核心优势在于实现“惰性求值”——只有在需要时才计算下一个值，而不是一次性生成所有结果。

理解迭代器（Iterator）

迭代器是一个对象，遵循迭代器协议：拥有一个 next() 方法，返回包含 value 和 done 两个属性的对象。

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

function createCounter(max) {
  let count = 0;
  return {
    next() {
      if (count < max) {
        return { value: count++, done: false };
      } else {
        return { done: true };
      }
    }
  };
}
<p>const counter = createCounter(3);
counter.next(); // { value: 0, done: false }
counter.next(); // { value: 1, done: false }
counter.next(); // { value: 2, done: false }
counter.next(); // { done: true }</p>

登录后复制

虽然可以手动实现，但使用生成器函数更简洁、不易出错。

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

生成器函数（Generator Function）简介

生成器函数用 function* 定义，调用后返回一个生成器对象，该对象既是可迭代对象，也是迭代器。

千博企业网站系统全功能个人版SQL2011 Build 0903

2010.09.03更新优化前台内核处理代码；优化后台内核、静态生成相关代码，生成速度全面提升；修改前台静态模板中所有已知错误；修正后台相关模块所有已知错误；更换后台编辑器，功能更强大；增加系统说明书。免费下载、免费使用、完全无限制。完全免费拥有：应广大用户要求，千博网络全面超值发布企业网站系统个人版程序包：内含Flash动画源码、Access数据库程序包、SQL数据库程序包。全站模块化操作，静态

查看详情

它通过 yield 暂停执行，并在下次调用 next() 时恢复。这使得我们可以写出看起来像同步的代码，却能控制执行节奏。

用生成器重写上面的计数器：

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

登录后复制

还可以在 for...of 循环中直接使用：

for (const num of counterGenerator(3)) {
  console.log(num); // 依次输出 0, 1, 2
}

登录后复制

实际应用场景举例

生成器特别适合以下场景：

无限序列：比如斐波那契数列，传统数组无法存储无限数据，但生成器可以按需生成。

function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}
<p>const fib = fibonacci();
fib.next().value; // 0
fib.next().value; // 1
fib.next().value; // 1
fib.next().value; // 2</p>

登录后复制

分页数据处理：模拟从 API 分批获取数据，每调用一次 next() 获取一页。

function* fetchPages(pageSize) {
  let page = 1;
  while (true) {
    const data = await fetch(`/api/items?page=${page}&limit=${pageSize}`);
    const json = await data.json();
    if (json.items.length === 0) break;
    yield json.items;
    page++;
  }
}
// 注意：生成器内不能用 async*，需封装处理

登录后复制