迭代器和生成器是 ECMAScript 2015 引入的新特性之一，它们为操作数据提供了全新的方式。在 ECMAScript 2016 中，迭代器和生成器得到了更多的改进和提升，成为了使用的重要工具。本文将详细介绍迭代器和生成器的特性，并给出一些实用的例子和指导建议。
什么是迭代器？
迭代器是一种可以遍历数据的对象。它提供了一种访问数据元素的方式，而不需要了解底层实现。在 ECMAScript 中，迭代器通常实现了 Iterator 接口，包括两个方法：next() 和 return()。其中，next() 方法用于返回序列中的下一个值，而 return() 方法用于结束迭代器。迭代器还可以选择性地实现一个 done 属性，表示是否已经遍历结束。
下面是一个迭代器的示例：
const numbers = [1, 2, 3, 4, 5];
const iterator = numbers[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: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: undefined, done: true }在上面的示例中，我们首先将一个数组赋给了一个变量 numbers，然后使用 Symbol.iterator 方法获取到其默认的迭代器。接着，我们调用了迭代器的 next() 方法多次，依次遍历了数组中的所有元素。最后，我们再次调用 next() 方法，返回一个包含 undefined 值和 done 标志位的对象，表示迭代结束。
在 ECMAScript 2016 中，迭代器得到了更多的增强，其中包括 for...of 循环和扩展操作符。下面是一个 for...of 循环的例子：
const numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
console.log(number);
}在这个例子中，我们使用了 for...of 循环直接遍历数组中的每一个元素，这样可以更加简洁地实现迭代操作。
什么是生成器？
生成器是一种可以自定义迭代器的函数，它可以暂停自己的执行，并随时恢复执行，从而动态地生成序列数据。在 ECMAScript 中，生成器通过 function* 声明，在函数内部使用 yield 关键字来产生数据。生成器可以返回一个可迭代对象，包含一个迭代器，可以被外部调用 next() 方法控制生成器函数的执行流程。
下面是一个生成器的示例：
-- -------------------- ---- -------
--------- ----------------- -
--- ------ - --
----- ------- -- -- -
----- ---------
-
-
----- -------- - ------------------
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ ---------- ----- ---- -在上面的示例中，我们定义了一个生成器函数 numberGenerator，它使用 yield 关键字产生 1-5 的数据。在调用这个函数之前，我们需要使用生成器函数来创建一个迭代器对象，并使用 next() 方法依次获取每一个产生的数据。
在 ECMAScript 2016 中，生成器得到了更加强大的增强，其中包括异步操作和带参数的生成器。这些增强使得使用生成器更加方便和灵活。
如何使用迭代器和生成器？
在实际的开发中，我们可以使用迭代器和生成器来更加优雅地处理数据和流程控制。下面是几个实用的例子：
1. 使用迭代器和 for...of 循环来遍历 Map 对象
Map 是 ECMAScript 中的一种新数据类型，它提供了一种键值对的存储方式。为了遍历 Map 中的元素，我们可以使用其默认的迭代器，并使用 for...of 循环来遍历所有的键值对。
-- -------------------- ---- ------- ----- --- - --- ----- -------- ------- ------- ---- ---------- ------- --- --- ---- ----- ------ -- ---- - -------------------- ----------- -
在这个例子中，我们首先定义了一个 Map 对象，包含了名字、年龄和性别三个键值对。然后，我们使用 for...of 循环遍历这个 Map 对象，输出每一个键值对的信息。
2. 使用生成器来实现异步操作
在 ECMAScript 2016 中，我们可以使用生成器和 Promise 来实现更加简单和直观的异步操作方式。下面是一个使用生成器和 Promise 实现异步操作的例子：
-- -------------------- ---- -------
-------- --------------- -
------ --- --------------- -- ------------------- -----------
-
--------- ------ -
----------------- ----------
----- ------------
----------------- ----------
----- ------------
----------------- ------------
-
----- -------- - -------
--- ------ - ----------------
-------------------- -- -
------ - ----------------
-------------------- -- -
----------------
---
---在这个例子中，我们定义了一个生成器函数 task，包含了三个步骤。每个步骤都是一个 Promise，表示异步操作，使用 yield 关键字将 Promise 对象返回给调用者。在调用生成器函数之前，我们可以使用 Promise 的链式调用方式来依次运行每个步骤。
3. 使用生成器和带参数生成器来实现简单的状态机
状态机是一种常见的程序设计模式，它将应用状态和状态之间的转换封装成独立的对象，容易理解和管理。在 ECMAScript 2016 中，我们可以使用迭代器和带参数生成器来实现简单的状态机，并将状态之间的变化封装到生成器函数中。
下面是一个状态机的示例：
-- -------------------- ---- -------
--------- -------------- -
--- ----- - -------
----- ------ -
------ ------- -
---- -------
-------------------- -- ---- --------
----- - ----- --------
------
---- ----------
-------------------- -- ------- --------
----- - ----- -------
------
--------
----- - -------
------
-
-
-
----- -------- - ---------------
----------------------------- -- - ------ -------- ----- ----- -
-------------------------------------- -- - ------ ------- ----- ----- -
----------------------------- -- - ------ -------- ----- ----- -在这个例子中，我们定义了一个状态机的生成器函数 stateMachine。在这个函数中，我们使用 while 循环不断地检查当前的状态，并使用 switch...case 语句来处理状态之间的转换。在每一步中，我们都使用 yield 关键字返回下一步的状态，并等待外部调用器调用 next() 方法，控制状态机的执行。
总结
迭代器和生成器是 ECMAScript 2015 引入的新特性之一，它们为操作数据提供了全新的方式。在 ECMAScript 2016 中，迭代器和生成器得到了更多的改进和提升，成为了使用的重要工具。本文详细介绍了迭代器和生成器的特性，并给出了一些实用的例子和指导建议，希望能够对读者有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b272a848841e9894ea9a7a