Iterator 是 ES6 中新增加的一种遍历机制，它提供了一种统一的遍历访问数据的方法，可以对数据进行顺序访问，而不用考虑数据的内部结构。在 ES7 中，Iterator 进一步被加强，它现在成为了一种更加通用的迭代器，在许多 JS 库中使用广泛。
概述
Iterator 是一种对象，它定义了一种可以遍历数据的方式。通常情况下，我们使用它来遍历数组、集合、对象等数据类型。实际上，Iterator 还能够遍历许多其他类型的数据结构，例如二叉树、图等。 Iterator 遍历过程中有三个关键的方法：
next()：返回遍历器对象的下一个值。return(value)：停止遍历，并返回指定值。throw(exception)：遍历过程中抛出一个异常。
当 Iterator 完成遍历操作时，next() 方法会返回一个具有 done:true 属性的对象，表示遍历已经结束。否则，它会返回每个元素。
配合 ES6 的 for-of 循环语句，我们可以很方便的遍历数组、集合、对象等数据类型。
使用 Iterator 进行数组的遍历
Iterator 遍历一个数组的代码如下所示：
let arr = [1,2,3,4,5];
let iter = arr[Symbol.iterator]();
let result = iter.next();
while(!result.done) {
console.log(result.value);
result = iter.next();
}遍历完后会依次输出 1、2、3、4 和 5。
在 ES7 中，我们可以使用一种更加简洁的方式来遍历数组：
let arr = [1,2,3,4,5];
for(let x of arr) {
console.log(x);
}这种方式的语法更加简单明了，而且易于使用。
使用 Iterator 进行 Map 和 Set 的遍历
Map 和 Set 是 ES6 中新增加的两种数据结构，它们存储的是键值对，Map 中的键和 Set 中的元素是不重复的。 Iterator 遍历 Map 和 Set 的代码如下所示：
-- -------------------- ---- -------
--- --- - --- ------
-----------------
-----------------
-------------------
--- ---- - -----------------------
--- ------ - ------------
------------------- -
--- ----- ------ - -------------
--------------- - --- - -------
------ - ------------
-
--- --- - --- ------
---------------
---------------
-----------------
--- ------- - -----------------------
--- --------- - ---------------
---------------------- -
-----------------------------
--------- - ---------------
-遍历完后，Map 中的每个键值对和 Set 中的每个元素都会被输出。
在 ES7 中，我们可以使用一种更加简单的方式来遍历 Map 和 Set：
-- -------------------- ---- -------
--- --- - --- ------
-----------------
-----------------
-------------------
------- ----- ------ -- ---- -
--------------- - --- - -------
-
--- --- - --- ------
---------------
---------------
-----------------
------- - -- ---- -
---------------
-这种语法更加直观明了，使用更加方便。
Iterator 在 Generator 函数中的使用
Generator 函数是 ES6 新增加的一种语法，可以用于创造迭代器，并且改善异步编程的写法。 它会返回一个遍历器对象，并且每次遇到 yield 关键字就暂停执行，并返回 yield 后的表达式的值。每次执行遍历器的 next() 方法，就会从暂停的位置继续执行。
而 Iterator 在 Generator 函数中的使用，更加方便了遍历器的创建和使用。
Generator 函数的代码如下所示：
-- -------------------- ---- -------
--------- ----- -
--- - - -- - - --
----- ------ -
----- --
--- -- - --- - - ---
-
-
--- ---- - ------
--- ---- - - -- - - --- ---- -
-------------------------------
-这里我们定义了一个 Fibonacci 数列的 Generator 函数，然后使用遍历器的方式输出前 10 个数。
在 ES7 中，我们可以使用 for-await-of 循环语句来进行遍历，代码如下：
async function asyncFn() {
for await (let num of fib()) {
if (num > 20) break;
console.log(num);
}
}
asyncFn();这种表达方式更加简介，更好地体现了异步操作的特点，也更加符合现代前端开发的趋势。
结论
Iterator 是一种非常好用和重要的遍历机制，在 ES7 中，它更加通用，更加方便，使用起来也更加简单明了。它是现代前端开发不可或缺的一部分。因此，我们需要学习掌握它的相关知识，并且在实际开发中善于使用它，以提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f4d35ac5c563ced565b108