首页 > 文章 > 前端

JavaScript迭代器与迭代协议详解

时间：2025-11-19 15:19:13 399浏览收藏

目前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。

实际应用场景

迭代器和协议在以下场景非常有用：

封装数据流处理逻辑，比如逐行读取文件或处理大数据集时避免一次性加载。
构建惰性求值序列，如无限序列（斐波那契数列）、过滤组合操作链。
统一不同数据结构的访问方式，提升 API 设计一致性。

例如实现一个无限自然数生成器：

function* naturals() {
let n = 0;
while (true) yield n++;
}

const it = naturals();
it.next().value; // 0
it.next().value; // 1

配合 take 函数可做有限提取，实现“惰性管道”效果。

基本上就这些。掌握迭代协议让你更深入理解 for...of、展开符、解构赋值背后的机制，也能写出更高效、更具表达力的代码。

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