JavaScript迭代器如何实现自定义遍历？

JavaScript迭代器是一套精巧的协议机制，通过同时满足可迭代协议（提供[Symbol.iterator]方法）和迭代器协议（返回具备next()方法且每次调用都产出{value, done}对象的迭代器），让任意对象都能无缝接入for...of、扩展运算符、解构赋值等现代语法；它不是数据结构本身，而是一种标准化的遍历能力接口——哪怕你手写一个简单的数字范围生成器，也能瞬间获得与数组同等的遍历体验，真正实现“行为可插拔、消费无感知”的优雅设计。

JavaScript迭代器是一种让对象支持for...of循环和解构等语法的协议机制，核心在于提供一个返回{ value, done }对象的next()方法。它不等于数组或类数组，而是一套可被统一消费的遍历接口。

迭代器协议：两个关键角色

要让一个对象可迭代，需满足两个协议：

• 可迭代协议（Iterable Protocol）：对象必须有[Symbol.iterator]方法，该方法返回一个迭代器对象；
• 迭代器协议（Iterator Protocol）：返回的对象必须有next()方法，每次调用返回形如{ value: any, done: boolean }的对象。

手写一个简单迭代器

比如实现一个从 start 到 end 的数字范围迭代器：

function range(start, end) {
  return {
    [Symbol.iterator]() {
      let current = start;
      return {
        next() {
          if (current // 使用
for (const num of range(2, 5)) {
console.log(num); // 2, 3, 4, 5
}

用生成器函数简化迭代器实现

生成器函数（function*）天然符合迭代器协议，yield会自动封装为{value, done}，大幅降低手写成本：

function* rangeGen(start, end) {
  for (let i = start; i const it = rangeGen(2, 4);
console.log(it.next()); // { value: 2, done: false }
console.log([...rangeGen(2, 4)]); // [2, 3, 4]

几乎所有内置集合（Array、Map、Set、String）都实现了[Symbol.iterator]，所以能直接用于for...of或扩展运算符。

自定义遍历的关键点

想让自己的类或对象支持自定义遍历，只需在原型或实例上部署[Symbol.iterator]方法：

• 返回一个对象，该对象的next()控制每次产出什么；
• done: true表示遍历结束，之后的next()调用仍应返回{ value: undefined, done: true }；
• value可以是任意类型，包括undefined（只要done为false）；
• 迭代器可以是惰性的（如生成器）、状态化的（如维护内部指针），也可设计成只读或单次使用。

不复杂但容易忽略

终于介绍完啦！小伙伴们，这篇关于《JavaScript迭代器如何实现自定义遍历？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！