什么是JavaScript的迭代器协议与可迭代对象的内建实现，以及它们如何支持解构赋值和扩展运算符？-js教程-PHP中文网

要让自定义对象可被for...of遍历，需实现Symbol.iterator方法并返回符合迭代器协议的对象。例如MyRange类通过[Symbol.iterator]()返回包含next()方法的迭代器对象，从而支持for...of循环和扩展运算符。解构赋值与扩展运算符依赖该协议，调用对象的Symbol.iterator获取迭代器，依次执行next()读取value直至done为true。实际应用中，迭代器可用于处理无限序列（如斐波那契数列）、统一数据源遍历、构建惰性求值的数据处理管道，以及异步迭代等场景，提升代码通用性与内存效率。

什么是javascript的迭代器协议与可迭代对象的内建实现，以及它们如何支持解构赋值和扩展运算符？

JavaScript的迭代器协议（Iterator Protocol）和可迭代协议（Iterable Protocol）是ES6引入的核心概念，它们为各种数据结构提供了一种统一的遍历机制。简单来说，可迭代对象就是能被

for...of

登录后复制

循环遍历的对象，而迭代器则是实际执行遍历操作、并按需提供序列中下一个值的对象。这两个协议的内建实现，让数组、字符串、Map、Set等原生数据结构天然支持迭代，也正是因为它们的存在，解构赋值和扩展运算符才能以我们熟悉的方式，优雅地处理这些数据集合。

可迭代协议和迭代器协议，在我看来，是JavaScript语言设计中非常精妙的一笔，它提供了一种强大的抽象能力，让数据的遍历不再局限于特定的类型，而是通过一套统一的接口来实现。

如何自定义一个可迭代对象，让它也能被

for...of

登录后复制

循环？

要让一个自定义对象变得“可迭代”，核心在于实现它的可迭代协议。这听起来有点抽象，但实际操作起来并不复杂。一个对象如果想成为可迭代对象，它必须拥有一个键为

Symbol.iterator

登录后复制

的方法。这个方法不接受任何参数，并且需要返回一个符合迭代器协议（Iterator Protocol）的对象。

而一个符合迭代器协议的对象，它必须包含一个

next()

登录后复制

方法。每次调用

next()

登录后复制

方法时，它会返回一个包含

value

登录后复制

和

done

登录后复制

两个属性的对象。

value

登录后复制

是当前迭代到的值，

done

登录后复制

则是一个布尔值，表示迭代是否已经结束。当

done

登录后复制

为

true

登录后复制

时，

value

登录后复制

通常是

undefined

登录后复制

（当然，你也可以返回任何值，但约定俗此）。

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

举个例子，假设我们想创建一个自定义的

Range

登录后复制

