ES8 中新引入的 Generator 函数详解

Generator 函数是 ES6 中引入的一个新特性，它可以让我们更方便地编写基于异步操作的代码。在 ES8 中，Generator 函数得到了进一步的升级和改进，本文将详细介绍 ES8 中新引入的 Generator 函数。

什么是 Generator 函数

Generator 函数是一个特殊的函数，它可以被暂停和恢复执行。在函数内部，我们可以使用 yield 语句来暂停函数的执行，并返回一个值。当我们再次调用函数时，它会从上一次暂停的地方继续执行，直到函数结束或者遇到下一个 yield 语句。

下面是一个简单的 Generator 函数的示例：

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

const gen = generator();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

在这个示例中，我们定义了一个名为 generator 的 Generator 函数，它返回了一个迭代器对象。我们通过调用 gen.next() 来获取迭代器对象中的下一个值，每次调用都会暂停函数的执行，并返回一个对象，其中 value 属性表示当前 yield 语句返回的值，done 属性表示函数是否已经结束。

ES8 中新引入的 Generator 函数特性

在 ES8 中，Generator 函数得到了进一步的升级和改进，主要包括以下三个方面的改进：

1. Async/Await

ES8 中引入了 async 和 await 关键字，它们可以让我们更方便地编写基于异步操作的代码。async 关键字用于定义一个异步函数，而 await 关键字可以在异步函数中等待一个 Promise 对象的完成。

Generator 函数和 Async/Await 在某些方面有相似之处，它们都可以让我们更方便地编写基于异步操作的代码。但是，Async/Await 更加简洁和直观，因此在实际开发中更加常用。

下面是一个使用 Async/Await 的示例：

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncGenerator() {
  await delay(1000);
  yield 1;
  await delay(1000);
  yield 2;
  await delay(1000);
  yield 3;
}

const gen = asyncGenerator();

(async function() {
  console.log(await gen.next()); // { value: 1, done: false }
  console.log(await gen.next()); // { value: 2, done: false }
  console.log(await gen.next()); // { value: 3, done: false }
  console.log(await gen.next()); // { value: undefined, done: true }
})();

在这个示例中，我们定义了一个名为 asyncGenerator 的异步函数，它使用了 await 关键字来等待一个 Promise 对象的完成。我们通过调用 await gen.next() 来获取迭代器对象中的下一个值，每次调用都会暂停函数的执行，并返回一个对象，其中 value 属性表示当前 yield 语句返回的值，done 属性表示函数是否已经结束。

2. yield*

ES8 中引入了 yield* 语句，它可以用于在 Generator 函数中委托另一个 Generator 函数的执行。当我们在一个 Generator 函数中使用 yield* 语句时，它会暂停当前函数的执行，并开始执行指定的 Generator 函数，直到指定的 Generator 函数执行完毕或者遇到下一个 yield 语句。

下面是一个使用 yield* 的示例：

function* subGenerator() {
  yield 'a';
  yield 'b';
  yield 'c';
}

function* generator() {
  yield 1;
  yield* subGenerator();
  yield 2;
}

const gen = generator();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 'a', done: false }
console.log(gen.next()); // { value: 'b', done: false }
console.log(gen.next()); // { value: 'c', done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: undefined, done: true }

在这个示例中，我们定义了一个名为 subGenerator 的 Generator 函数，它返回了一个迭代器对象。我们还定义了一个名为 generator 的 Generator 函数，它使用了 yield* 语句来委托 subGenerator 函数的执行。我们通过调用 gen.next() 来获取迭代器对象中的下一个值，每次调用都会暂停函数的执行，并返回一个对象，其中 value 属性表示当前 yield 语句返回的值，done 属性表示函数是否已经结束。

3. Generator 函数的返回值

ES8 中引入了 Generator 函数的返回值，它可以让我们更方便地获取函数执行后的返回值。在 ES6 中，Generator 函数没有返回值，我们需要通过迭代器对象的 return 方法来手动结束函数的执行，并返回一个值。在 ES8 中，我们可以使用 return 语句来结束函数的执行，并返回一个值，这个值会被作为迭代器对象的 value 属性返回。

下面是一个使用 return 的示例：

function* generator() {
  yield 1;
  yield 2;
  yield 3;
  return 4;
}

const gen = generator();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: 4, done: true }

在这个示例中，我们定义了一个名为 generator 的 Generator 函数，它使用了 return 语句来结束函数的执行，并返回一个值。我们通过调用 gen.next() 来获取迭代器对象中的下一个值，每次调用都会暂停函数的执行，并返回一个对象，其中 value 属性表示当前 yield 语句返回的值，done 属性表示函数是否已经结束。

总结

ES8 中新引入的 Generator 函数为我们提供了更加方便和灵活的异步编程方式。通过使用 Async/Await、yield* 和 Generator 函数的返回值，我们可以更加方便地编写基于异步操作的代码。

在实际开发中，我们应该根据具体的场景和需求选择合适的编程方式，以提高代码的可读性和可维护性。同时，我们还应该不断学习和掌握新的技术和工具，以保持自己的竞争力和创造力。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6589c363eb4cecbf2df138a1