ES6（ECMAScript 6）是 JavaScript 编程语言的最新标准，其中包含了一些非常有用的新特性，其中包括 Iterator 和 Generator。在本文中，我们将深入探究这两个新特性的定义、用法和应用场景。
Iterator 的定义及用法
在 JavaScript 中，Iterator 是一种接口，可以用于遍历数据集合中的元素。这种接口提供了一种通用的方法，可以使得数据结构成员按照一定的次序来访问。Iterator 接口的定义如下：
interface Iterator {
next(): IteratorResult;
}通过上述定义可以看出，Iterator 接口只包含一个 next 方法，该方法返回一个格式为 { value: any, done: boolean } 的对象，其中 value 表示当前元素的值，done 值为 false 表示还有更多的元素待访问，done 值为 true 则表示当前访问已经结束。
以下是一个简单的迭代器实现为例：
-- -------------------- ---- -------
-------- ----------------- -
--- --------- - --
------ -
----- ---------- -
------ --------- - ---------- -
- ------ ----------------- ----- ----- - -
- ----- ---- --
-
--
-
--- -- - ------------------ ---- ------
----------------------------- -- ---
----------------------------- -- ---
----------------------------- -- ---
---------------------------- -- ----可以看出，在该例子中，我们实现了一个简单的迭代器，能够对输入的数组进行遍历并返回其元素。这个迭代器仅仅是一个对象，其中包含了 next 方法。在 next 方法中，当当前元素未访问完时，done 的值为 false 并返回当前元素值，当元素全部访问完时，done 的值为 true 并返回结束标识。
Generator 的定义及用法
Generator 是 ES6 中的另一种新特性，它是一类特殊的函数，用 * 来表示。通过 yield 关键字，生成器函数能够更加灵活地控制函数的执行流程。Generator 函数的定义如下：
function* generator() {
// ...
yield value;
// ...
return result;
}在上述的定义中，Generator 函数中使用 yield 关键字（类似于 return），但它可以在函数执行过程中暂停代码的执行，并且可以保存函数执行上下文。在执行 next() 方法时，代码会从 yield 关键字处继续执行，因此也可以说，Generator 函数使得函数执行可以被分割成多个阶段，函数执行状态可以被中途暂停和恢复。
以下是一个简单的 Generator 函数的示例：
-- -------------------- ---- -------
--------- ----------- -
---------------------
----- --
----------------------
----- --
-------------------
-
--- - - ------------
---------------------- -- - ------ -- ----- ----- -
---------------------- -- - ------ -- ----- ----- -
---------------------- -- - ------ ---------- ----- ---- -由上述示例可见，Generator 函数可以被多次执行，当 Generator 函数执行时，它不会直接执行函数体内的代码，而是返回一个迭代器对象。每次调用 next 方法都会返回 { value: any, done: boolean } 格式的对象，并且从上一个 yield 语句的位置继续执行代码，直到下一个 yield 语句或函数结束为止。
应用场景
在实际开发中，Iterator 和 Generator 有很多应用场景。以下是一些常见的应用场景：
1. 遍历数据集合
Iterator 可以用来遍历数据集合，包括数组、Map、Set 等数据结构，因为它们都实现了 Iterator 接口。使用 for...of 循环也是基于 Iterator 实现的。例如，遍历一个数组：
let arr = [1, 2, 3]; let it = arr[Symbol.iterator](); console.log(it.next().value); // 1 console.log(it.next().value); // 2 console.log(it.next().value); // 3
这里我们调用了 arr[Symbol.iterator]() 来获取数组的迭代器对象，通过 next 方法不断获取数组元素。
2. 控制异步流
通过 Generator 函数可以非常方便地控制异步流程。基于 Generator 函数的异步控制源于 yield 关键字可以暂停函数的执行，等待异步操作完成后，再恢复函数的执行。下面是一个简单的示例：
-- -------------------- ---- -------
--------- ------ -
--- ------ - ----- --- --------------- -- ------------- -- ----------- -------
--------------------
--- ------ - ----- --- --------------- -- ------------- -- ----------- -------
--------------------
------ ------ - -------
-
--- - - -------
------------------------- -- -
------ ------------------
------------- -- -
------ ------------------
------------- -- -
----------------- -- -
---在上述代码中，我们通过 Generator 函数 test 控制了异步流。当执行到 yield new Promise 语句时，代码暂停，等待 Promise 执行完后再恢复该函数的执行。在上面的例子中，我们使用了 Promise 来模拟异步操作。
3. 控制并发流
通过异步控制，我们也可以很容易地控制并发流程。例如，我们希望它们并行执行，而不是依次执行，可以将调用异步操作的代码封装成一个 Promise 并发执行：
-- -------------------- ---- -------
--------- ------ -
--- --------- -------- - ----- -------------------------- ---------------
-------------------- ---------
-
-------- ------------ -
------ --- --------------- -- ------------- -- ----------- -------
-
-------- ------------ -
------ --- --------------- -- ------------- -- ----------- -------
-
--- - - -------
---------------------- -- -
------ ---------------
---在上述代码中，我们利用 Generator 函数控制两个异步任务的并行执行，最后打印其执行结果。
总结
本文中，我们详细介绍了 ES6 中 Iterator 和 Generator 的定义、用法及应用场景，并通过代码示例生动形象地展现了它们的强大功能。在实际开发中，它们可以用于数据集合的遍历、异步流程的控制、并发流程的控制等多种场景，为我们的开发工作带来了更多的便捷和灵活性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d2f288c2909a654f850712