JavaScript yield

摘要：在本教程中，您将学习 JavaScript yield 关键字以及如何在生成器函数中使用它。

JavaScript yield 关键字简介

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

以下是 yield 关键字的语法

[variable_name] = yield [expression];
Code language: JavaScript (javascript)

在此语法中

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

JavaScript yield 示例

让我们看一些使用 yield 关键字的示例。

A) 返回一个值

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

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

let f = foo();

console.log(f.next());
Code language: JavaScript (javascript)

输出

{ value: 1, done: false }
Code language: CSS (css)

如您所见，调用 next() 时，yield 后面的值将添加到返回对象的 value 属性中

yield 1;
Code language: JavaScript (javascript)

B) 返回 undefined

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

function* bar() {
    yield;
}

let b = bar();
console.log(b.next()); 
Code language: JavaScript (javascript)

输出

{ value: undefined, done: false }
Code language: CSS (css)

C) 向 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));
Code language: JavaScript (javascript)

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

{ value: undefined, done: false }
Code language: CSS (css)

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

• 将 yield 评估为 1000。
• 将 result 的值设置为 yield，即 1000。
• 输出消息并返回对象

输出

result is 1000
{ value: undefined, done: true }
Code language: CSS (css)

D) 在数组中使用 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));
Code language: JavaScript (javascript)

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

{ value: undefined, done: false }
Code language: CSS (css)

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

{ value: undefined, done: false }
Code language: CSS (css)

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

[ 1, 2 ]
{ value: undefined, done: true }
Code language: CSS (css)

E) 使用 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());
Code language: JavaScript (javascript)

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

{ value: 1, done: false }
Code language: CSS (css)

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

{ value: [ 20, 30, 40 ], done: false }
Code language: CSS (css)

在这种情况下，yield 将数组 [ 20, 30, 40 ] 作为返回值对象的 value 属性的值。

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

{ value: undefined, done: true }
Code language: CSS (css)

F) 使用 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 }
Code language: JavaScript (javascript)

在这个示例中，yield* 是新语法。 yield* 表达式用于委托给另一个可迭代对象或生成器。

因此，以下表达式将返回数组 [20, 30, 40] 的各个元素

yield* [20, 30, 40];
Code language: JavaScript (javascript)

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