在 ES6 标准中引入的 Generator 函数和 Iterator 接口成为了 JavaScript 中重要的语言特性之一。 这些特性让我们能够以更加灵活和简单的方式来编写异步代码和迭代器。本文将详细介绍 ES6 中 Generator 函数和 Iterator 接口的应用以及它们的学习和指导意义，并提供相关的代码示例。
Generator 函数和 Iterator 接口的概念
Generator 函数是一种可以暂停执行的函数，它使用 yield 关键字来定义暂停点。函数执行时，每次遇到 yield 关键字，函数就会暂停执行并返回一个包含当前执行状态的迭代器对象。
Iterator 接口是一种标准化的遍历器访问方式，它定义了一种通用的遍历数据结构的方法接口。实现 Iterator 接口的对象可以使用 for...of 循环进行遍历。
Generator 函数的返回值是一个可遍历的迭代器对象，通过迭代器的 next 方法可以控制函数的执行和暂停。当函数返回时，迭代器的 done 属性会被设置为 true，并且返回值会被包装在一个包含 value 属性的对象中。
Generator 函数与常规函数的不同之处在于，它们的返回值是一个可遍历的迭代器对象，这意味着我们可以通过迭代器的方式来控制函数的执行，并且可以在函数执行过程中暂停和恢复。
Generator 函数的应用
控制异步操作的执行顺序
Generator 函数可以用来控制异步操作的执行顺序。假设我们有一个需要先获取用户信息，然后再根据用户信息获取页面内容的异步操作流程。可以通过 Generator 函数来实现这个过程。
-- -------------------- ---- -------
--------- ------------ -
----- ---- - ----- ----------
----- ------- - ----- ---------------------
---------------------
-
-------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
--------- --- ------ ----- ------- ---
-- ------
---
-
-------- -------------------- -
------ --- ----------------- ------- -- -
-- ------- -
---------- -------------- --------
-
------------- -- -
---------------- ------------ -- --- --------
-- ------
---
-
----- --- - -------------
----- ----- - -----------
------------------------- -- -
----- ----- - -----------------
------ ------------
--
-------------- -- -
-----------------
--
-------------- -- -
---------------------
---在上面的代码中，getContent 是一个 Generator 函数，它通过 yield 暂停获取用户信息和页面内容的异步操作，并通过 getUser 和 getPageContent 函数返回对应的 Promise 对象。
在主函数中，我们在获取用户信息和页面内容的过程中使用 gen.next 函数控制了 Generator 函数的执行，并在每次执行完成后获取对应的结果。
处理无限序列
对于需要处理无限序列的操作，使用 Generator 函数可以大大简化代码的编写和维护。
下面是一个简单的例子，它演示了如何通过 Generator 函数来生成 Fibonacci 数列：
-- -------------------- ---- -------
--------- ----------- -
--- - - --
--- - - --
----- ------ -
----- --
--- -- - --- - - ---
-
-
----- --- - ------------
--- ---- - - -- - - --- ---- -
------------------------------
-在上面的代码中，fibonacci 是一个 Generator 函数，它会不断的生成 Fibonacci 数列中的下一个数。
我们通过 for 循环来遍历这个数列，从而获取某个指定范围内的 Fibonacci 数。
实现协程任务
Generator 函数可以被用来实现协程任务。这些任务是一种异步模式，它们与传统的异步模式不同的一点是，它们可以在不产生回调函数的情况下进行异步操作。
下面是一个简单的例子，它演示了如何使用 Generator 函数来实现一个协程任务：
-- -------------------- ---- ------- --------- ------------ - --- ----- - ------ ------------------ ----- -- ----------- ----- - ----- ----- - -- ----------------------- ----- -- ----------- ----- - ----- ----- - -- ------------------ ----- -- ----------- - ----- --- - ------------- ----------- ------------- ------------- -------------
在上面的代码中，corourtine 是一个协程任务，它会在每一次 yield 关键字出现时暂停执行并由外部代码提供一个参数。在本次任务中，协程任务通过执行一系列简单的数值计算来演示了协程任务的用法。
获取异步操作的错误信息
对于异步操作失败时，在传统的代码中我们通常是通过回调函数的方式来处理出现异常的情况。而使用 Generator 函数可以将这些异常情况转化为可迭代的异常对象，并可以在主线程中处理它们。
下面是一个简单的例子，它演示了如何通过 Generator 函数来处理异步操作的错误：
-- -------------------- ---- -------
--------- ----------- -
--- -
----- ---- - ----- ----------------------
----------------- ---- ------ -- ----------
- ----- ------- -
---------------------
-
-
-------- --------------------- -
------ --- ----------------- ------- -- -
------------- -- -
----- ------- - ------------- - ----
-- --------- -
---------- ------------- -----------
-
----------------- ---- ---- ---------
-- ------
---
-
----- --- - ------------
----- ----- - -----------
-----------
-------------- -- -----------------
-------------- -- ------------------在上面的代码中，fetchData 是一个 Generator 函数，它通过 try...catch 语句来捕获在异步操作中出现的异常。
在主函数中，我们通过 gen.next 函数来控制 Generator 函数的执行，并通过 then 和 catch 处理异步操作的结果和异常信息。
Iterator 接口的应用
遍历数据结构
Iterator 接口是一种标准化的遍历器访问方式，它定义了一种通用的遍历数据结构的方法接口。实现 Iterator 接口的对象可以使用 for...of 循环进行遍历。
下面是一个简单的例子，它演示了如何遍历实现了 Iterator 接口的对象：
-- -------------------- ---- -------
----- --- - --- -- ---
-------------------- - -------- -- -
--- ----- - --
------ -
----- -------- -- -
-- ------ - ----------- -
----- ----- - -------------
------ - ------ ----- ----- --
- ---- -
------ - ----- ---- --
-
--
--
--
--- ------ ---- -- ---- -
------------------
-在上面的代码中，我们通过 Symbol.iterator 方法为数组对象定义了 Iterator 接口，并实现了一个简单的迭代器。
通过使用 for...of 循环我们可以很方便的遍历实现了 Iterator 接口的对象，从而遍历整个数组。
实现自定义数据结构
使用 Iterator 接口可以为自定义数据结构定义一种通用的遍历方式。下面是一个简单的例子，它演示了如何实现一个自定义的链表数据结构：
-- -------------------- ---- -------
----- -------- -
------------------ -
---------- - ------
--------- - -----
-
-
----- ---------- -
------------- -
--------- - -----
-
-------------------- -
--- ---- - ----------
----- ------ -
----- -----------
---- - ----------
-
-
---------- -
-- ------------ -
--------- - --- ----------------
- ---- -
--- ---- - ----------
----- ----------- -
---- - ----------
-
--------- - --- ----------------
-
-
-
----- ---- - --- -------------
------------
------------
------------
--- ------ ---- -- ----- -
------------------
-在上面的代码中，LinkedList 是一个自定义的链表数据结构，它实现了 Iterator 接口，并通过调用 yield 语句来遍历整个链表。
通过使用 for...of 循环，我们对自定义数据结构LinkedList进行了遍历，从而能够获取整个链表中包含的所有节点。
总结
Generator 函数和 Iterator 接口是一种重要的 JavaScript 语言特性，它们简化了异步操作的编写和维护，同时也可以用来处理无限序列和实现协程任务等。Iterator 接口可以为自定义数据结构定义一种通用的遍历方式，从而方便我们对数据结构进行遍历操作。
在掌握了这些特性之后，在我们的工作中可以更加高效地进行异步编程和数据结构的遍历操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e02da3f6b2d6eab3b41e7e