JavaScript中什么是迭代器_如何自定义迭代-js教程-PHP中文网

JavaScript中什么是迭代器_如何自定义迭代

betcha

发布： 2025-12-05 20:40:39

原创

199人浏览过

迭代器是JavaScript中统一的遍历接口，要求对象实现[Symbol.iterator]方法并返回含next()的对象，next()返回{value, done}；自定义对象可通过实现该方法或使用生成器函数（yield）变为可迭代。

javascript中什么是迭代器_如何自定义迭代

迭代器是 JavaScript 中一种统一的遍历接口，它允许你按需逐个访问集合（如数组、字符串、Map、Set 等）中的元素，而无需暴露内部结构。一个对象只要实现了 [Symbol.iterator] 方法，并返回一个符合迭代器协议的对象（即有 next() 方法，返回形如 { value, done } 的对象），它就是可迭代的，就能用 for...of、扩展运算符（...）、解构等语法来消费。

迭代器的核心协议

一个标准的迭代器对象必须满足两个条件：

有一个 next() 方法，每次调用返回一个对象：{ value: 当前值, done: 布尔值（是否遍历完毕） }
当 done 为 true 时，value 可选（通常表示返回值或结束信号）

如何让自定义对象可迭代（实现 `[Symbol.iterator]`）

只需在对象上定义一个名为 Symbol.iterator 的方法，它返回一个迭代器对象即可。例如，实现一个从 0 开始、递增到指定上限的数字范围：

class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }

  [Symbol.iterator]() {
    let current = this.start;
    return {
      next: () => {
        if (current < this.end) {
          return { value: current++, done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
}

// 使用
for (const num of new Range(2, 5)) {
  console.log(num); // 输出 2, 3, 4
}
console.log([...new Range(0, 3)]); // [0, 1, 2]

登录后复制

更简洁写法：用生成器函数（`function*`）自定义迭代

生成器函数天然返回迭代器对象，是实现自定义迭代最常用、最简洁的方式：

HiDream AI

全中文AIGC创作平台和AI社区

266

查看详情

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

class Countdown {
  constructor(from) {
    this.from = from;
  }

  *[Symbol.iterator]() {
    for (let i = this.from; i > 0; i--) {
      yield i;
    }
  }
}

console.log([...new Countdown(3)]); // [3, 2, 1]

登录后复制

注意：yield 每次暂停并产出一个值，next() 调用会恢复执行直到下一个 yield 或函数结束；函数结束后自动返回 { done: true }。

实际中要注意的细节

迭代器只能使用一次：一旦 done: true，后续 next() 仍返回 { value: undefined, done: true }，不会重置
如果想支持多次遍历，[Symbol.iterator] 方法应每次返回**新的迭代器对象**（不能复用同一个闭包状态）
原生类型（Array、String、Map、Set、TypedArray、arguments、NodeList）都默认实现了 [Symbol.iterator]
普通对象（{}）默认不可迭代，除非手动添加该方法

基本上就这些。掌握迭代器协议和生成器，就能灵活控制数据的消费方式，也是理解 async/await、RxJS 等异步流工具的基础。

以上就是JavaScript中什么是迭代器_如何自定义迭代的详细内容，更多请关注php中文网其它相关文章！