JavaScript 的 ES6（ECMAScript 2015）引入了许多新特性和语法糖，其中 Iterator 和 for...of 语句是其中一个重要的改进。它们提供了一种更加便捷和严谨的遍历数据结构的方法。本文将介绍如何使用 Iterator 和 for...of 语句，以及它们的优势和使用场景。
Iterator
Iterator 是一种设计模式，用于提供一种统一的接口，用于遍历不同的数据结构。在 ES6 中，Iterator 接口被标准化并成为了一个内置特性。在 JavaScript 中，只要实现了 Iterator 接口，就可以使用 for...of 语句轻松遍历它。
Iterator 接口需要实现一个 next 方法，该方法返回一个包含两个属性的对象。第一个属性是 value，表示当前遍历到的值；第二个属性是 done，表示是否已经遍历结束。Iterator 接口的实现方式非常简单，只需要在对象上添加 next 方法即可。
-- -------------------- ---- -------
----- ---------- - -
----- --------- --------- ----------
----- ---------- -
-- ----------- -- ----------------- -
------ ------- ---------- ----- ------
-
------ ------- ------------------------ ----- -------
--
------ -
--上面的代码展示了一个简单的 Iterator 接口的实现。我们可以使用 for 循环来遍历 myIterator 对象：
for (const value of myIterator) {
console.log(value);
}
// Output: apple banana orangemyIterator 对象已经实现了迭代器接口，因此我们可以使用 for...of 语句遍历它，输出了三个字符串。
for...of 语句
for...of 语句是一个循环语句，使用它可以遍历所有实现了 Iterator 接口的数据结构。for...of 语句和 for 循环、forEach 等迭代方式相比，具有以下优点：
- 遍历更加简洁且易读；
- 支持迭代字符串；
- 支持迭代 Set、Map 等集合类型；
- 支持迭代普通对象。
我们可以在数组、Map 和 Set 上使用 for...of 语句。
数组
const fruits = ['apple', 'banana', 'orange'];
for (const fruit of fruits) {
console.log(fruit);
}
// Output: apple banana orangeSet
const fruits = new Set();
fruits.add('apple');
fruits.add('banana');
fruits.add('orange');
for (const fruit of fruits) {
console.log(fruit);
}
// Output: apple banana orangeMap
const fruits = new Map();
fruits.set('apple', 1);
fruits.set('banana', 2);
fruits.set('orange', 3);
for (const [fruit, count] of fruits) {
console.log(`${fruit}: ${count}`);
}
// Output: apple: 1 banana: 2 orange: 3普通对象
遍历普通对象需要使用 Object.entries 方法将对象转换为一个键值对数组，然后再用 for...of 遍历该数组。
-- -------------------- ---- ------- ----- ------ - - ------ -- ------- -- ------- - -- --- ------ ------- ------ -- ----------------------- - ---------------------- ----------- - -- ------- ------ - ------- - ------- -
总结
使用 Iterator 和 for...of 语句能够使我们更加方便快捷地遍历不同的数据结构。通过实现 Iterator 接口，我们可以实现一种通用的遍历接口。for...of 语句可以遍历数组、Set、Map 和普通对象，使用起来非常简单。当我们需要遍历数据结构时，使用 Iterator 和 for...of 语句可以帮助我们提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e23539f6b2d6eab3d8640b