在 ES6 中，迭代器是指一种能够提供一个有序序列访问接口的对象。而生成器则是一个更具有可定制性和弹性的迭代器，它允许我们通过编写简单的函数来快速创建迭代器。
本文将介绍 ES6 中使用迭代器和生成器的基本概念、使用方法以及注意事项，帮助读者更好地掌握这个重要的功能。
迭代器基础
迭代器并不是 ES6 中新增的概念，早在 ES5 中就已经存在了。在 ES5 中，我们可以通过实现 next 方法来创建一个迭代器：
-- -------------------- ---- -------
--- ------- - --- -- -- -- ---
--- -------- - -
------ --
----- ---------- -
-- ----------- - --------------- -
------ - ------ ---------------------- ----- ----- --
- ---- -
------ - ----- ---- --
-
-
--
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ----- ---- -在 ES6 中，我们可以使用 Symbol.iterator 来创建迭代器。一个实现了 Symbol.iterator 方法的对象会被视为可迭代的，可以使用 for-of 循环进行遍历：
-- -------------------- ---- -------
--- ------- - --- -- -- -- ---
--- -------- - -
------ --
------------------ ---------- -
------ -
------ --
----- ---------- -
-- ----------- - --------------- -
------ - ------ ---------------------- ----- ----- --
- ---- -
------ - ----- ---- --
-
-
-
-
--
--- ---- ---- -- --------- -
------------------
-
-- -
-- -
-- -
-- -
-- -上面的代码中，我们返回了一个实现了 next 方法的对象，它的结构和 ES5 中的迭代器实现是一致的，只不过我们把它封装在了 Symbol.iterator 方法中。
需要注意的是，如果我们想要使用 for-of 循环遍历一个对象，它必须实现了 Symbol.iterator 方法。否则，这个对象将不会被视为可迭代的。
生成器基础
生成器可以看作是一种特殊的函数，它允许我们通过编写简单的代码来快速创建迭代器。生成器使用 function* 句法来定义，其中包含了一个或多个由 yield 语句组成的代码块。
下面是一个简单的生成器示例，它会生成一个从 1 开始，每次自增 1 的无限循环序列：
-- -------------------- ---- -------
--------- ---------- -
--- - - --
----- ------ -
----- ----
-
-
--- -------- - -----------
----------------------------------- -- -
----------------------------------- -- -
----------------------------------- -- -
----------------------------------- -- -和迭代器一样，我们可以使用 Symbol.iterator 方法来将生成器视为可迭代的对象：
-- -------------------- ---- -------
--------- ---------- -
--- - - --
----- ------ -
----- ----
-
-
--- -------- - -
------------------ --------
--
--- ---- ---- -- --------- -
-- ----- - -- -
------
-
------------------
-
-- -
-- -
-- -
-- -
-- -注意，在上面的代码中，我们直接将 infinite 函数作为 Symbol.iterator 方法的返回值。这里我们不需要显式地创建一个新的对象。
生成器的高级用法
生成器提供了很多高级用法，例如可以使用 yield* 语句来代理对另一个迭代器或生成器的访问：
-- -------------------- ---- ------- --------- ---------- - ------ --- -- --- ------ ------ ------ --- -- --- - --- -------- - ----------- ----------------------------------- -- - ----------------------------------- -- - ----------------------------------- -- - ----------------------------------- -- --- ----------------------------------- -- --- ----------------------------------- -- --- ----------------------------------- -- - ----------------------------------- -- - ----------------------------------- -- -
在上面的代码中，我们定义了一个 generate 函数，它使用了三个 yield* 语句来代理对不同序列的访问。执行 generate 函数会产生一个包含了所有序列元素的迭代器。
另外，我们还可以使用 return 语句来终止生成器的执行并返回一个值：
-- -------------------- ---- ------- --------- ---------- - ----- -- ----- -- ------ -- ----- -- - --- -------- - ----------- ----------------------------------- -- - ----------------------------------- -- - ----------------------------------- -- - ---------------------------------- -- ----
在上面的代码中，我们使用了 return 语句来终止了生成器的执行，并返回了一个值。在调用 next 方法时，done 属性会变成 true，表示生成器已经结束。
总结
本文介绍了 ES6 中迭代器和生成器的基本概念、使用方法以及高级用法。通过掌握这些知识点，我们可以更加灵活地处理迭代序列，有助于提高编程效率和代码质量。
需要注意的是，在使用迭代器和生成器时，我们需要保证代码的可读性和稳定性。尽管使用生成器可以让代码看起来更简洁，但过分的语法糖也可能导致代码逻辑不明确、难以调试。因此，在实际开发中我们需要权衡各种因素，选择最为适合的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65accbcdadd4f0e0ff65e513