在 ECMAScript 2015 (ES6) 中，引入了 for...of 循环语句，可以用来遍历可迭代对象。在 ECMAScript 2019 (ES10) 中，可迭代对象和迭代器的概念被正式纳入标准，并增加了一些新的方法和语法，使得遍历数据结构更加方便和灵活。
可迭代对象 (Iterable)
可迭代对象是指具有 Symbol.iterator 属性的对象，该属性是一个无参数函数，返回一个迭代器对象。迭代器对象必须包含一个 next 方法，该方法返回一个包含 value 和 done 两个属性的对象，value 表示当前迭代的值，done 表示是否迭代结束。
自定义可迭代对象
我们可以自定义一个可迭代对象，使其可以被 for...of 循环遍历。下面是一个自定义的可迭代对象示例：
// javascriptcn.com 代码示例
const myIterable = {
data: [1, 2, 3],
[Symbol.iterator]() {
let index = 0;
return {
next: () => {
if (index < this.data.length) {
const value = this.data[index++];
return { value, done: false };
} else {
return { done: true };
}
}
};
}
};
for (const item of myIterable) {
console.log(item);
}
// 输出：1 2 3在上面的示例中，我们定义了一个名为 myIterable 的对象，包含一个 data 属性和一个 Symbol.iterator 方法。Symbol.iterator 方法返回一个迭代器对象，该对象包含一个 next 方法，每次调用 next 方法返回一个包含当前值和是否迭代结束的对象。
内置可迭代对象
在 ECMAScript 2019 (ES10) 中，有一些内置的对象是可迭代的，包括数组、字符串、Set、Map 等。我们可以直接使用 for...of 循环遍历这些对象。
例如，遍历一个数组：
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}
// 输出：1 2 3迭代器 (Iterator)
迭代器是指具有 next 方法的对象，该方法返回一个包含 value 和 done 两个属性的对象。迭代器对象可以通过 Symbol.iterator 方法来获取，也可以自定义实现。
内置迭代器
在 ECMAScript 2019 (ES10) 中，内置的可迭代对象都实现了迭代器，我们可以通过调用 Symbol.iterator 方法来获取迭代器对象。
例如，获取一个数组的迭代器：
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { done: true }自定义迭代器
我们也可以自定义一个迭代器对象，让其可以被 for...of 循环遍历。
例如，自定义一个迭代器对象，用来遍历一个字符串的每个字符：
// javascriptcn.com 代码示例
const myIterator = {
str: 'hello',
next() {
if (this.index < this.str.length) {
const value = this.str[this.index++];
return { value, done: false };
} else {
return { done: true };
}
},
[Symbol.iterator]() {
this.index = 0;
return this;
}
};
for (const char of myIterator) {
console.log(char);
}
// 输出：h e l l o在上面的示例中，我们定义了一个名为 myIterator 的对象，包含一个 str 属性和一个 next 方法。next 方法每次返回一个包含当前值和是否迭代结束的对象。Symbol.iterator 方法返回迭代器对象本身，并将 index 属性初始化为 0。
使用 Iterable 和 Iterator 遍历数据结构
在 ECMAScript 2019 (ES10) 中，我们可以使用可迭代对象和迭代器来遍历数据结构。下面是一些常用的遍历方法：
使用 for...of 循环
for...of 循环可以遍历任何实现了可迭代协议的对象。例如，遍历一个数组的每个元素：
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}
// 输出：1 2 3使用 Array.from 方法
Array.from 方法可以将任何可迭代对象转换为数组。例如，将一个字符串转换为字符数组：
const str = 'hello'; const arr = Array.from(str); console.log(arr); // ['h', 'e', 'l', 'l', 'o']
使用 Spread Operator
Spread Operator (...) 可以将任何可迭代对象展开为一个数组。例如，将一个 Set 转换为数组：
const set = new Set([1, 2, 3]); const arr = [...set]; console.log(arr); // [1, 2, 3]
使用解构赋值
解构赋值可以从可迭代对象中提取值并赋值给变量。例如，从一个 Map 中提取键值对：
// javascriptcn.com 代码示例
const map = new Map([
['name', 'John'],
['age', 30]
]);
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}
// 输出：name: John age: 30使用 forEach 方法
forEach 方法可以遍历一个数组的每个元素，并对其执行指定的操作。例如，将一个数组的每个元素加倍并输出：
const arr = [1, 2, 3];
arr.forEach(item => {
console.log(item * 2);
});
// 输出：2 4 6总结
在 ECMAScript 2019 (ES10) 中，可迭代对象和迭代器的概念被正式纳入标准，使得遍历数据结构更加方便和灵活。我们可以自定义可迭代对象和迭代器，并使用 for...of 循环、Array.from 方法、Spread Operator、解构赋值、forEach 方法等多种方式来遍历数据结构。掌握 Iterable 和 Iterator 的使用方法，可以提高我们的编程效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6509a8c895b1f8cacd44ed44