要让自定义对象可被for…of遍历，需实现Symbol.iterator方法并返回符合迭代器协议的对象。例如MyRange类通过[Symbol.iterator]()返回包含next()方法的迭代器对象，从而支持for…of循环和扩展运算符。解构赋值与扩展运算符依赖该协议，调用对象的Symbol.iterator获取迭代器，依次执行next()读取value直至done为true。实际应用中，迭代器可用于处理无限序列（如斐波那契数列）、统一数据源遍历、构建惰性求值的数据处理管道，以及异步迭代等场景，提升代码通用性与内存效率。
JavaScript的迭代器协议（Iterator Protocol）和可迭代协议（Iterable Protocol）是ES6引入的核心概念，它们为各种数据结构提供了一种统一的遍历机制。简单来说，可迭代对象就是能被
for...of
循环遍历的对象，而迭代器则是实际执行遍历操作、并按需提供序列中下一个值的对象。这两个协议的内建实现，让数组、字符串、Map、Set等原生数据结构天然支持迭代，也正是因为它们的存在，解构赋值和扩展运算符才能以我们熟悉的方式，优雅地处理这些数据集合。
可迭代协议和迭代器协议，在我看来，是JavaScript语言设计中非常精妙的一笔，它提供了一种强大的抽象能力，让数据的遍历不再局限于特定的类型，而是通过一套统一的接口来实现。
如何自定义一个可迭代对象，让它也能被
for...of
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在处理集合数据时，变得异常灵活和富有表现力。
迭代器协议在现代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); // 0console.log(fib.next().value); // 1console.log(fib.next().value); // 1console.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）。通过
for await...of
循环，你可以优雅地遍历异步数据流，比如WebSocket消息、文件读取流或者分页的网络请求。这为处理异步序列数据提供了一种非常强大的、类似于同步迭代的语法糖。
在我看来，深入理解迭代器协议不仅仅是掌握几个语法特性，它更是理解JavaScript如何处理序列数据、如何实现惰性求值、以及如何构建更灵活、更高效代码的关键。它提供了一种强大的抽象，让我们可以用统一且优雅的方式，处理各种形态的数据流。
以上就是什么是JavaScript的迭代器协议与可迭代对象的内建实现，以及它们如何支持解构赋值和扩展运算符？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1521223.html
微信扫一扫 
支付宝扫一扫 
