JavaScript - Yield 运算符

JavaScript Yield 运算符

JavaScript 中的 yield 运算符用于异步暂停和恢复生成器函数。在 JavaScript 中，generator 函数是一种可以在执行过程中暂停或恢复的特殊函数。生成器函数使用"function*"语法定义。yield 关键字只能在包含它的生成器函数中使用。

yield 运算符暂停生成器函数的执行，并将其操作数(表达式)返回给生成器的调用者。

语法

JavaScript 中 Yield 运算符的语法如下:

yield 表达式;

参数

• 表达式 − 通过迭代器协议从生成器函数中产生的值。如果省略表达式，则产生"undefined"。

返回值

它返回传递给生成器 next() 方法的可选值，以恢复其执行。

生成器函数中的 yield 运算符

为了理解 yield 运算符，我们首先了解生成器函数的工作原理。

当调用生成器函数时，它会返回一个生成器对象。当调用此生成器对象的 next() 方法时，它会恢复生成器函数的执行。当遇到 yield 表达式时，它会暂停执行，并将 yield 关键字后的表达式返回给对象的调用者(next() 方法)。

生成器对象的 next() 方法返回一个迭代器对象，该对象具有两个属性 value 和 done。value 是表达式的实际值，而 done 是一个布尔值。如果生成器函数执行完毕，则 done 属性为 true，否则为 false。

以下是带有 yield 关键字(运算符)的生成器函数的完整示例代码。

function* test() {
 // function code
 yield expression;
}
const genObj = test();
genObj.next();

在上述语法中，使用"function*"创建一个名为"test"的生成器函数，并使用"yield"关键字从该函数返回"表达式"。

生成器函数"test"被调用，并将返回的生成器对象赋值给变量"genObj"。next() 方法在遇到 yield 表达式时恢复函数的执行并返回迭代器对象。

让我们执行以下 JavaScript 代码片段

function* test() {
    console.log("I'm before yield expression");
    yield 20;
}
const genObj = test();
console.log(genObj.next());

注意，当我们调用 next() 方法时，它首先在控制台中显示消息，然后显示迭代器对象。

I'm before yield expression
{ value: 20, done: false }

示例:返回值

在下面的示例中，我们定义了 test() 生成器函数。我们在函数中使用了 3 次 yield 运算符，分别返回一个数字、一个数组和一个字符串。

之后，我们四次使用了 next() 方法来恢复函数的执行。每当控制流找到 yield 运算符时，它就会停止执行并返回值。

在输出中，您可以观察到它返回了一个包含 yield 运算符操作数和布尔值的对象。

function* test() {
    yield 20;
    yield [1,2,3];
    yield "Hello World";
}
let res = test();
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());

输出

{ value: 20, done: false }
{ value: [ 1, 2, 3 ], done: false }
{ value: 'Hello World', done: false }
{ value: undefined, done: true }

示例:返回 undefined

当我们省略 yield 关键字后的表达式时，它将返回 undefined。

function* test() {
    yield;
}

let res = test();
console.log(res.next());
console.log(res.next());

输出

{ value: undefined, done: false }
{ value: undefined, done: true }

示例:向 next() 方法传递值

我们也可以向 next() 方法传递值。在下面的示例中，我们将 30 传递给了第二个 next() 方法。它将 yield 的值计算为 30。变量 result 被赋值为 yield 的值，该值计算结果为 30。

function* test() {
    let result = yield 20;
    console.log("default value paased to next() method " + result);
}

let res = test();
console.log(res.next());
console.log(res.next(30));

输出

{ value: 20, done: false }
default value paased to next() method 30
{ value: undefined, done: true }

示例

在下面的代码中，我们使用了循环，并在每次操作中使用 yield 运算符停止函数的执行。之后，我们使用 next() 方法开始执行生成器函数。

// 生成器函数
function* test() {
    for (let p = 0; p < 6; p += 2) {
        yield p;
    }
}
let res = test();
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());

输出

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

在实时开发中，程序员使用"yield"运算符进行异步操作、惰性求值、任务调度、迭代大型数据集、创建自定义迭代器等。