ES7 引入了 Iterator 接口与 for...of 循环，这两个新特性提供了更为灵活、高效的遍历方法。本文将详细介绍 Iterator 和 for...of 循环的使用方法及其优缺点，同时提供实际的使用示例。
什么是 Iterator
Iterator 是一种机制，用于为对象提供统一的遍历接口。具体来说，Iterator 对象必须实现一个 next 方法，用于返回当前遍历位置的数据，并将遍历位置移动到下一项。当 next 方法返回的对象中的 done 属性为 true 时，表示遍历结束。
在 ES6 中，对数组和字符串进行遍历可以使用 for...of 循环，而对于其他数据结构，需要手动实现 Iterator 方法，并使用 for...of 或者解构赋值等语法进行遍历。
以下是一个实现 Iterator 的例子：
-- -------------------- ---- -------
----- ---------- -
----------------- -
---------- - --
--------- - -----
-
------ -
-- ----------- - ----------------- -
------ - ------ ------------------------ ----- ----- --
-
------ - ------ ---------- ----- ---- --
-
-在这个例子中，MyIterator 类实现了一个 next 方法，在每次迭代中获取下一个数据项。
for...of 循环
for...of 循环是一种新的循环语法，它可以遍历任何实现了 Iterator 接口的数据结构。
for...of 循环的语法结构如下：
for (let value of iterable) {
// ...
}其中 iterable 是要被遍历的数据结构，value 表示当前遍历位置的值。
以下是一个使用 for...of 循环遍历字符串的例子：
let str = "hello";
for (let char of str) {
console.log(char); // h e l l o
}与其他遍历方式的比较
在 ES5 中，我们通常使用 for 循环 或者 forEach 方法来遍历数组，使用 for...in 循环遍历对象属性。这些方法在一定程度上有缺点，而 for...of 循环则提供了更加灵活、高效的遍历方式。
for 循环
使用 for 循环遍历数组时，需要手动遍历每一个元素，并在循环体内根据索引获取对应的值。
let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); // 1 2 3
}缺点：需要手动管理循环索引，并且不能直接遍历对象属性。
forEach 方法
forEach 方法可以遍历数组，但是它不能使用 break 和 continue 等跳出循环的语句。
let arr = [1, 2, 3];
arr.forEach(function(value) {
console.log(value); // 1 2 3
});缺点：不能使用 break 和 continue 语句，无法在循环体内控制循环流程。
for...in 循环
使用 for...in 循环遍历对象属性时，会遍历对象的所有可枚举属性，甚至包括原型链上的属性。
let obj = {a: 1,b: 2,c: 3};
for (let key in obj) {
console.log(key, obj[key]); // a 1 b 2 c 3
}缺点：无法直接遍历数组，遍历对象属性时可能遍历到原型链上的属性。
实际应用
除了遍历基本数据结构外，Iterator 和 for...of 循环还可以应用于许多复杂的数据结构和算法，如图遍历、树遍历、生成器和 Promise 等。
以下是一个使用 Generator 函数实现斐波那契数列的例子：
-- -------------------- ---- -------
--------- ----------- -
--- - - --
--- - - --
----- ------ -
--- ---- - - - --
- - --
- - -----
----- --
-
-
--- ---- - ------------
--- ---- - - -- - - --- ---- -
------------------------------- -- - - - - - -- -- -- -- --
-总结
ES7 中引入的 Iterator 和 for...of 循环，提供了更加灵活、高效的数据遍历方式，可以用于遍历任何实现了 Iterator 接口的数据结构。除了基本数据结构外， Iterator 和 for...of 循环还可用于图遍历、树遍历、生成器和 Promise 等。
对于开发者来说，理解 Iterator 和 for...of 循环的使用方法和优缺点，可以帮助我们更加高效地遍历数据结构，提升代码的质量和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64845b4c48841e98943711cc