如何实现JavaScript中的迭代器协议？-js教程-PHP中文网

答案是实现迭代器协议需定义[Symbol.iterator]方法并返回含next()的迭代器对象，如createRange示例所示，使自定义对象可被for...of等消费。

如何实现javascript中的迭代器协议？

在JavaScript中实现迭代器协议，核心在于创建一个对象，该对象拥有一个名为

[Symbol.iterator]

登录后复制

的方法。这个方法必须返回一个迭代器（Iterator）对象，而迭代器对象则需要一个

next()

登录后复制

方法，每次调用

next()

登录后复制

都会返回一个包含

value

登录后复制

和

done

登录后复制

属性的对象。

value

登录后复制

是当前迭代的值，

done

登录后复制

是一个布尔值，表示迭代是否结束。

解决方案

要让一个自定义对象变得可迭代，使其能被

for...of

登录后复制

循环、展开运算符 (

...

登录后复制

) 或

Array.from()

登录后复制

等消费，你需要为它定义

[Symbol.iterator]

登录后复制

方法。

考虑一个简单的例子，我们想创建一个可迭代的范围（Range）对象，比如从

start

登录后复制

到

end

登录后复制

的数字序列：

function createRange(start, end) {
  let current = start;
  return {
    [Symbol.iterator]() {
      // 这里的this指向createRange返回的对象，所以需要一个闭包来捕获current
      // 或者更直接地，让[Symbol.iterator]返回一个新的迭代器实例，
      // 这样每次for...of循环都能从头开始。
      // 这里我们直接返回一个迭代器对象
      return {
        next() {
          if (current <= end) {
            return { value: current++, done: false };
          } else {
            return { value: undefined, done: true };
          }
        }
      };
    }
  };
}

// 使用这个可迭代对象
const myRange = createRange(1, 5);

for (const num of myRange) {
  console.log(num); // 输出 1, 2, 3, 4, 5
}

console.log([...myRange]); // 输出 [1, 2, 3, 4, 5]

登录后复制

在这个例子中，

createRange

登录后复制

函数返回的对象就是可迭代对象。它的

[Symbol.iterator]

登录后复制

方法返回了一个新的迭代器对象，这个迭代器对象包含了

next()

登录后复制

方法，负责维护迭代的状态 (

current

登录后复制

) 并按需返回结果。每次

for...of

登录后复制

循环启动时，都会调用

[Symbol.iterator]

登录后复制

获取一个新的迭代器，确保迭代的独立性。

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

在我看来，这种模式的精妙之处在于它将“如何获取下一个值”的逻辑与“数据存储”解耦。你不需要一次性将所有数据加载到内存中，这对于处理大量数据流或无限序列时尤其有用。

为什么自定义迭代器在JavaScript中如此重要？

我们日常开发中，数组是最常见的可迭代对象。但实际场景远不止如此。有时，我们需要处理的数据结构并非数组，或者数据量巨大无法一次性加载，甚至数据是动态生成的。这时候，自定义迭代器就显得尤为关键了。

设想一个场景，你正在处理一个大型日志文件，你不想一次性读取整个文件到内存中，因为那可能会导致性能问题甚至内存溢出。通过实现一个自定义的迭代器，你可以按需（一行一行）读取日志内容，每次

next()

登录后复制

调用只返回一行，直到文件末尾。这是一种典型的惰性求值（lazy evaluation）策略，极大地优化了资源使用。

此外，自定义迭代器也让我们的代码更加通用和模块化。任何遵循迭代器协议的对象，都可以无缝地与

for...of

登录后复制

循环、展开运算符、

Array.from()

登录后复制

等语言特性结合。这意味着，无论你的数据源是数据库查询结果、网络流、复杂树结构，还是一个简单的数字范围，只要你为它定义了迭代器协议，它就能以统一的方式被消费，这无疑提升了代码的可读性和可维护性。在我看来，这不仅仅是语法糖，更是一种设计模式的体现。

可迭代对象（Iterable）和迭代器（Iterator）之间有什么区别？

初次接触时，可迭代对象和迭代器这两个概念确实容易混淆，它们听起来很像，但扮演的角色却不同。简单来说，可迭代对象是“可以被迭代的东西”，而迭代器是“知道如何迭代的工具”。

可迭代对象（Iterable）：
- 它是一个对象，内部实现了
```
[Symbol.iterator]
```
  登录后复制
  方法。
- ```
[Symbol.iterator]
```
  登录后复制
  方法必须返回一个迭代器（Iterator）对象。
- 例如，JavaScript中的
```
Array
```
  登录后复制
  、
```
String
```
  登录后复制
  、
```
Map
```
  登录后复制
  、
```
Set
```
  登录后复制
  都是内置的可迭代对象。它们都有一个隐藏的
```
[Symbol.iterator]
```
  登录后复制
  方法。
- 一个可迭代对象可以被多次迭代。每次迭代都会调用
```
[Symbol.iterator]
```
  登录后复制
  方法，获取一个新的迭代器实例。
迭代器（Iterator）：
- 它是一个对象，内部实现了
```
next()
```
  登录后复制
  方法。
- ```
next()
```
  登录后复制
  方法每次被调用时，都必须返回一个形如
```
{ value: any, done: boolean }
```
  登录后复制
  的对象。
- ```
value
```
  登录后复制
  属性表示迭代到的当前值。
- ```
done
```
  登录后复制
  属性表示迭代是否完成。如果为
```
true
```
  登录后复制
  ，则
