在 JavaScript 中，异步编程一直是一个令人头疼的问题。ES6 引入了迭代器和生成器这两个新特性，可以帮助我们更轻松、可读性更高地处理异步操作。
迭代器
迭代器是一种 JavaScript 对象，用于定义一种如何访问数据的协议。它包含一个 next() 方法，每次调用该方法可以返回数据集合中的下一项。如果到达了最后一个数据项，则返回的对象包含 done: true 属性。
迭代器可以让我们不必知道整个数据集合的结构，而是以一种基于需求的方式逐个获取数据项。这种方式非常适合处理异步数据源中的数据集合。
迭代器的定义是一个带有 Symbol.iterator 属性的对象。Symbol.iterator 是一个内置的符号类型，用于标识一个可迭代的对象。它的值是一个返回迭代器对象的函数。
以下是一个迭代器的示例：
-- -------------------- ---- ------- ----- ------- - --- -- -- -- --- ----- -------- - --------------------------- ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ ---------- ----- ---- -
上面的代码中，我们调用了数组对象 numbers 的迭代器方法 Symbol.iterator()，获得了一个迭代器对象 iterator。然后，我们使用 next() 方法逐个访问了数组中的元素，直到最后一个元素 5，此时返回的对象的 done 属性为 true。
生成器
生成器是能够生成迭代器的函数。它由 function* 关键字开头，可以使用 yield 关键字来暂停函数的执行，并返回一个值。
生成器允许我们在函数外部控制其执行流程，从而实现对异步操作的更灵活的处理。我们可以在生成器中指定何时进行异步操作，何时获取异步操作的结果，同时保证代码的可读性。
以下是一个简单的生成器示例：
-- -------------------- ---- ------- --------- --------------------- - ----- -------- ----- -------- ------ ------------ - ----- --------- - ---------------------- ------------------------------ -- - ------ -------- ----- ----- - ------------------------------ -- - ------ -------- ----- ----- - ------------------------------ -- - ------ ------------ ----- ---- -
上面的代码中，我们定义了一个生成器函数 helloWorldGenerator()，其中包含了两个 yield 语句和一个 return 语句。我们使用 next() 方法获取生成器中的值，每次调用都将执行一次 yield，返回一个值并暂停函数的执行。最后，当结束条件满足时，生成器将返回一个包含 value 和 done 属性的对象。
异步处理
利用迭代器和生成器，我们可以非常方便地处理异步操作。以下是一个使用生成器处理异步操作的示例：
-- -------------------- ---- -------
-------- --------- -
------ --- --------------- -- ------------------- -----
-
--------- ---------------- -
----- ------- - ----- ------------------- -- -------
----- ------- - ----- ------------------- -- -------
------ ----------- ------------
-
----- -------- --------------- -
----- --------- - -----------------
--- ------ - -----
--- --------- - -----------------
----- ----------------- -
----- ----- - ----------------
-- ------- ---------- --- ----------- - -- -------
----- ------------ -- ------ - ---
- ---- - -- -------
------ - ------
-
--------- - -----------------------
-
------ ----------------
-
---------------------------------- -- --- ---在上面的示例中，我们定义了一个异步生成器 asyncGenerator()。每次调用时，它会依次等待 1 秒再返回值。我们定义了一个异步函数 asyncFunction()，用于执行生成器中的异步操作。在函数中，我们使用 while 循环遍历生成器，并在每个值上调用 THEN() 方法。如果值是一个异步操作，我们使用 await 关键字等待其完成，如果值是一个同步操作，我们直接获得其结果。最后，我们将最终结果返回。
总结
ES6 中引进的迭代器和生成器可以帮助我们更轻松地处理异步操作。通过使用生成器，我们可以实现代码中断和重新开始执行的功能，在处理异步代码时非常方便和有效。当我们需要对异步数据集合进行迭代时，可以使用迭代器实现基于需求的操作。对于初学者来说，这两个特性可能有一定的学习曲线。但是学会了它们，我们就可以写出更干净、可读性更高的异步代码了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6587ef27eb4cecbf2dd201eb