JavaScript迭代器协议及自定义实现详解

有志者，事竟成！如果你在学习文章，那么本文《JavaScript迭代器协议详解与自定义方法》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

JavaScript迭代器协议要求对象有next()方法，返回{value, done}对象；next()可多次调用、不传参（生成器除外）、不幂等；状态须封装在实例内；可迭代对象需实现[Symbol.iterator]。

JavaScript 迭代器协议的核心是 next() 方法

迭代器协议本身不依赖某个类或接口，只规定：只要一个对象有 next() 方法，且该方法返回形如 { value: any, done: boolean } 的对象，它就符合迭代器协议。这个 next() 必须可被多次调用，每次返回下一个值，直到 done: true。

注意：next() 不接受参数（除非是生成器迭代器，可传入值给 yield 表达式），也不保证幂等——调用两次通常返回不同结果。

手动实现一个可复用的数组迭代器

不能直接让普通对象“变”成迭代器，必须显式构造一个带 next() 的对象。常见错误是把 index 放在外部作用域导致多个遍历互相干扰，正确做法是把状态封装在迭代器实例内。

• value 是当前项，done 为 true 时 value 可省略（但最好仍返回 undefined）
• 迭代器本身不需要 [Symbol.iterator]()，只有“可迭代对象”才需要这个方法来返回一个迭代器
• 若想让自定义对象支持 for...of，必须实现 [Symbol.iterator] 并返回符合协议的迭代器

function createArrayIterator(arr) {
  let index = 0;
  return {
    next() {
      if (index 

<h3><code>[Symbol.iterator]</code> 是让对象支持 <code>for...of</code> 的关键</h3>
<p>仅实现 <code>next()</code> 不足以让对象被 <code>for...of</code> 消费；JS 引擎会先尝试调用对象的 <code>[Symbol.iterator]</code> 方法，再用其返回值进行遍历。这个方法必须返回一个迭代器（即含 <code>next()</code> 的对象）。</p>
<p>容易忽略的一点：每次调用 <code>[Symbol.iterator]</code> 都应返回**新迭代器**，否则多个 <code>for...of</code> 同时遍历会共享状态、相互干扰。</p>
<pre class="brush:php;toolbar:false">const counter = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let current = this.from;
    const last = this.to;
    return {
      next() {
        if (current 

<h3>自定义迭代器的边界与陷阱</h3>
<p>迭代器协议非常轻量，但也因此缺乏内置约束。实际使用中几个高频问题：</p>

• 忘记在 done: true 后继续返回 { value: undefined, done: true } ——后续调用行为未定义，部分环境可能报错或死循环
• 误把迭代器本身当作可迭代对象（比如对迭代器再套一层 for...of），会触发 TypeError: xxx is not iterable
• 异步迭代器需用 [Symbol.asyncIterator] 和 next() 返回 Promise，和同步协议完全分离，不能混用
• 性能上，手写迭代器比原生数组 values() 或 entries() 更重，除非有特殊逻辑（如跳过、变换、限流），否则优先用内置

真正需要手写迭代器的场景其实不多：惰性计算序列、包装底层数据源（如 WebSocket 流）、或实现特定遍历策略（如树的深度优先/广度优先）。多数时候，用 Array.prototype.values() 或生成器函数更安全简洁。

以上就是《JavaScript迭代器协议及自定义实现详解》的详细内容，更多关于的资料请关注golang学习网公众号！