JavaScript迭代器怎么用？让对象可迭代方法详解

学习文章要努力，但是不要急！今天的这篇文章《JavaScript迭代器是什么？如何让对象可迭代》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

JavaScript迭代器是具有next()方法并返回{value, done}对象的对象，用于按需提供序列值；可迭代对象则需实现Symbol.iterator方法以返回迭代器。

JavaScript 迭代器（Iterator）是一个具有 next() 方法的对象，该方法返回形如 { value: any, done: boolean } 的结果对象。它用来按需逐个提供序列中的值，是 for...of、解构赋值、扩展运算符（...）等语法背后的机制。

迭代器协议与可迭代协议的区别

两者常被混淆，但职责不同：

• 迭代器协议（Iterator Protocol）：定义一个对象只要拥有符合规范的 next() 方法，就是迭代器。
• 可迭代协议（Iterable Protocol）：定义一个对象只要拥有名为 Symbol.iterator 的方法，且该方法返回一个迭代器，这个对象就是“可迭代的”（iterable）。

也就是说：可迭代对象 → 调用 [Symbol.iterator]() → 得到一个迭代器 → 用 next() 一步步取值。

让自定义对象变成可迭代对象

只需在对象上定义 [Symbol.iterator] 方法，并确保它返回一个满足迭代器协议的对象。最简单的方式是返回一个生成器函数（function*），因为生成器函数自动实现 next()。

例如，让一个类表示的“书架”支持 for...of 遍历其中的书名：

class BookShelf {
  constructor(books) {
    this.books = books;
  }

  *[Symbol.iterator]() {
    for (const book of this.books) {
      yield book.title;
    }
  }
}

const shelf = new BookShelf([
  { title: 'Eloquent JavaScript', author: 'Marijn Haverbeke' },
  { title: 'You Don’t Know JS', author: 'Kyle Simpson' }
]);

for (const title of shelf) {
  console.log(title); // 'Eloquent JavaScript', 'You Don’t Know JS'
}

手动实现迭代器（不依赖生成器）

如果需要精细控制状态或兼容老环境（不支持生成器），可以手动返回一个带 next() 的对象：

class BookShelf {
  constructor(books) {
    this.books = books;
  }

  [Symbol.iterator]() {
    let index = 0;
    const books = this.books;

    return {
      next() {
        if (index 
<p>注意：<code>done: true</code> 时 <code>value</code> 可省略，但显式返回 <code>undefined</code> 更清晰；每次调用 <code>next()</code> 应独立于其他迭代器实例（即多个 <code>for...of</code> 同时遍历时互不影响），所以状态（如 <code>index</code>）必须封装在闭包或迭代器对象内部。</p>

<h3>常见误区与建议</h3>

• 不要直接在实例上挂 next()：仅实现 next() 不代表可迭代，必须通过 [Symbol.iterator] 暴露入口。
• 避免共享迭代状态：如果多个地方同时遍历同一个对象，应每次调用 [Symbol.iterator] 都返回**新**的迭代器对象，而不是复用同一个。
• 可迭代不等于数组：可迭代对象不能直接调用 .map()、.filter() 等数组方法，需先转成数组（Array.from(it) 或 [...it]）再操作。
• 空迭代器要返回 { done: true }：即使没有数据，[Symbol.iterator]().next() 也应立刻返回 { done: true }，否则 for...of 会无限循环。

不复杂但容易忽略。核心就两点：加 [Symbol.iterator] 方法，让它返回一个有正确 next() 的对象。

理论要掌握，实操不能落！以上关于《JavaScript迭代器怎么用？让对象可迭代方法详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！