```
value
```
  登录后复制
  通常是
```
undefined
```
  登录后复制
  （尽管也可以是任何值），表示没有更多值了。
- 迭代器通常会维护自己的内部状态，比如下一个要返回的值是什么。

可以这样理解：你有一个装满水果的篮子（可迭代对象）。当你想要吃水果时，你需要一个“取水果的工具”（迭代器）。每次你用这个工具取一个水果（调用

next()

登录后复制

），它会告诉你取到了什么水果（

value

登录后复制

），并且告诉你篮子里是否还有水果（

done

登录后复制

）。每次你想重新从头开始吃水果，你都需要一个新的“取水果的工具”（新的迭代器实例）。这就是为什么

[Symbol.iterator]

登录后复制

应该返回一个新的迭代器，以确保每次迭代都是独立的。

讯飞听见会议

科大讯飞推出的AI智能会议系统

查看详情

使用生成器（Generators）简化迭代器实现

手动编写迭代器的

next()

登录后复制

方法，尤其是需要维护复杂状态时，可能会变得冗长且容易出错。JavaScript的生成器函数（Generator Functions）为我们提供了一种更简洁、更直观的方式来创建迭代器。

生成器函数通过在

function

登录后复制

关键字后添加一个星号 (

登录后复制

) 来定义，并且在函数体内使用

yield

登录后复制

关键字来“暂停”函数的执行并返回一个值。当生成器函数被调用时，它不会立即执行，而是返回一个生成器对象（Generator Object），这个对象本身就是一个迭代器。

function* rangeGenerator(start, end) {
  let current = start;
  while (current <= end) {
    yield current++; // 每次调用next()时，这里的值会被返回
  }
}

const myGeneratedRange = rangeGenerator(1, 5);

for (const num of myGeneratedRange) {
  console.log(num); // 输出 1, 2, 3, 4, 5
}

console.log([...rangeGenerator(6, 10)]); // 再次调用生成器函数会得到一个新的迭代器
// 输出 [6, 7, 8, 9, 10]

登录后复制

对比手动实现，使用生成器有几个显著优势：

代码简洁：
```
yield
```
登录后复制
关键字极大地简化了状态管理和
```
next()
```
登录后复制
方法的实现。你只需关注如何生成下一个值，而无需手动构建
```
{ value, done }
```
登录后复制
对象。
易于理解：生成器函数读起来更像一个同步函数，从上到下执行，遇到
```
yield
```
登录后复制
暂停，下次从暂停处继续。这比手动管理
```
current
```
登录后复制
变量和
```
done
```
登录后复制
状态要直观得多。
自动符合协议：生成器函数返回的生成器对象自动实现了迭代器协议，可以直接用于
```
for...of
```
登录后复制
循环等。

在我看来，生成器是ES6中一个非常优雅的特性，它不仅简化了迭代器的创建，也为异步编程（通过

async/await

登录后复制

结合

yield

登录后复制

）提供了强大的基础。如果你的自定义迭代逻辑相对简单或线性，生成器无疑是首选。

实现自定义迭代器的常见陷阱与最佳实践

在实现自定义迭代器时，虽然概念不复杂，但仍有一些细节需要注意，避免踩坑：

状态管理：迭代器必须维护自己的内部状态，以知道下一个要返回的值是什么。如果你的迭代器是可重用的（即
```
[Symbol.iterator]
```
登录后复制
每次返回同一个迭代器实例），那么多次迭代会相互影响。最佳实践是让
```
[Symbol.iterator]
```
登录后复制
每次都返回一个新的迭代器实例，这样每次
```
for...of
```
登录后复制
循环都能从头开始，互不干扰。上面的
```
createRange
```
登录后复制
例子就是这样做的。如果你的迭代器天生就是一次性的（比如从网络流读取），那倒无所谓。

无限迭代器：理论上，你可以创建一个永不返回

done: true

登录后复制

的迭代器。例如：

function* infiniteSequence() {
  let i = 0;
  while (true) {
    yield i++;
  }
}
const numbers = infiniteSequence();
// console.log(numbers.next().value); // 0
// console.log(numbers.next().value); // 1
// ...
// for (const num of numbers) { console.log(num); } // 会无限循环！

登录后复制

在使用这种迭代器时要格外小心，确保在合适的时机中断迭代，否则可能导致程序崩溃或卡死。

错误处理：在迭代器内部，如果
```
next()
```
登录后复制
方法抛出错误，迭代过程会中断。这通常是预期行为，但如果你有资源需要清理，可能需要考虑
```
try...finally
```
登录后复制
块。生成器函数也支持
```
try...catch
```
登录后复制
块来捕获
```
next()
```
登录后复制
调用的错误，或者通过
```
generator.throw(error)
```
登录后复制
从外部注入错误。
性能考量：虽然惰性求值是迭代器的一大优势，但每次
```
next()
```
登录后复制
调用如果涉及复杂的计算或I/O操作，仍然可能影响性能。设计迭代器时，要权衡每次迭代的开销。对于某些场景，预计算并缓存一部分数据可能更有效率。
与异步操作结合：对于需要异步获取数据的场景，可以实现异步迭代器协议 (
```
[Symbol.asyncIterator]
```
登录后复制
)，配合
```
for await...of
```
登录后复制
循环使用。这通常涉及
```
async function*
```
登录后复制
生成器。虽然不在当前讨论范围，但理解迭代器协议是理解异步迭代器协议的基础。