在 ES6 中，Iterator 和 Generator 是两个非常重要的特性，它们可以让我们更好地处理数据和控制流程。在这篇文章中，我们将深入理解 Iterator 和 Generator，探讨它们实现的原理、用例以及如何使用它们提高我们的编码能力。
Iterator 的实现原理
Iterator 是一个统一的接口，它定义了遍历数据的方式。在 ES6 中，所有的集合类型（例如数组、字符串、Map 和 Set）都可以使用 Iterator 接口进行遍历。
Iterator 接口主要包含两个方法：next 和 return。next 方法用于返回下一个值，包括一个 value 属性和一个 done 属性；return 方法用于中止遍历，并返回一个指定的值。当遍历结束时，done 属性为 true，value 属性为 undefined。
例如，我们可以通过遍历数组来深入了解 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()); // { value: undefined, done: true }在这个例子中，我们使用数组的 Symbol.iterator 属性获取迭代器对象 iterator，然后依次打印每个元素的返回值。可以看到，每次调用 next 方法，都会返回一个对象，包括当前元素的 value 和 done 状态。
Generator 的实现原理
Generator 是 ES6 中新增的语法，它可以让我们更好地控制函数的执行流程。Generator 函数定义时使用星号（*）标示，函数体内部使用 yield 关键字暂停执行，并返回一个值，下次再次调用时从上次暂停的地方恢复执行，直到函数执行完毕或遇到 return 语句。
例如，我们可以通过一个简单的 Generator 函数来了解它的用法：
-- -------------------- ---- ------- --------- ------------------ - --------------------- ----- -- ---------------------- ----- -- ------------------- ------ -- - ----- --------- - ------------------- ------------------------------ -- - ------ -- ----- ----- - ------------------------------ -- - ------ -- ----- ----- - ------------------------------ -- - ------ -- ----- ---- - ------------------------------ -- - ------ ---------- ----- ---- -
在这个例子中，我们定义了一个包含三个 yield 语句和一个 return 语句的 Generator 函数。当执行 exampleGenerator 函数时，函数内部的控制流程会根据每次调用 next 方法来进行暂停和恢复。其中，第一次调用 next 方法会执行函数内部的 console.log('start') 语句，然后返回一个 { value: 1, done: false } 的对象，即函数第一个 yield 的返回值。
Iterator 和 Generator 的用例
Iterator 和 Generator 都是非常强大的特性，它们的应用场景非常广泛。下面是一些常见的使用场景：
遍历数据
Iterator 可以让我们更方便地遍历数据，减少代码的冗余度。例如，我们可以使用 Generator 函数来遍历二叉树：
-- -------------------- ---- -------
----- ---- -
------------------ -
---------- - ------
--------- - -----
---------- - -----
-
-
--------- -------------- -
-- ----- --- ----- -
-------
-
------ --------------------
----- -----------
------ ---------------------
-
----- ---- - --- --------
--------- - --- --------
---------- - --- --------
----- -------- - ---------------
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ ---------- ----- ---- -在这个例子中，我们定义了一个二叉树，并使用 Generator 函数 traverse 来遍历这个树。使用 yield* 可以遍历子树，使用 yield 来返回当前节点的值。
异步编程
Generator 函数可以让我们更好地控制异步流程。通过 yield 暂停函数的执行，我们就可以在异步函数内部执行一些操作，并在操作完成后恢复函数的执行。例如，我们可以使用 Generator 函数来实现 Promise 的链式调用：
-- -------------------- ---- -------
--------- --------- -
----- ------ - ----- --- ----------------- ------- -- -
------------- -- ----------- ------
---
----- ------ - ----- --- ----------------- ------- -- -
------------- -- -------------- - --- ------
---
--------------------
-
----- --------- - ----------
----- -- - -----------------------
------------- -- ----------------------------
----------- -- -----------------------在这个例子中，我们定义了一个 Generator 函数 process，里面包含两个异步操作。我们可以使用 yield 来暂停函数的执行，然后在异步操作完成后恢复函数的执行。在这个例子中，第一个操作需要等待 1 秒钟后才返回一个值，第二个操作则是在第一个操作的基础上继续执行。
生成代码
Generator 函数还可以用来生成一些复杂的代码。例如，我们可以使用 Generator 函数来实现一个类似 Promise.all 的函数：
-- -------------------- ---- -------
--------- --------------- -
----- -------- - ------------ -- ------
--- ------ - -- --------- -
----- --
-
-
----- ----- - -
-- -- --- ----------------- ------- -- -
------------- -- ----------- ------
---
-- -- --- ----------------- ------- -- -
------------- -- ----------- ------
---
-- -- --- ----------------- ------- -- -
------------- -- ----------- ------
---
--
--- ------ - -- ---------------- -
------------ -- --------------------
-在这个例子中，我们定义了一个 Generator 函数 parallel，它接受一个任务数组作为参数。在 parallel 函数内部，我们使用 yield 来暂停函数的执行，然后依次返回每个任务。外部通过 for-of 循环来依次执行每个任务，并输出返回值。
总结
Iterator 和 Generator 是 ES6 中非常重要的特性，它们可以让我们更好地控制数据和流程。通过深入了解 Iterator 和 Generator，我们可以更好地理解它们的实现原理以及应用场景，从而提高我们的编码能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645498d9968c7c53b086e7d3