JavaScript Iterables 可迭代对象
可迭代对象可以使用 for...of 循环进行迭代
for...of 循环
JavaScript 的 for...of 语句用于遍历可迭代对象的元素。
语法
for (variable of iterable) {
// 待执行的代码块
}迭代
迭代是指遍历一系列元素。
以下是一些示例:
- 遍历字符串
- 遍历数组
- 遍历集合
- 遍历映射
遍历字符串
您可以使用 for...of 循环来遍历字符串中的元素:
遍历数组
您可以使用for...of循环来遍历数组的元素:
遍历集合
您可以使用for...of循环来遍历集合中的元素:
遍历 Map
您可以使用 for...of 循环来遍历 Map 的元素:
示例
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
for (const x of fruits) {
// 待执行的代码块
}亲自试一试 »JavaScript 迭代器
迭代器协议定义了如何从一个对象生成一个值序列。
当一个对象实现了next()方法时，它就成为了一个迭代器。
next() 方法必须返回一个包含两个属性的对象:
- value (the next value)
- done (true or false)
| value | 迭代器返回的值 (如果 done 为 true，则可以省略) |
|---|---|
| done | true 如果迭代器已完成 false 如果迭代器已生成新值 |
注意
严格来说，可迭代对象必须实现 Symbol.iterator 方法。
在 JavaScript 中，以下是可迭代对象:
- 字符串
- 数组
- 类型化数组
- 集合
- 映射
因为它们的原型对象有一个 Symbol.iterator 方法:
自制可迭代对象
当调用 next() 方法时，此可迭代对象会返回一个永无止境的数字:10、20、30、40……。
示例
// 自制可迭代对象
function myNumbers() {
let n = 0;
return {
next: function() {
n += 10;
return {value:n, done:false};
}
};
}
// 运行可迭代对象const n = myNumbers();
n.next(); // Returns 10
n.next(); // Returns 20
n.next(); // Returns 30亲自试一试 »注意
自建可迭代对象不支持 JavaScript 的 for...of 语句。
JavaScript 可迭代对象是一个拥有 Symbol.iterator 的对象。
Symbol.iterator 是一个返回 next() 函数的函数。
可以使用以下代码遍历可迭代对象:for (const x of iterable) { }
示例
// 创建一个对象
myNumbers = {};
// 使其成为可迭代对象
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}
现在你可以使用for..of
for (const num of myNumbers) {
// Any Code Here
}亲自试一试 »Symbol.iterator 方法会被 for..of 自动调用。
但我们也可以手动调用它。
示例
let iterator = myNumbers[Symbol.iterator]();
while (true) {
const result = iterator.next();
if (result.done) break;
// Any Code Here
}亲自试一试 »注意
迭代器提供了一种受控的方式来处理数据序列，从而能够为各种数据结构实现自定义迭代逻辑。
下一章将介绍 ECMAScript 2025 中引入的新的迭代器辅助函数。
