JavaScript 是一种弱类型、动态语言，其语法灵活、易于学习，因此在 Web 前端开发领域得到广泛的应用。随着 JavaScript 的不断发展，其语言特性也不断增强，其中迭代器和生成器是 ES6 新增的两种语言特性，在许多实际应用场景中具有非常重要的作用。本文将详细介绍 JavaScript 中迭代器和生成器的概念、用法以及示例代码，并从实践案例中总结出使用迭代器和生成器的最佳实践。
迭代器
迭代器是一种用于遍历集合元素的统一接口，它能够让开发者在不知道集合内部结构的情况下遍历集合元素。在 ES6 中，迭代器是通过定义 Symbol.iterator 方法来实现的，该方法返回一个迭代器对象。迭代器对象有一个 next() 方法，调用该方法就可以依次获取集合中的元素。
迭代器的基本用法
我们首先来看一个简单的例子，如下所示：
-- -------------------- ---- ------- ----- --- - ------ ------- ----- -------- - ----------------------- ----------------------------- -- ------- ---- ----- ------ ----------------------------- -- ------- ---- ----- ------ ----------------------------- -- ------- ---- ----- ------ ----------------------------- -- ------- ---- ----- ------ ----------------------------- -- ------- ---- ----- ------ ----------------------------- -- ------- - -- ----- ------ ----------------------------- -- ------- ---- ----- ------ ----------------------------- -- ------- ---- ----- ------ ----------------------------- -- ------- ---- ----- ------ ----------------------------- -- ------- ---- ----- ------ ----------------------------- -- ------- ---- ----- ------ ----------------------------- -- ------- ---------- ----- -----
上面的代码中，我们首先定义了一个字符串对象 str，然后使用 Symbol.iterator 方法获取到 str 的迭代器对象 iterator。接下来，我们通过 iterator.next() 方法依次获取到了 str 中的每一个字符。当 iterator.next() 返回的 done 属性为 true 时，表示遍历完了所有的元素。
自定义迭代器
在实际开发中，我们往往需要遍历实现了迭代器接口的自定义对象。为了实现这一点，我们需要在对象上定义 Symbol.iterator 方法，并且在该方法中返回一个可遍历的迭代器对象。
下面我们来看一个自定义迭代器的例子，在这个例子中，我们定义了一个 Range 对象，该对象实现了迭代器接口，并且可以通过 for-of 循环遍历。
-- -------------------- ---- -------
----- ----- -
------------------ ---- ----- -
---------- - ------
-------- - ----
--------- - -----
-
-------------------- -
--- ---- ---- - ----------- ---- - --------- ---- -- ---------- -
----- -----
-
-
-
----- ----- - --- -------- --- ---
--- ------ ---- -- ------ -
------------------
-上面的代码中，我们首先定义了一个 Range 类，该类定义了一个构造函数和一个迭代器方法。在迭代器方法中，我们使用 generator 函数实现了一个简单的遍历逻辑。接下来，我们创建了一个 Range 对象，并使用 for-of 循环遍历其中的元素，最终输出了 0，2，4，6，8 这几个数值。
生成器
生成器是一种可以生成迭代器的函数，它会将函数的执行暂停，并返回一个迭代器对象，通过该对象可以逐次获取函数中 yield 关键字后面的值。当生成器函数执行完毕后，迭代器对象的 done 属性为 true。
生成器的基本用法
我们首先来看一个简单的例子，如下所示：
-- -------------------- ---- ------- --------- ----------------- - ----- -- ----- -- ----- -- - ----- --- - ------------------ ------------------------ -- ------- -- ----- ------ ------------------------ -- ------- -- ----- ------ ------------------------ -- ------- -- ----- ------ ------------------------ -- ------- ---------- ----- -----
上面的代码中，我们定义了一个简单的生成器函数 simpleGenerator()，该函数使用 generator 关键字来定义。在函数中，我们使用 yield 关键字依次返回了三个数值。接下来，我们通过 simpleGenerator() 函数生成了一个迭代器 gen，并且通过 gen.next() 方法依次获取了函数中 yield 发出的三个数值。
生成器的高级用法
在实际开发中，我们常常需要在生成器函数内部执行一些异步操作，此时我们就可以使用 yield 和 Promise 结合来达到异步执行的效果。下面我们来看一个例子，在这个例子中，我们定义了一个 delay 函数，它会在指定的时间后返回一个 Promise，在生成器函数中，我们使用 yield 暂停函数的执行，并等待 delay 函数返回的结果。
-- -------------------- ---- -------
-------- --------- -
------ --- --------------- -- -
------------- -- -
----------
-- ----
---
-
--------- ---------------- -
----- ------------
---------------- ------ ---------
----- ------------
---------------- ------- ---------
----- ------------
------------------ ------- ---------
-
----- --- - -----------------
-------- ------------------ -
----- --------- - -----------
-- ---------------- -
-------
-
------ ----------------------- -- -
-------------------
---
-
-------------------在上面的代码中，我们使用 delay 函数和一个 asyncGenerator 生成器函数来实现异步延时操作，同时我们也创建了一个函数 iterateGenerator，该函数会不断调用 asyncGenerator 迭代器的 next() 方法，并等待 delay 函数的返回值。通过这种方式，我们可以实现异步操作的串联。
最佳实践
在实际开发中，我们可以将迭代器和生成器结合起来，从而提高代码的可读性和可维护性。下面我们来看一个例子，在这个例子中，我们使用生成器函数定义了一个迭代器，用于遍历一个数组中符合条件的元素。
-- -------------------- ---- -------
--------- ----------- ---------- -
--- - - --
----- -- - ----------- -
----- ----- - ---------
-- ------------------ -
----- ------
-
-
-
----- --- - --- -- -- -- -- ---
----- ------ - --------------- - -- - - - --- ----
-------------------- -- --- -- --上面的代码中，我们定义了一个 filter 生成器函数，该函数接收一个数组 arr 和一个用于匹配元素的 predicate 函数。在函数内部，我们使用 while 循环遍历数组中的所有元素，当元素满足 predicate 函数的条件时，我们就使用 yield 关键字返回该元素。在主函数中，我们通过 filter 生成器函数创建了一个迭代器，并通过 spread 号将返回的结果转换成了数组。最终，我们实现了一个简单的数组过滤器，并且将输出了 2，4，6 这几个数值。
总结
本文详细介绍了 JavaScript 中迭代器和生成器的概念、用法以及示例代码。通过实际案例，我们发现使用迭代器和生成器可以大大提高代码的可读性和可维护性，特别是在需要遍历不同类型数据结构的场景下，更显得方便快捷。同时，我们也借助这些案例，在实践中总结了一些使用迭代器和生成器的最佳实践，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64916f1c48841e9894f72212