对象，让它可以像数组一样，生成一个范围内的数字序列：

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

  // 实现可迭代协议
  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end;

    // 返回一个迭代器对象
    return {
      next() {
        if (current <= end) {
          return { value: current++, done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
}

const range = new MyRange(1, 5);
for (const num of range) {
  console.log(num); // 1, 2, 3, 4, 5
}

// 甚至可以这样用
const arrFromRange = [...new MyRange(10, 12)];
console.log(arrFromRange); // [10, 11, 12]

登录后复制

你看，通过实现

[Symbol.iterator]()

登录后复制

方法，我们就能让

MyRange

登录后复制

实例像原生数组一样，被

for...of

登录后复制

循环、扩展运算符等处理。这背后的力量，就是迭代器协议和可迭代协议的巧妙结合。这种设计模式，极大地提升了JavaScript的表达能力和代码的通用性，让我们可以用统一的方式处理各种序列数据，无论是内置的还是自定义的。

解构赋值和扩展运算符是如何利用迭代器协议的？

解构赋值（Destructuring Assignment）和扩展运算符（Spread Operator）之所以能如此灵活地处理各种数据集合，其秘密武器正是迭代器协议。它们并没有直接去“看”你是不是一个数组或者Set，而是去“问”你有没有一个

Symbol.iterator

登录后复制

方法，如果有，就按迭代器协议来取值。

解构赋值

当你对一个可迭代对象进行数组解构时，比如

[a, b, ...rest] = someIterable;

登录后复制

，JavaScript引擎会在幕后做这些事情：

它会调用
```
someIterable
```
登录后复制
对象的
```
[Symbol.iterator]()
```
登录后复制
方法，获取到一个迭代器。
然后，它会反复调用这个迭代器的
```
next()
```
登录后复制
方法。
每次调用
```
next()
```
登录后复制
返回的对象中，
```
value
```
登录后复制
属性的值会被依次赋给解构模式中的变量（
```
a
```
登录后复制
,
```
b
```
登录后复制
）。
当遇到剩余元素（
```
...rest
```
登录后复制
）时，它会继续调用
```
next()
```
登录后复制
，直到
```
done: true
```
登录后复制
为止，并将剩余的所有
```
value
```
登录后复制
收集到一个新的数组中赋给
```
rest
```
登录后复制
变量。

这意味着，无论是数组、字符串还是我们上面自定义的

MyRange

登录后复制

对象，只要它实现了可迭代协议，就可以被解构赋值。

const str = "hello";
const [firstChar, secondChar, ...restChars] = str;
console.log(firstChar, secondChar, restChars); // h e ["l", "l", "o"]

const myRange = new MyRange(100, 102);
const [val1, val2] = myRange;
console.log(val1, val2); // 100 101

登录后复制

这不仅让代码更简洁，也提供了一种非常声明式的方式来提取数据。

扩展运算符（

...

登录后复制

）

扩展运算符在数组字面量或函数调用中使用时，其工作原理与解构赋值类似，也完全依赖于可迭代协议。

当你写

[...someIterable]

登录后复制

时，或者在函数调用中

myFunction(...someIterable)

登录后复制

时：

JavaScript引擎同样会调用
```
someIterable
```
登录后复制
的
```
[Symbol.iterator]()
```
登录后复制
方法，获取迭代器。
接着，它会不断地调用迭代器的
```
next()
```
登录后复制
方法，直到
```
done: true
```
登录后复制
。
每次
```
next()
```
登录后复制
返回的
```
value
```
登录后复制
，都会被“展开”到数组字面量中，或者作为独立的参数传递给函数。

const set = new Set([1, 2, 3]);
const arrFromSet = [...set]; // 调用Set的[Symbol.iterator]
console.log(arrFromSet); // [1, 2, 3]

const customRange = new MyRange(5, 7);
const expandedRange = [...customRange]; // 调用MyRange的[Symbol.iterator]
console.log(expandedRange); // [5, 6, 7]

function sum(a, b, c) {
  return a + b + c;
}
const numbers = new MyRange(1, 3);
console.log(sum(...numbers)); // 1 + 2 + 3 = 6 (调用MyRange的[Symbol.iterator]并展开)

登录后复制

正是这种对迭代器协议的依赖，让解构赋值和扩展运算符拥有了如此强大的通用性。它们不关心数据“是什么类型”，只关心数据“能不能被迭代”。这使得JavaScript在处理集合数据时，变得异常灵活和富有表现力。

一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

查看详情

迭代器协议在现代JavaScript开发中有哪些实际应用场景？

迭代器协议和可迭代对象在现代JavaScript开发中，其应用远不止于让

for...of

登录后复制

循环和解构赋值工作。它们提供了一种强大的抽象，可以用于多种高级场景，显著提升代码的灵活性和效率。

1. 处理无限序列或大型数据集

一个非常典型的应用场景是处理那些理论上可以无限长，或者实际非常庞大的数据序列。通过自定义迭代器，我们可以实现“按需生成”数据，而不是一次性将所有数据加载到内存中。这对于内存优化和性能至关重要。

例如，你可以创建一个迭代器来生成斐波那契数列，它不需要预先计算出所有项：

function* fibonacciGenerator() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fib = fibonacciGenerator();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
// ...你可以无限地获取下一个斐波那契数

登录后复制

这里的

function*

登录后复制

（生成器函数）是创建迭代器最简洁的方式，它在内部自动实现了迭代器协议。这种“惰性求值”的特性，对于处理文件流、网络数据包或任何不希望一次性全部加载的数据源都非常有价值。

2. 统一不同数据源的遍历方式

设想一下，你的应用可能从数据库获取数据（可能是数组），从API获取数据（可能是对象数组），或者用户输入的数据（可能是字符串）。如果每种数据源都需要一套不同的遍历逻辑，代码会变得非常冗余。通过将这些数据源封装成可迭代对象，你可以用

for...of

登录后复制

循环统一它们的遍历方式，大大简化了代码结构。

比如，一个日志解析器可能需要遍历日志文件中的每一行，或者遍历一个日志事件数组。如果两者都实现为可迭代对象，那么处理它们的逻辑就可以高度复用。

3. 构建可组合的数据处理管道

迭代器可以像乐高积木一样组合起来，形成数据处理管道。你可以创建迭代器来

map

登录后复制

（转换）、

filter

登录后复制

（过滤）甚至

take

登录后复制

（限制数量）另一个迭代器的输出，而且这些操作都是惰性执行的。这意味着只有当实际需要数据时，计算才会发生，从而避免了不必要的中间数组创建和内存消耗。

function* mapIterator(iterable, transformFn) {
  for (const item of iterable) {
    yield transformFn(item);
  }
}

function* filterIterator(iterable, predicateFn) {
  for (const item of iterable) {
    if (predicateFn(item)) {
      yield item;
    }
  }
}

const numbers = [1, 2, 3, 4, 5];
const processed = mapIterator(
  filterIterator(numbers, n => n % 2 === 0),
  n => n * 10
);

for (const p of processed) {
  console.log(p); // 20, 40
}

登录后复制

这种模式在处理大型数据流时尤其强大，它允许你构建高效、内存友好的数据转换流程，而无需担心创建大量的临时中间数据结构。

4. 异步迭代（Async Iterators）

虽然标题没有直接提及，但值得一提的是，迭代器协议的概念也延伸到了异步操作，形成了异步迭代器（Async Iterators）。通过