JavaScript - Yield 运算符

JavaScript Yield 运算符

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

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

语法

JavaScript 中 yield 运算符的语法如下 -

 yield expression;

参数

• expression − 通过迭代器协议从 generator 函数中生成的值。如果省略 expression，则生成 'undefined' 。

返回值

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

Genrator 函数中的 yield 运算符

要理解 yield 运算符，我们先来了解一下 generator 函数的工作原理。

调用 generator 函数时，它将返回一个 generator 对象。当 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 关键字用于从函数返回 'expression'。

调用生成器函数 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（） 生成器函数。我们在函数中使用了 yield 运算符 3 次，分别返回一个数字、一个数组和一个字符串。

之后，我们使用 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());

输出

示例：返回 undefined

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

function* test() {
	 	 yield;
}

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

输出

示例：将值传递给 next（） 方法

我们还可以将值传递给 next（） 方法。在下面的示例中，我们将 30 传递给第二个 next（） 方法。它将产量评估为 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));

输出

例

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

// Generator function
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());

输出

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