JavaScript迭代器_生成器函数与异步迭代实现-js教程-PHP中文网

JavaScript迭代器_生成器函数与异步迭代实现

幻影之瞳

发布： 2025-11-18 21:23:02

原创

922人浏览过

迭代器与生成器提供处理数据序列的灵活机制，尤其适用于异步编程；2. 可迭代对象需实现Symbol.iterator方法，返回具备next()的迭代器；3. 常见如数组、字符串等支持for...of遍历；4. 通过生成器函数可轻松创建迭代器，结合异步迭代可优雅管理资源与流式数据。

javascript迭代器_生成器函数与异步迭代实现

JavaScript中的迭代器和生成器为处理数据序列提供了强大而灵活的机制，尤其在异步编程场景中表现突出。通过生成器函数与异步迭代的结合，开发者可以更优雅地管理资源、处理流式数据或实现复杂的控制流程。

迭代器与可迭代对象基础

在JavaScript中，一个对象如果实现了Symbol.iterator方法，就是可迭代的。调用该方法会返回一个迭代器对象，具备next()方法，用于逐步获取值。

常见可迭代对象包括数组、字符串、Map、Set等。它们能被for...of循环遍历，正是因为内部实现了迭代协议。

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

const counter = {
  from: 1,
  to: 5,
  [Symbol.iterator]() {
    let current = this.from;
    const end = this.to;
    return {
      next() {
        if (current <= end) {
          return { done: false, value: current++ };
        } else {
          return { done: true };
        }
      }
    };
  }
};
<p>for (const num of counter) {
console.log(num); // 输出 1 到 5
}

登录后复制

生成器函数：简化迭代器创建

生成器函数以function*声明，调用后返回一个生成器对象（既是迭代器也是可迭代对象）。使用yield关键字暂停执行并返回值，下次调用next()继续。

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

它极大简化了自定义迭代逻辑的编写，无需手动实现next()方法。

创客贴设计

创客贴设计，一款智能在线设计工具，设计不求人，AI助你零基础完成专业设计！

150

查看详情

示例：用生成器实现斐波那契数列

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

登录后复制

异步迭代与`async/await`支持

当需要处理异步数据源（如分页API、文件流）时，标准同步迭代不再适用。JavaScript引入了异步迭代协议：使用Symbol.asyncIterator，配合for await...of循环。

async 生成器函数（async function*）是关键工具，其yield可暂停异步操作，自动返回Promise。

示例：模拟从API逐页拉取用户数据

async function* fetchUsers() {
  let page = 1;
  while (true) {
    const response = await fetch(`/api/users?page=${page}`);
    const users = await response.json();
<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">if (users.length === 0) break;

yield* users; // 逐个产出用户
page++;

登录后复制

} }

// 使用异步迭代 (async () => { for await (const user of fetchUsers()) { console.log(user.name); } })();