前言
在 JavaScript 中，函数是一等公民，它们可以被传递、存储、调用和返回。ES6 引入了一种新的函数类型：Generator 函数。它可以让你在函数执行过程中暂停和恢复，这种特性非常有用，尤其是在异步编程中。
在本篇文章中，我们将深入了解 Generator 函数的概念、语法、调用方式以及如何使用它们来解决一些常见的问题。
Generator 函数的概念
Generator 函数是一种特殊类型的函数，它可以被暂停和恢复。当执行 Generator 函数时，它会返回一个迭代器对象，该对象可以用于逐步执行 Generator 函数的代码块。
Generator 函数的定义方式和普通函数类似，只是在函数名前面加了一个星号（*），如下所示：
--------- ------------- - -- --------- ----- -
Generator 函数内部使用 yield 语句来实现暂停和恢复。当执行到 yield 语句时，Generator 函数会暂停执行，并将 yield 后面的表达式作为迭代器对象的值返回。下次调用迭代器对象的 next() 方法时，Generator 函数会从上次暂停的位置继续执行，直到再次执行到 yield 语句为止。
Generator 函数的语法
Generator 函数的语法和普通函数类似，只是在函数名前面加了一个星号（*），如下所示：
--------- ------------- - -- --------- ----- -
Generator 函数内部使用 yield 语句来实现暂停和恢复。当执行到 yield 语句时，Generator 函数会暂停执行，并将 yield 后面的表达式作为迭代器对象的值返回。下次调用迭代器对象的 next() 方法时，Generator 函数会从上次暂停的位置继续执行，直到再次执行到 yield 语句为止。
Generator 函数的调用方式
Generator 函数的调用方式与普通函数不同。当你调用 Generator 函数时，它并不会立即执行，而是返回一个迭代器对象。你可以通过调用迭代器对象的 next() 方法来逐步执行 Generator 函数的代码块。
下面是一个简单的示例，展示了如何调用 Generator 函数：
--------- ------------- - ----------------- ---- ------ ----------------- ---- ------ ----------------- ---- - ----- ---- - -------------- ------------ -- -- ---- - ------------ -- -- ---- - ------------ -- -- ---- -
在上面的示例中，我们定义了一个 Generator 函数 myGenerator()，它包含三个 console.log() 语句和两个 yield 语句。我们通过调用 myGenerator() 函数返回的迭代器对象 iter 来逐步执行该函数的代码块。
当我们第一次调用 iter.next() 方法时，myGenerator() 函数会执行到第一个 yield 语句处，并将 "Step 1" 作为迭代器对象的值返回。当我们再次调用 iter.next() 方法时，myGenerator() 函数会从上次暂停的位置继续执行，直到执行到第二个 yield 语句处，并将 "Step 2" 作为迭代器对象的值返回。最后一次调用 iter.next() 方法时，myGenerator() 函数会从上次暂停的位置继续执行，直到执行完所有的代码块，并将 undefined 作为迭代器对象的值返回。
Generator 函数的应用场景
Generator 函数可以用于解决一些常见的问题，比如异步编程、遍历数据结构等。
异步编程
Generator 函数可以用于解决异步编程中的回调地狱问题。在传统的回调函数中，我们需要通过嵌套多个回调函数来处理异步操作的结果，这会导致代码难以阅读和维护。而通过使用 Generator 函数，我们可以将异步操作的流程写成顺序执行的代码块，从而提高代码的可读性和可维护性。
下面是一个简单的示例，展示了如何使用 Generator 函数来处理异步操作：
--------- ------------- -
----- ------- - ----- ----------------------------------------------
----- ------- - ----- ----------------------------------------------
--------------------------
--------------------------
-
-------- ---------------- -
----- ---- - ------------
-------- ----------------- -
-- ---------------- -
------ ---------------------------------
-
------ --------------------------------
--------- -- ------------------------
-
------ --------------------
-
-------------------在上面的示例中，我们定义了一个 Generator 函数 myGenerator()，它包含两个 fetch() 函数和两个 yield 语句。我们还定义了一个 async() 函数，用于异步执行 myGenerator() 函数。
当我们调用 async(myGenerator) 函数时，它会返回一个 Promise 对象。在 async() 函数内部，我们通过调用 Promise.resolve() 方法将每个异步操作的结果传递给下一个 yield 语句，并递归地调用 handle() 函数，直到执行完所有的代码块为止。
遍历数据结构
Generator 函数可以用于遍历数据结构，比如数组、对象、字符串等。通过使用 yield 语句，我们可以逐步遍历数据结构中的每个元素，并将其作为迭代器对象的值返回。
下面是一个简单的示例，展示了如何使用 Generator 函数来遍历数组：
--------- ------------- -
----- --- - --- -- ---
--- ---- - - -- - - ----------- ---- -
----- -------
-
-
----- ---- - --------------
------------------------- -- -- - ------ -- ----- ----- -
------------------------- -- -- - ------ -- ----- ----- -
------------------------- -- -- - ------ -- ----- ----- -
------------------------- -- -- - ------ ---------- ----- ---- -在上面的示例中，我们定义了一个 Generator 函数 myGenerator()，它包含一个 for 循环和三个 yield 语句。我们通过调用 myGenerator() 函数返回的迭代器对象 iter 来遍历数组中的每个元素。
当我们第一次调用 iter.next() 方法时，myGenerator() 函数会执行到第一个 yield 语句处，并将数组中的第一个元素 1 作为迭代器对象的值返回。当我们再次调用 iter.next() 方法时，myGenerator() 函数会从上次暂停的位置继续执行，直到执行到第二个 yield 语句处，并将数组中的第二个元素 2 作为迭代器对象的值返回。最后一次调用 iter.next() 方法时，myGenerator() 函数会从上次暂停的位置继续执行，直到执行完所有的代码块，并将 undefined 作为迭代器对象的值返回。
总结
Generator 函数是一种特殊类型的函数，它可以被暂停和恢复。当执行 Generator 函数时，它会返回一个迭代器对象，该对象可以用于逐步执行 Generator 函数的代码块。Generator 函数可以用于解决异步编程中的回调地狱问题，也可以用于遍历数据结构。通过使用 yield 语句，我们可以逐步遍历数据结构中的每个元素，并将其作为迭代器对象的值返回。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ff86cbd10417a222ab1aeb