当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript迭代器与迭代协议详解

JavaScript迭代器与迭代协议详解

2025-11-19 15:19:13 0浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《理解JavaScript迭代器与迭代协议的使用方法》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

迭代协议是JavaScript中实现数据遍历的约定规则。可迭代协议要求对象实现Symbol.iterator方法，返回一个迭代器；迭代器协议要求对象具有next()方法，返回包含value和done属性的对象。例如数组默认可迭代，可通过arr[Symbol.iterator]().next()逐个获取值。通过为自定义对象添加Symbol.iterator方法，可使其支持for...of循环和扩展运算符。如range对象可定义迭代器，使for (const n of range)按范围输出1到5。

如何理解并应用JavaScript中的迭代器与迭代协议？

JavaScript中的迭代器和迭代协议是实现数据遍历的核心机制。理解它们有助于更好地处理集合类数据，比如数组、Map、Set，甚至自定义对象的遍历行为。

什么是迭代协议？

迭代协议不是内置对象或方法，而是一套约定规则，分为两种：

可迭代协议（Iterable Protocol）：规定一个对象是否可被 for...of 遍历。只要对象实现了 Symbol.iterator 方法，并返回一个迭代器对象，它就是可迭代的。
迭代器协议（Iterator Protocol）：定义了如何逐步获取值的对象结构。一个迭代器必须提供 next() 方法，该方法返回形如 { value: any, done: boolean } 的对象。

例如，数组天生可迭代，因为它有 Symbol.iterator 方法：

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
iterator.next(); // { value: 1, done: false }
iterator.next(); // { value: 2, done: false }

如何创建自定义迭代器？

你可以为任意对象添加 Symbol.iterator 方法，使其支持 for...of 和扩展运算符等语法。

比如让一个范围对象可迭代：

这样，range 就能被 for...of 使用，也能用 [...range] 展开。

生成器函数简化迭代器编写

手动写 next() 和状态管理容易出错。生成器函数（function*）自动满足迭代器协议，极大简化开发。

上面的 range 可以更简洁地写成：

function* rangeGenerator(from, to) {
  for (let i = from; i     yield i;
  }
}

for (const num of rangeGenerator(1, 5)) {
  console.log(num); // 同样输出 1 到 5
}

生成器函数返回的对象本身就是迭代器，同时也是一个可迭代对象（自带 Symbol.iterator），因此可以直接用于 for...of。