JS如何实现迭代协议？可迭代对象-js教程-PHP中文网

JS如何实现迭代协议？可迭代对象

小老鼠

发布： 2025-08-23 11:54:02

原创

392人浏览过

JavaScript迭代协议通过Symbol.iterator让对象可迭代，实现该方法并返回带next()的迭代器对象，即可用for...of或展开运算符遍历；生成器函数（function*）配合yield能更简洁地创建迭代器，自动管理状态与next()逻辑，提升代码可读性与灵活性。

js如何实现迭代协议？可迭代对象

JavaScript中的迭代协议，说白了，就是一套约定，它让任何对象都能定义自己的遍历行为。核心在于实现一个特定的方法：

[Symbol.iterator]

登录后复制

。只要一个对象有这个方法，并且这个方法能返回一个符合迭代器协议的对象，那它就是“可迭代对象”。这意味着你可以用

for...of

登录后复制

循环它，或者用展开运算符（

...

登录后复制

）来解构它，就像处理数组一样。这套机制让数据消费变得非常统一和灵活。

迭代协议的实现机制

要让一个JavaScript对象变得可迭代，你需要给它添加一个名为

[Symbol.iterator]

登录后复制

的方法。这个方法必须是一个函数，并且它被调用时，必须返回一个“迭代器”对象。

那么，什么是迭代器呢？迭代器本身也是一个对象，它必须包含一个

next()

登录后复制

方法。每次调用这个

next()

登录后复制

方法时，它都应该返回一个包含两个属性的对象：

```
value
```
登录后复制
: 这是当前迭代到的值。
```
done
```
登录后复制
: 这是一个布尔值，表示迭代是否已经完成。如果迭代结束，
```
done
```
登录后复制
就应该是
```
true
```
登录后复制
；否则，就是
```
false
```
登录后复制
。

举个例子，假设我们想创建一个简单的计数器，让它能从某个数字开始，数到另一个数字：

function createCounter(start, end) {
  let current = start;
  return {
    [Symbol.iterator]() { // 这就是可迭代协议的关键
      return { // 返回一个迭代器对象
        next() { // 迭代器对象必须有next方法
          if (current <= end) {
            return { value: current++, done: false };
          } else {
            return { value: undefined, done: true };
          }
        }
      };
    }
  };
}

const myCounter = createCounter(1, 3);

for (const num of myCounter) {
  console.log(num); // 输出 1, 2, 3
}

// 也可以用展开运算符
const numsArray = [...createCounter(5, 7)];
console.log(numsArray); // 输出 [5, 6, 7]

登录后复制

这里可以看到，

createCounter

登录后复制

返回的对象就是可迭代的，因为它实现了

[Symbol.iterator]

登录后复制

。而

[Symbol.iterator]

登录后复制

方法返回的那个带有

next()

登录后复制

的对象，就是迭代器。这种分离的设计很常见，让你可以控制迭代的状态。

for...of

登录后复制

循环是如何与迭代协议协同工作的？

for...of

登录后复制

循环是ES6引入的，它专门用来遍历可迭代对象。它的工作原理其实非常直接，但又很巧妙。当你写下

for (const item of someIterableObject)

登录后复制

时，JavaScript引擎在幕后做了几件事：

它会首先尝试调用

someIterableObject

登录后复制

的

[Symbol.iterator]()

登录后复制

方法。如果这个方法不存在，或者返回的不是一个迭代器对象，那么就会抛出一个错误，告诉你这个对象不是可迭代的。

晓象AI资讯阅读神器

晓象-AI时代的资讯阅读神器

查看详情

如果成功获取到迭代器，

for...of

登录后复制

就会反复调用这个迭代器的

next()

登录后复制

方法。每次调用，它都会检查

next()

登录后复制

返回的对象中的

done

登录后复制

属性。

如果
```
done
```
登录后复制
是
```
false
```
登录后复制
，那么
```
value
```
登录后复制
属性的值就会被赋给
```
item
```
登录后复制
变量，然后循环体内的代码会被执行。
如果
```
done
```
登录后复制
是
```
true
```
登录后复制
，这意味着迭代已经完成，
```
for...of
```
登录后复制
循环就会终止。

这与传统的

for...in

登录后复制

循环形成鲜明对比。

for...in

登录后复制

是用来遍历对象属性名的，它会枚举对象自身以及原型链上的可枚举属性。而

for...of

登录后复制

则完全聚焦于数据集合的“值”本身，它不关心属性名，只关心通过迭代协议暴露出来的数据序列。这使得

for...of

登录后复制

在处理数组、字符串、Map、Set以及你自定义的任何可迭代数据结构时，都能提供一种统一且直观的遍历方式。在我看来，这是现代JavaScript中处理数据流非常基础且强大的一个抽象。

如何利用生成器函数更简洁地创建可迭代对象？

手动实现迭代器的

next()

登录后复制

方法，尤其是当迭代逻辑比较复杂时，可能会显得有些冗长和容易出错。JavaScript为此提供了一个语法糖，也就是“生成器函数”（Generator Function），它能极大地简化可迭代对象的创建过程。

生成器函数使用

function*

登录后复制

语法定义，并且在函数体内部，你可以使用

yield

登录后复制

关键字来“产出”值。每次

yield

登录后复制

一个值，生成器函数就会暂停执行，并返回这个值作为迭代器结果的

value

登录后复制

，同时

done

登录后复制

会被自动设为

false

登录后复制

。当再次调用迭代器的

next()

登录后复制

方法时，生成器函数会从上次暂停的地方继续执行，直到遇到下一个

yield

登录后复制

或函数结束。如果函数执行完毕（没有更多的

yield

登录后复制

），那么返回的

done

登录后复制

就会是

true

登录后复制

。

这意味着，一个生成器函数本身在被调用时，就会返回一个迭代器对象，这个对象已经自动实现了

next()

登录后复制

方法。所以，要创建一个可迭代对象，你只需要让它的

[Symbol.iterator]

登录后复制

方法是一个生成器函数即可。

// 还是那个计数器，用生成器函数实现
function createCounterWithGenerator(start, end) {
  return {
    [Symbol.iterator]: function* () { // [Symbol.iterator] 现在是一个生成器函数
      for (let i = start; i <= end; i++) {
        yield i; // 每次yield一个值，就会暂停并返回
      }
    }
  };
}

const myGenCounter = createCounterWithGenerator(10, 12);

for (const num of myGenCounter) {
  console.log(num); // 输出 10, 11, 12
}

// 或者更直接地，生成器函数本身就是迭代器
function* simpleGenerator() {
  yield 'Hello';
  yield 'World';
  yield '!';
}

const gen = simpleGenerator(); // 调用生成器函数直接返回一个迭代器
console.log(gen.next()); // { value: 'Hello', done: false }
console.log(gen.next()); // { value: 'World', done: false }
console.log(gen.next()); // { value: '!', done: false }
console.log(gen.next()); // { value: undefined, done: true }

// 甚至可以直接用for...of遍历生成器函数返回的迭代器
for (const item of simpleGenerator()) {
    console.log(item); // 输出 Hello, World, !
}

登录后复制

在我看来，生成器函数简直是迭代器协议的“最佳拍档”。它把复杂的迭代逻辑，特别是那些需要维护内部状态的遍历，用一种更接近同步代码的直观方式表达出来。你不再需要手动管理