JavaScript - Yield 操作符

Yield 操作符简介

你好，有抱负的程序员们！今天，我们将踏上一段激动人心的旅程，探索 JavaScript 中的 yield 操作符。将 yield 想象成你代码中的魔法暂停按钮。它就像告诉你的程序：“嘿，在这里休息一下，稍后再接着执行。”很有趣吧？让我们深入了解一下！

什么是 Yield 操作符？

Yield 操作符是 JavaScript 中一个特殊的关键字，用于生成器函数内部。我知道你们现在在想什么——“生成器函数？那是什么东西？”别担心，我们马上就会介绍到！现在，只需将生成器函数想象成一种可以暂停和恢复执行的特殊的函数。正是 yield 操作符使得这种暂停和恢复成为可能。

现实世界的类比

想象你正在阅读一本非常长的书。你可能需要一个书签来在需要休息时保存你的位置。Yield 操作符在你的代码中就像那个书签。它在函数可以暂停的地方标记一个位置，稍后可以返回到这里。

Yield 操作符的语法

Yield 操作符的基本语法非常简单：

yield expression;

这里的 expression 是你希望在函数暂停时“产出”或返回的值。这是可选的，如果你不提供，则会产出 undefined。

在生成器函数中使用 Yield 操作符

现在，让我们来谈谈这些神秘的生成器函数。生成器函数通过在 function 关键字后加上一个星号 (*) 来定义：

function* generatorFunction() {
yield 'Hello';
yield 'World';
}

当你调用一个生成器函数时，它不会立即执行内部的代码。相反，它会返回一个生成器对象，你可以使用这个对象来控制函数的执行。

示例：返回一个值

让我们看一个简单的例子：

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

const generator = countToThree();
console.log(generator.next().value); // 输出：1
console.log(generator.next().value); // 输出：2
console.log(generator.next().value); // 输出：3

在这个例子中，每次我们在生成器上调用 next()，它都会运行直到遇到一个 yield 语句，然后暂停并返回产出的值。就像函数在说：“这是下一个数字，下次调用我时再给我下一个！”

示例：返回 Undefined

如果我们不指定要产出的值，它将返回 undefined：

function* yieldUndefined() {
yield;
yield 'Hello';
yield;
}

const gen = yieldUndefined();
console.log(gen.next().value); // 输出：undefined
console.log(gen.next().value); // 输出：Hello
console.log(gen.next().value); // 输出：undefined

这在你想在生成器中创建一个暂停点但不一定要返回值时非常有用。

示例：向 next() 方法传递一个值

这里事情变得非常有趣。你实际上可以向 next() 方法传递一个值，这个值将被生成器函数接收：

function* conversation() {
const name = yield "What's your name?";
yield `Hello, ${name}!`;
const hobby = yield "What's your favorite hobby?";
yield `${hobby} sounds fun!`;
}

const talk = conversation();
console.log(talk.next().value);        // 输出：What's your name?
console.log(talk.next('Alice').value); // 输出：Hello, Alice!
console.log(talk.next().value);        // 输出：What's your favorite hobby?
console.log(talk.next('Coding').value); // 输出：Coding sounds fun!

这就像与你的代码进行对话。生成器提出一个问题，暂停等待你的答案，然后根据你所说的继续执行。非常酷，对吧？

实际示例：斐波那契数列生成器

让我们把所有这些知识结合起来，用一个实际的例子。我们将创建一个生成斐波那契数列的生成器函数：

function* fibonacciGenerator() {
let a = 0, b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}

const fib = fibonacciGenerator();
for (let i = 0; i < 10; i++) {
console.log(fib.next().value);
}

这个生成器将不断产生斐波那契数。每次我们调用 next()，它都会产出序列中的下一个数。我们在这里使用一个 for 循环来获取前10个数字，但我们可以继续获取，直到我们想要停止为止！

结论

Yield 操作符是 JavaScript 中一个强大的工具，它为控制代码流程提供了新的可能性。它允许你创建可以暂停和恢复的函数，使得处理一系列值变得更加容易。

记住，有效地使用 yield 和生成器需要实践。如果一开始没有立即掌握，不要气馁——继续尝试，你很快就会成为一个熟练的生成器使用者！

方法表

下面是使用生成器的主要方法的表格：

方法	描述
next()	返回生成器中的下一个值
return(value)	返回给定的值并结束生成器
throw(error)	向生成器抛出一个错误

快乐的编程，未来的 JavaScript 巫师们！记住，每个专家都曾经是一个初学者。继续练习，保持好奇心，在你意识到之前，你将通过 yield 走向编程的伟大！

Credits: Image by storyset