解释 JavaScript 中不同类型的生成器

javascriptweb developmentfront end technology更新于 2024/1/16 2:52:17

众所周知，JavaScript 是一种轻量级编程语言，其中的生成器是在 ECMAScript 2015 中引入的。生成器是一个具有许多输出值并且可以停止和启动的过程。在 JavaScript 中，生成器由一个生成器函数组成，该函数生成一个可迭代的 Generator 对象。

在本文中，我们将详细讨论 JavaScript 中的生成器以及 JavaScript 中不同类型的生成器，并提供语法和示例。

JavaScript 中生成器的简介

生成器的功能与常规函数相同，但有一点不同，即生成器函数可以恢复和暂停。在 JavaScript 中，通常，函数一旦被调用就不会停止。通常，生成器的概念出现在异步编程中。

JavaScript 中生成器函数的语法

现在我们将讨论 JavaScript 中生成器函数的语法，并将其与常规函数进行比较。

function * 语法用于构建生成器函数，yield 关键字用于暂停它们。

function * genFunc() {
    yield 'Hello';
    yield 'World';
}
const g = genFunc(); // g 是一个生成器
g.next(); // {value: 'Hello', done: false}
g.next(); // {value: 'World', done: false}
g.next(); // { value: undefined, done: true }
…

首次调用生成器函数时，不会运行其任何代码，而是返回生成器对象。通过调用生成器的 next() 方法来使用值，该方法会运行代码，直到遇到 Yield 关键字，此时它会暂停并等待，直到再次调用 next()。

在上面的代码中，在我们的最后一条语句之后，继续调用 g.next() 只会生成相同的返回对象:{value: undefined, done: true}，因为我们在 genFunc() 函数中的"world"之后没有定义任何内容。

yield 关键字会暂停生成器函数的执行，并为生成器的调用者提供其后面表达式的值。它与基于生成器的 return 关键字版本相当。它只能从包含yield的生成器函数直接调用。

与常规函数的比较

function regFunc() {
    console.log("Hello World");
}
// Hello World

在常规函数中，我们不使用'*'函数，如您在上例中看到的那样，它也不使用yield函数。正如我们上面讨论的那样，常规函数和生成器函数之间的主要区别在于生成器函数可以停止和暂停。因此，通过上述示例，您可以看到我们没有选择停止它并直接将整个语句一起打印，即"Hello world"。

既然我们已经了解了生成器函数的基本知识，现在让我们转到不同类型的生成器函数 -

普通生成器

在普通生成器中，生成器用作迭代器，在执行每个 next() 方法调用以生成函数后生成下一个值。让我们看一个例子，我们将逐个产生数字，直到列表结束。

function* generator_function(){
   for(var cur = 0 ; cur<7; cur++){
      yield cur;
   }
}
var object_generator = generator_function();
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);

在上面的代码中，我们创建了一个带有yield关键字的普通函数，并使用next()函数多次调用它。

带参数的生成器

带参数的生成器与普通生成器略有不同，这次我们必须通过next()函数传递一个参数，以将其发送给生成器函数。此外，每次我们传递一个参数时，它都会存储在yield关键字之后，而不是之前，我们将在接下来的示例中理解这个概念-

function* generator_function(){
    console.log("函数启动")
    temp = Yield;
    console.log("这是传递的第一个值:" + temp)
    temp = Yield;
    console.log("这是传递的第二个值:" + temp)
}
var object_generator = generator_function();
object_generator.next("This is not the first ");
object_generator.next("this is first");
object_generator.next("this is second");
object_generator.next();

在上面的代码中，我们定义了生成器函数，这次我们将参数传递给它。当我们第一次调用对象时，不会打印给定的参数，因为那是在"yield"关键字之前发送的，然后在发送的值存储在变量中并打印之后，在第二次打印值之后，什么也不会发生，因为没有yield存在。

具有对象属性的生成器

生成器可以用作对象，当我们调用它们时，它们只会返回分配给它们的值，并且可以打印。为了理解这个概念，我们来看一个例子。

function* generator_function(){
    yield "第一个值"
    yield "第二个值"
    yield "第三个值"
}
var object_generator = generator_function();
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);

在上面的代码中，首先，我们定义了三个yield表达式，它们后面有一个字符串，当我们调用生成器时，它们后面的字符串将被返回。

还有其他类型的生成器，比如有返回类型，有些生成器内部包含另一个生成器等。