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

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

狼影

发布： 2025-11-25 17:17:02

原创

299人浏览过

迭代器、生成器和异步迭代器是JavaScript处理数据序列的核心机制。迭代器通过next()方法返回{value, done}对象，实现对集合的有序访问；生成器函数（function*）利用yield暂停执行，自动返回迭代器，简化异步逻辑；异步迭代器结合for-await-of语法，支持异步逐个获取数据，适用于流式或延迟加载场景。三者提升代码可读性与性能，尤其在处理大量或异步数据时优势明显。

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

JavaScript 中的迭代器、生成器和异步迭代器是处理数据序列的强大工具，尤其在处理大量数据或异步数据流时表现突出。它们让开发者可以更优雅地控制数据的获取过程，提升代码可读性和性能。

迭代器（Iterator）基础

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

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

function createArrayIterator(arr) {
  let index = 0;
  return {
    next: function() {
      if (index < arr.length) {
        return { value: arr[index++], done: false };
      } else {
        return { done: true };
      }
    }
  };
}
<p>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(); // { done: true }</p>

登录后复制

ES6 提供了更简洁的方式：只要对象有 Symbol.iterator 方法，就可以被 for...of 遍历。

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

生成器（Generator）简化迭代器创建

生成器函数用 function* 定义，调用后返回一个生成器对象，它既是迭代器也是可迭代对象。使用 yield 可以暂停执行并返回值。

用生成器重写上面的例子：

function* generateNumbers(arr) {
  for (let item of arr) {
    yield item;
  }
}
<p>const gen = generateNumbers([1, 2, 3]);
gen.next(); // { value: 1, done: false }</p>

登录后复制

生成器的优势在于函数体内的状态自动保存，逻辑清晰，支持复杂的控制流，比如递归生成或条件中断。

常见用途包括无限序列、惰性求值等：

爱图表

AI驱动的智能化图表创作平台

305

查看详情

function* infiniteCounter() {
  let i = 0;
  while (true) yield i++;
}
<p>const counter = infiniteCounter();
counter.next().value; // 0
counter.next().value; // 1</p>

登录后复制

异步迭代器与 for await...of

当数据来源是异步的（如网络请求、文件流），标准迭代器无法处理 Promise。这时需要异步迭代器。

异步迭代器的 next() 返回 Promise<{value, done}>，并且对象需实现 [Symbol.asyncIterator] 方法。

手动实现一个异步迭代器示例：

const asyncIterable = {
  [Symbol.asyncIterator]() {
    const items = ['a', 'b', 'c'];
    let i = 0;
    return {
      next: () => {
        if (i < items.length) {
          return Promise.resolve({ value: items[i++], done: false });
        } else {
          return Promise.resolve({ done: true });
        }
      }
    };
  }
};
<p>// 使用 for await...of
(async function() {
for await (const val of asyncIterable) {
console.log(val); // 'a', 'b', 'c'
}
})();</p>

登录后复制

异步生成器函数

结合生成器和异步操作，ES2018 引入了 async function*，即异步生成器。它返回异步生成器对象，可用于 for await...of。

适用于逐个发出异步请求的场景：

async function* fetchUrls(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    yield data;
  }
}
<p>// 使用
(async function() {
const urls = ['/api/user', '/api/posts'];
for await (const data of fetchUrls(urls)) {
console.log(data);
}
})();</p>

登录后复制

异步生成器让流式处理远程数据变得简单，且支持背压（通过消费者控制消费速度）。

基本上就这些。理解迭代器机制有助于写出更高效、可复用的数据处理逻辑，特别是在处理大数据集或流式响应时。生成器和异步生成器极大简化了这类代码的编写。不复杂但容易忽略。

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