1.1 基本概念
在 JavaScript 中，迭代器（iterators）和可迭代对象（iterables）是一些基本的概念，它们让对象可以被遍历。这些概念在现代 JavaScript 中被广泛使用，尤其是在类似 for...of 循环、spread operator（扩展运算符）、解构赋值等语法结构中。在这节课里，我们会看看什么是 iterables 和 iterators，它们是如何工作的以及如何创建和使用它们。
Iterables（可迭代对象）
可迭代对象是那些实现了迭代协议的对象。它们必须有一个带有键 [Symbol.iterator] 的特殊方法，该方法返回一个迭代器对象。
Iterators（迭代器）
迭代器是具有 next() 方法的对象，该方法返回一个带有两个属性的对象：
value—— 下一个元素的值done—— 布尔值，表示序列是否结束（true）或未结束（false）
让我们看一些使用的例子。
内置可迭代对象
JavaScript 有几个内置的可迭代对象，包括数组、字符串、Set 和 Map 对象。
示例 1: 遍历数组
JavaScript
const array = [1, 2, 3, 4, 5];
for (const item of array) {
console.log(item);
}
// 输出: 1 2 3 4 5
示例 2: 遍历字符串
JavaScript
const string = 'hello';
for (const char of string) {
console.log(char);
}
// 输出: h e l l o
1.2 创建自己的迭代器
你可以通过实现迭代协议来创建自己的迭代器，即创建 next() 方法。
示例 1: 创建迭代器
JavaScript
function createIterator(array) {
let index = 0;
return {
next: function() {
if (index < array.length) {
return { value: array[index++], done: false };
} else {
return { done: true };
}
}
};
}
const myIterator = createIterator([1, 2, 3]);
console.log(myIterator.next()); // { value: 1, done: false }
console.log(myIterator.next()); // { value: 2, done: false }
console.log(myIterator.next()); // { value: 3, done: false }
console.log(myIterator.next()); // { done: true }
创建可迭代对象
为了让对象成为可迭代的，它必须实现 [Symbol.iterator] 方法。对，这名字确实有点怪。看看怎么创建它。
示例 2: 创建可迭代对象
JavaScript
const myIterable = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
};
for (const value of myIterable) {
console.log(value);
}
// 输出: 1 2 3
1.3 内置方法
我们来看看用于处理可迭代对象的内置方法和运算符。
示例 1: 扩展运算符
扩展运算符（...）可以用来拷贝或合并可迭代对象。
JavaScript
const array = [1, 2, 3];
const newArray = [...array, 4, 5, 6];
console.log(newArray); // 输出: [1, 2, 3, 4, 5, 6]
示例 2: 解构赋值
解构赋值允许从可迭代对象中提取值。
JavaScript
const [first, second, third] = [1, 2, 3];
console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(third); // 输出: 3
示例 3: 方法 Array.from 和 Array.of
Array.from() 方法允许从可迭代对象创建数组。
JavaScript
const set = new Set([1, 2, 3, 4, 5]);
const array = Array.from(set);
console.log(array); // 输出: [1, 2, 3, 4, 5]
GO TO FULL VERSION