前言
在 JavaScript 中，Iterator 和 Generator 是两个非常重要的概念，它们可以帮助我们更好地处理各种数据类型。本文将详细介绍 Iterator 和 Generator 的概念、用法以及一些常用的技巧和注意事项。
Iterator
概念
Iterator 是一种遍历数据集合的机制，它可以在数据集合上提供统一的访问方法，无需关心底层数据结构的细节。通常我们使用 for...of 循环来遍历一个数组或者一个类似数组的对象，而 for...of 循环实际上就是基于迭代器实现的。
在 JavaScript 中，Array、Map、Set、String、TypedArray、arguments 等都是内置的可迭代对象，而我们也可以创建自己的可迭代对象，只需要实现 Symbol.iterator 方法并返回一个迭代器对象即可。
实现一个迭代器
要实现一个迭代器，我们需要创建一个对象，并且在对象上实现一个 Symbol.iterator 方法，返回一个迭代器对象，迭代器对象上实现了 next 方法，每次调用 next 方法都会返回一个包含 value 和 done 两个属性的对象。
下面是一个简单的可迭代对象的实现示例：
-- -------------------- ---- -------
----- ---------- - -
------------------ --------- -- -
----- --
----- --
----- --
-
--
--- ---- ----- -- ----------- -
------------------- -- -- -- -
-在上面的例子中，我们将一个对象定义为一个可迭代对象，迭代器对象的实现方式是使用生成器函数，通过 yield 关键字返回每个值，for...of 循环会迭代调用迭代器对象的 next 方法，直到 done 属性为 true。
迭代器和 Generator 的区别
在上面的例子中，我们使用生成器函数来实现迭代器对象，这是因为生成器函数回自动创建一个迭代器对象，但是也可以直接使用一个对象来实现一个迭代器对象，对象上实现了 next 方法即可。
Generator 是 ES6 新增的一个特性，它是一种特殊的函数，通过 yield 关键字可以实现在函数执行的过程中暂停执行，将函数执行权转交给生成器对象的调用者，生成器对象也具有迭代器对象的特性，可以通过 next 方法来取出生成器函数中的值。
下面是一个简单的 Generator 函数的示例：
-- -------------------- ---- ------- --------- ------------- - ----- -- ----- -- ----- -- - ----- --- - -------------- ------------------------------ -- - ------------------------------ -- - ------------------------------ -- -
在上面的例子中，我们定义了一个 Generator 函数，通过 yield 关键字返回每个值，每次调用 next 方法都会返回一个包含 value 和 done 两个属性的对象。
迭代器与循环的应用
在日常开发中，我们经常需要遍历数组、对象等数据结构，可以使用 for 循环、forEach、for...in 等方式来进行迭代操作，但是这些方式都存在一些局限性，无法满足我们一些复杂的需求。
实现一个可中断的迭代器
在实际开发中，我们可能需要在迭代过程中暂停执行，然后根据一些条件来决定是否继续迭代，如果继续迭代，则需要恢复之前的状态，这时可以使用迭代器来解决这个问题。
下面是一个简单的可中断的迭代器示例：
-- -------------------- ---- -------
--------- -------------------------- ---- -
--- ---- - - ------ - -- ---- ---- -
----- --
-
-
----- --- - ---------------------- ----
--- ------ - ------
----- ---------------- --- ---- -- -------- -
----- ----- - -----------------
-------------------
-- ------ --- -- -
------ - -----
-
-在上面的例子中，我们定义了一个生成器函数，通过 yield 关键字返回 start 到 end 数之间的值，然后我们使用一个 while 循环来遍历它，并根据 value 的值来决定是否中断迭代，这样就可以实现一个可中断的迭代器。
Generator
概念
Generator 是一个函数，它可以通过 yield 关键字实现在函数执行过程中暂停执行，返回执行权给调用者，并且可以在下一个调用时继续执行，它也具有迭代器对象的特性，可以通过 next 方法来取出函数中的值。
实现一个 Generator 函数
要实现一个 Generator 函数，我们需要使用 function* 关键字来定义一个 Generator 函数，然后通过 yield 关键字来返回每个值，调用 Generator 函数会返回一个生成器对象，这个对象可以通过 next 方法来取出 Generator 函数中的值。
下面是一个简单的 Generator 函数的示例：
-- -------------------- ---- ------- --------- ------------- - ----- -- ----- -- ----- -- - ----- --- - -------------- ------------------------------ -- - ------------------------------ -- - ------------------------------ -- -
在上面的例子中，我们定义了一个 Generator 函数，通过 yield 关键字返回每个值，然后我们调用这个函数得到一个生成器对象，然后可以通过 next 方法来取出值。
Generator 和 Promise 的区别
在 ES6 中，Promise 是另一个非常重要的特性，它可以帮助我们处理异步操作，而 Generator 也可以实现异步操作，那么它们之间的区别是什么呢？
Promise 是一个可以异步处理操作并返回结果的对象，它通过 then 和 catch 方法来处理异步操作的结果，而 Generator 则是一种通过 yield 关键字实现暂停和恢复的函数，它可以通过 next 方法来迭代执行，并返回每次调用的结果值。
在实际开发中，我们可以根据具体的需求来选择使用 Promise 或者 Generator。
异步任务调用
由于 Generator 可以暂停执行，因此它也可以用来实现异步任务的调用，例如在一个网络请求的回调中需要处理很多逻辑，可以使用 Generator 函数来进行处理。
下面是一个简单的异步任务调用的示例：
-- -------------------- ---- -------
--------- ------------- -
----- ----- - ----- --------------------
----- ----- - ----- --------------------
----- ----- - ----- --------------------
------------------ ------ -------
-
-------- ----------------- -
----- - - ------
----- ---- - ------- -- -
----- ------ - --------------
-- ------------- -
-------
-
------------------------- -- -
------------
---
--
-------
-
--------------------------在上面的例子中，我们定义了一个 Generator 函数，它通过 yield 关键字来执行异步任务，然后我们使用一个 runGenerator 函数来调用这个生成器，每次调用 next 方法都会返回一个 Promise 对象，等异步任务完成之后在调用 next 函数进行下一步操作，直到 Generator 函数执行完成。
总结
本文详细介绍了 Iterator 和 Generator 的概念和用法，并给出了一些常用的技巧和注意事项，希望可以帮助大家更好地理解和使用这两个非常重要的概念。在实际开发中，我们应该根据具体的需求来选择使用迭代器或者生成器，并且应该注意一些常见的问题和注意事项，例如如何实现一个可中断的迭代器、如何正确地处理异步操作等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644ffe62980a9b385b931cdd