JavaScript中的“函数*”是什么?

在 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 的语法示例:

--------- ------------- -
  -- --------- -------- ----
-

需要注意的是,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 中有很多实际用途,例如:

  1. 迭代器:通过生成器函数创建一个自定义迭代器,可以快速便捷地遍历任何序列类型的集合数据。

  2. 异步编程:使用 generator functions 可以方便地处理异步操作,可以将异步操作转换为同步的方式来编写代码。

以下是使用 generator function 处理异步操作的示例:

--------- ------------- -
  ----- ---- - ----- --------------------------------------
  ------------------
-

----- --- - --------------

------------------------- -- --------------------- -- -
    ---------------
---

在这个示例中,我们使用 fetch API 发送异步请求获取数据,并在 generator function 中使用

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/9121