JavaScript 了解生成器函数

生成器函数可以实时生成值，这意味着只有在需要该值时才会生成。这意味着值是在生成后并未存储在内存中，因此执行速度更快。它使用 asterick 符号（*）在关键字function之后，即 **function*** ，告诉JavaScript这是一个生成器函数。生成器函数返回对象。

使用情况：

• 用于无限循环，不会占用计算机资源或冻结程序。
• 用作迭代器。

它具有一种特殊类型的return关键字，即 Yield 。Yield的作用是运行一些代码，然后返回值，再运行一些代码，并像这样返回值。

示例： 当每个yield的每个步骤都很耗费资源，例如在每个yield上调用API端点，而不知道用户需要多少结果时，您可以延迟这些API调用，直到它们实际需要。

生成器有两个属性：

• 值属性
• 完成属性

语法：

Javascript

function* Generator(){
  yield 1
  yield 2
  yield 3
}
 
const gen = Generator();

主要使用了三种类型的函数：

• Next函数
• Return函数
• Throw函数

因此，我们通过示例来讨论Next函数。

示例1： 该示例展示了在Javascript中使用生成器。

Javascript

function* Generator() {
    yield 1;
    yield 2;
    yield 3;
}
 
const gen = Generator();
console.log(gen.next());
console.log(gen.next());

输出

{ value: 1, done: false }
{ value: 2, done: false }

示例 2: 这个例子展示了在Javascript中使用生成器。

JavaScript

function* Generator() {
    console.log("before 1");
    yield 1;
    console.log("after 1");
    console.log("before 2");
    yield 2;
    console.log("after 2");
}
 
const gen = Generator();

输出： 当生成器第一次调用时，它创建了一个具有next属性的对象，因为next属性允许单独执行生成器内部的所有代码，所以不会打印任何东西。

示例3： 这个示例展示了在Javascript中使用生成器。

Javascript

function* Generator() {
    let i = 0;
    while (i < 5) {
        yield i;
        i++;
    }
}
 
const gen = Generator();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

输出: 在这里，while循环只运行了5次，然后循环终止，因此这里的第5个索引值是未定义的，并且done属性为true，因为yield在生成5个值之后无法生成更多的值。

{ value: 0, done: false }
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 4, done: false }
{ value: undefined, done: true }

示例4： 此示例展示了在JavaScript中使用生成器。

JavaScript

function* Generator() {
    let i = 0;
    while (i < 2) {
        yield i++;
    }
}
 
const gen = Generator();
console.log(gen.next().value);
console.log(gen.next().value);

输出：

0
1

示例 5： 此示例展示了 Javascript 中使用生成器的方法。这里将生成器用作数组的迭代器。

Javascript

function* Generator(array) {
    for (let i = 0; i < array.length; i++) {
        yield array[i];
    }
}
 
const gen = Generator([1, 3, 5]);
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

输出

{ value: 1, done: false }
{ value: 3, done: false }
{ value: 5, done: false }
{ value: undefined, done: true }

示例6： 此示例展示了在Javascript中使用生成器的方法。

Javascript

function* Generator() {
    let i = 0;
    while (i < 4) {
        yield i++;
    }
}
 
const gen = Generator();
const gene = Generator();
console.log(gen.next());
console.log(gen.next());
console.log(gene.next());
console.log(gene.next());

输出

{ value: 0, done: false }
{ value: 1, done: false }
{ value: 0, done: false }
{ value: 1, done: false }

每次调用生成器函数时，它都会为独立的对象创建一个新实例，该实例具有可以独立迭代的函数版本。