JavaScript迭代器与生成器详解

深入理解JavaScript迭代器与生成器，提升代码效率！本文将深度解析JavaScript中用于处理数据序列的核心机制——迭代器与生成器。掌握“可迭代协议”和“迭代器协议”的区别至关重要，可迭代协议通过`Symbol.iterator`让对象支持`for...of`遍历，返回迭代器对象；而迭代器协议则由`next()`方法实现数据的逐步访问。生成器函数以`*`声明，并通过`yield`关键字简化迭代逻辑，自动实现迭代器协议，使代码更简洁易懂。本文还将通过实例展示如何利用生成器创建无限序列、处理分页数据流以及实现异步迭代，助你写出更高效、更具可读性的JavaScript代码。

可迭代协议通过Symbol.iterator使对象支持for...of遍历，返回迭代器对象；迭代器协议由next()方法实现，生成器函数以*声明并用yield简化迭代逻辑，自动实现迭代器协议。

JavaScript中的迭代器和生成器是处理数据序列的核心机制，理解它们的工作原理有助于写出更高效、更具可读性的代码。关键在于掌握“可迭代协议”和“迭代器协议”的区别与联系，以及生成器如何简化迭代逻辑。

可迭代协议：让对象能被 for...of 遍历

一个对象如果实现了Symbol.iterator方法，它就是“可迭代的”。这个方法必须返回一个迭代器对象，从而支持for...of循环、展开运算符（...）、Array.from()等语法。

常见内置可迭代对象包括：数组、字符串、Map、Set、arguments 对象等。你也可以为自定义对象实现可迭代性。

例如，让一个对象支持遍历其属性值：

const myObj = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.iterator]() {
    const values = Object.values(this);
    let index = 0;
    return {
      next() {
        if (index for (const val of myObj) {
console.log(val); // 输出 1, 2, 3
}

迭代器协议：定义如何逐步访问数据

迭代器是一个具有next()方法的对象，每次调用返回一个形如{ value, done }的结果。done 为 true 表示遍历结束。

迭代器本身不需要一次性拥有所有数据，适合处理无限序列或懒加载场景。

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

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

生成器函数：优雅创建迭代器

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

通过yield关键字暂停执行并返回值，下次调用next()时从暂停处继续。

重写上面的计数器：

function* counterGenerator(max) {
  let count = 0;
  while (count const gen = counterGenerator(3);
for (const val of gen) {
console.log(val); // 输出 0, 1, 2
}

生成器的优势在于代码简洁，状态自动维护，且天然支持惰性求值。

实际应用场景举例

利用生成器可以轻松实现一些实用功能：

• 无限序列：如斐波那契数列，只在需要时计算下一个值
• 分页数据流：逐页拉取 API 数据，对外表现为单一可迭代接口
• 异步迭代：结合 async/await 使用 async generator 处理异步任务队列

例如，生成斐波那契数列前 n 项：

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}
<p>for (const num of fibonacci()) {
if (num > 100) break;
console.log(num);
}</p>

基本上就这些。掌握可迭代协议和生成器，能让代码更贴近数据流动的本质，写出既直观又高效的迭代逻辑。

好了，本文到此结束，带大家了解了《JavaScript迭代器与生成器详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！