在 JavaScript 中，有一种特殊类型的函数被称为"generator function"(生成器函数)，它以 "*" 符号标识。这篇文章将详细介绍 generator functions 的概念、语法和用法，并提供实际代码示例。
什么是 Generator Functions
Generator functions 是一种特殊的函数类型，它可以通过暂停执行并在需要时再次恢复执行，从而使函数具有状态。它们可以返回一个迭代器对象，该对象可以被用于遍历序列（如数组、字符串、Set等）中的值。
Generator functions 的主要特征是它们使用 yield 关键字来暂停函数执行并返回一个值。每次调用 yield 时，函数将立即暂停，并将指定的值返回给调用者。当再次调用该函数时，函数将从上次暂停的地方继续执行。
以下是一个简单的 generator function 示例：
-- -------------------- ---- ------- --------- ------------- - ----- -------- ----- -------- - ----- --- - -------------- ------------------------ -- ------- -------- ----- ------ ------------------------ -- ------- -------- ----- ------ ------------------------ -- ------- ---------- ----- -----
在这个示例中，myGenerator 函数定义了两个 yield 语句，分别返回字符串 "hello" 和 "world"。然后我们创建了一个迭代器对象 gen，可以使用 next() 方法来遍历返回的值。
当我们第一次调用 gen.next() 时，函数执行到第一个 yield 语句并返回值 "hello"（value属性），同时 done 属性标记为 false。当我们再次调用 gen.next() 时，函数继续执行，直到第二个 yield 语句，然后返回值 "world"。最后一次调用 gen.next() 时，函数执行完成并返回 {value: undefined, done: true}。
Generator Functions 的语法
generator functions 的语法与普通函数有些不同。它们以 "*" 符号作为函数名的前缀，并使用 yield 语句在函数体中返回值。
以下是 generator function 的语法示例：
function* myGenerator() {
// generator function body
}需要注意的是，Generator 函数可以拥有参数，也可以通过 yield 语句接收外部传递的参数。例如：
-- -------------------- ---- ------- --------- -------------- - ----- ------ - ----- - - -- ------ ------- - ----- --- - ---------------- ------------------------ -- ------- --- ----- ------ ------------------------- -- ------- -- ----- -----
在这个示例中，我们将参数 x 传递给了 generator function，并使用 yield 返回了 x * 2 的结果。然后我们调用了 gen.next() 来获取这个结果，并将得到 {value: 20, done: false}。最后，我们通过 gen.next(5) 调用函数，将 5 作为参数传递给了 result 变量，并以 {value: 5, done: true} 的形式结束函数的执行。
Generator Functions 的用途
Generator functions 在 JavaScript 中有很多实际用途，例如：
迭代器：通过生成器函数创建一个自定义迭代器，可以快速便捷地遍历任何序列类型的集合数据。
异步编程：使用 generator functions 可以方便地处理异步操作，可以将异步操作转换为同步的方式来编写代码。
以下是使用 generator function 处理异步操作的示例：
-- -------------------- ---- -------
--------- ------------- -
----- ---- - ----- --------------------------------------
------------------
-
----- --- - --------------
------------------------- -- --------------------- -- -
---------------
---在这个示例中，我们使用 fetch API 发送异步请求获取数据，并在 generator function 中使用
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9121