JavaScript yield 关键词与生成器

yield 关键字允许您暂停和恢复生成器函数 function* 执行，在本教程中，您将了解 JavaScript yield 关键字以及如何在生成器函数中使用它

June 27, 2023

3 min read

es6 yield JavaScript 教程

在本教程中，您将了解 JavaScript yield 关键字以及如何在生成器函数中使用它。

JavaScript yield 关键字简介

yield 关键字允许您暂停和恢复生成器函数 function* 执行。

下面展示了 yield 关键字的语法：

[variable_name] = yield [expression];

在这个语法中：

expression 表示通过迭代协议从生成器函数返回的值。如果省略 expression，则 yield 返回 undefined。
variable_name 存储传递给迭代器对象的 next() 方法的可选值。

JavaScript yield 示例

让我们举一些使用 yield 关键字的例子。

返回一个值

以下示例简单说明如何使用 yield 关键字从生成器函数返回值：

function* foo() { 
    yield 1;
    yield 2;
    yield 3;
}

let f = foo();

console.log(f.next());

输出：

{ value: 1, done: false }

正如您所看到的，当调用 next() 方法时，yield 后面的值将添加到返回对象的 value 属性中：

yield 1;

返回 undefined

此示例说明如何使用 yield 关键字返回 undefined：

function* bar() {
    yield;
}

let b = bar();
console.log(b.next());

输出：

{ value: undefined, done: false }

将值传递给 next() 方法

在以下示例中，yield 关键字是一个表达式，用于计算传递给 next() 方法的参数：

function* generate() {
    let result = yield;
    console.log(`result is ${result}`);
}

let g = generate();
console.log(g.next()); 

console.log(g.next(1000));

第一次调用 g.next() 返回以下对象：

{ value: undefined, done: false }

第二次调用 g.next() 执行以下任务：

评估 yield 为 1000。
指定 result 的值为 yield，即 1000。
输出消息并返回对象

输出：

result is 1000
{ value: undefined, done: true }

在数组使用 yield

以下示例使用 yield 关键字作为数组的元素：

function* baz() {
    let arr = [yield, yield];
    console.log(arr);
}

var z = baz();

console.log(z.next());  
console.log(z.next(1)); 
console.log(z.next(2));

第一个调用 z.next() 将 arr 数组的第一个元素设置为 1 并返回以下对象：

{ value: undefined, done: false }

第二次调用 z.next() 将 arr 数组的第二个设置为 2 并返回以下对象：

{ value: undefined, done: false }

第三次调用 z.next() 显示 arr 数组的内容并返回以下对象：

[ 1, 2 ]
{ value: undefined, done: true }

yield 用于返回数组

以下生成器函数使用 yield 关键字返回一个数组：

function* yieldArray() {
    yield 1;
    yield [ 20, 30, 40 ];
}

let y = yieldArray();

console.log(y.next()); 
console.log(y.next()); 
console.log(y.next());

第一次调用 y.next() 返回以下对象：

{ value: 1, done: false }

第二次调用 y.next() 返回以下对象：

{ value: [ 20, 30, 40 ], done: false }

在本例中，yield 将数组 [ 20, 30, 40 ] 设置为返回对象的 value 属性值。

第三次调用 y.next() 返回以下对象：

{ value: undefined, done: true }

yield 返回数组的各个元素

请参阅以下生成器函数：

function* yieldArrayElements() {
    yield 1;
    yield* [ 20, 30, 40 ];
}

let a = yieldArrayElements();

console.log(a.next()); // { value: 1, done: false }
console.log(a.next()); // { value: 20, done: false }
console.log(a.next()); // { value: 30, done: false }
console.log(a.next()); // { value: 40, done: false }

在此示例中，yield* 是新语法。yield* 表达式用于委托给另一个可迭代对象或生成器。因此，以下表达式返回 [20, 30, 40] 数组的各个元素：