JavaScript迭代器是什么？怎么用？

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JavaScript迭代器是什么？如何工作？》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

Symbol.iterator 是对象可被 for...of 遍历的必要条件，其返回值必须是含 next() 方法的迭代器，且 next() 每次调用须返回 { value, done }；常见错误包括缺失 done、this 未实现 next、箭头函数导致 this 绑定失效；Range 类需确保 [Symbol.iterator] 是普通函数、每次返回新迭代器、done 为 true 后仍稳定返回 { done: true }。

Symbol.iterator 是让对象能被 for...of 遍历的“通行证”，而迭代器本身是一个带 next() 方法的对象，每次调用返回 { value, done } —— 它不是语法糖，是 JavaScript 遍历行为的底层契约。

为什么 for...of 会报 “is not iterable”？

因为目标对象没提供 [Symbol.iterator] 方法，或者该方法没返回一个合法迭代器（即没有 next()，或 next() 不返回 { value, done }）。常见错误包括：

• 直接把 { next() { return { value: 1 } } } 当作可迭代对象 —— ❌ 缺少 done，for...of 会无限循环
• 写了 [Symbol.iterator]() { return this; }，但 this 没实现 next() —— ❌ 对象自身不是迭代器
• 在类中定义 [Symbol.iterator] 时用了箭头函数 —— ❌ 箭头函数无法正确绑定 this，状态变量会共享或丢失

手写一个可遍历的 Range 类要注意什么？

它要同时满足两个角色：可迭代对象（有 [Symbol.iterator]）和迭代器生成器（返回的迭代器要有状态、可暂停）。关键点：

• [Symbol.iterator] 必须是普通函数（非箭头），才能闭包捕获当前遍历位置
• 每次调用该方法都应返回**新迭代器**，否则多个 for...of 循环会互相干扰
• done: true 后，后续 next() 仍需返回 { done: true }（value 可省略），不能抛错或返回 undefined

class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }
  [Symbol.iterator]() {
    let i = this.start;
    return {
      next() {
        if (i 

<h3>用 <code>function*</code> 实现迭代器更安全，但别误以为它“自动可遍历”</h3>
<p>生成器函数返回的是生成器对象，它**既是迭代器，也是可迭代对象**（<code>[Symbol.iterator] === self</code>），所以可以直接 <code>for...of</code>。但它不是万能解药：</p>

• 生成器函数内部不能用 await（除非用 async function* → 异步迭代器）
• 一旦执行过 next() 并走到 done: true，再调用 next() 仍返回 { done: true }，无法重置 —— 和手动迭代器一样，“一次性”是硬约束
• 生成器对象不支持随机访问（比如想跳到第 5 个元素），只能顺序推进

自定义树结构怎么加 for...of 支持？

核心不是“让树变数组”，而是让遍历逻辑（如中序）变成按需生成的流程。重点在于：[Symbol.iterator] 返回的迭代器必须封装好遍历状态，而不是当场执行全部遍历。

• 不要在 [Symbol.iterator] 里递归遍历完所有节点再返回数组 —— 这就失去“懒求值”意义，也违背迭代器本意
• 推荐用栈模拟递归（中序/前序）或用生成器 yield* 委托子树，天然保持暂停能力
• 如果树很大且只读前几个节点，手动迭代器 + 栈方式比生成器内存更可控（无函数调用栈累积）

真正容易被忽略的是：迭代器协议不关心数据“在哪”或“怎么来”，只规定“怎么取”。哪怕 value 是异步 fetch 来的、是实时传感器读数、甚至是无限序列（如斐波那契），只要 next() 每次返回符合协议的对象，它就能被标准语法消费——这个抽象层级，才是它不可替代的地方。

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