JavaScript中的迭代协议(Iteration Protocols)如何自定义实现？-js教程-PHP中文网

JavaScript中的迭代协议(Iteration Protocols)如何自定义实现？

狼影

发布： 2025-10-02 10:05:02

原创

971人浏览过

一个对象要支持迭代需实现可迭代协议和迭代器协议。通过定义[Symbol.iterator]方法返回具有next()的迭代器，可使自定义对象支持for...of和扩展运算符。

javascript中的迭代协议(iteration protocols)如何自定义实现？

JavaScript中的迭代协议允许对象定义或自定义它们的迭代行为。实现自定义迭代的关键是理解两个协议：可迭代协议（Iterable Protocol）和迭代器协议（Iterator Protocol）。只要遵循这两个协议，就能让任意对象支持 for...of 循环和扩展运算符等语法。

可迭代协议：让对象可被迭代

一个对象要成为可迭代的，必须实现 [Symbol.iterator] 方法。这个方法返回一个迭代器对象。

例如，你可以为一个自定义集合类添加迭代能力：

class MyCollection {
  constructor(items) {
    this.items = items;
  }

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

    return {
      next() {
        if (index < data.length) {
          return { value: data[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
}

const collection = new MyCollection([1, 2, 3]);
for (const item of collection) {
  console.log(item); // 输出 1, 2, 3
}

登录后复制

迭代器协议：控制每次迭代的行为

迭代器是一个具有 next() 方法的对象，该方法返回一个包含 value 和 done 属性的结果对象。

value 表示当前步骤的值，可为 undefined
done 为布尔值，true 表示迭代完成

你可以在 next 方法中加入复杂逻辑，比如延迟计算、条件跳过或异步处理。

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

百度文心百中

百度大模型语义搜索体验中心

查看详情

使用生成器简化实现

生成器函数自动满足迭代器协议，是实现自定义迭代最简洁的方式。

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

  *[Symbol.iterator]() {
    for (let i = this.start; i <= this.end; i++) {
      yield i;
    }
  }
}

const range = new Range(1, 3);
console.log([...range]); // [1, 2, 3]

登录后复制

生成器函数内部用 yield 返回每个值，函数会暂停直到下一次调用 next()，无需手动管理状态。