JS Generator函数yield表达式示例详解

什么是JS Generator函数

JS Generator函数是另一种可以从函数中提供多个值的方法。Generator函数使用yield关键字来定义生成器函数体内的多个值。当调用生成器函数时，会返回一个迭代器对象，使用此对象可以使用next()方法从函数中提取这些值。

以下是JS Generator函数的示例代码：

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

const generator = myGenerator();

console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3

示例解析

1. 定义myGenerator()函数为一个Generator函数，使用yield来返回多个值。

2. 在示例代码中，使用const generator = myGenerator();创建一个生成器对象。

3. 使用generator.next().value语句来提取生成器中的每个值。

使用JS Generator函数的应用场景

JS Generator函数通常用于向异步函数提供更简洁的版本。这种功能的实现是通过让异步函数暂停并在需要时恢复执行。

在以下示例中，我们通过一个自定义的“睡眠”函数来仿真异步操作：

function sleep(milliseconds) {
  const start = new Date();
  while (new Date() - start < milliseconds) {}
}

function* onButtonClick() {
  console.log("Button Clicked.");
  sleep(2000);
  console.log("Button Clicked Again.");
}

const generator = onButtonClick();

generator.next(); // Button Clicked.
generator.next(); // 2s Delay, then Button Clicked Again.

示例解析

1. 定义了sleep(milliseconds)函数来暂停当前线程，实现仿真的异步操作。

2. 定义了onButtonClick()函数为Generator函数，其中第一次调用console.log()来打印“按钮点击”信息。第二次调用sleep()函数模拟两秒钟的延迟。最后，使用另一个console.log()函数来操作“按钮点击再次发生”的信息。

3. 在示例代码中，创建生成器对象后，第一次使用generator.next()调用第一个console.log()语句，然后在两秒钟后执行第二个console.log()语句。

总结

JS Generator函数是一个非常有用的功能，它可以提供从函数中返回多个值的方法。它最常用的用途是提供给异步操作提供更清晰的实现方法。在我们的示例中，我们可以看到Generator函数的实际用法，通过一个定制函数来制定代码的执行方式，并使用JavaScript的内置方法来处理异步操作。

参考

• 阮一峰的ES6入门教程