ES9 之 Generator 函数引入！-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，引入了生成器（Generator）函数，它是一种返回迭代器对象的函数，它可以暂停和恢复运行状态。ES9 基于 ES6 引入 Generator 函数的基础上进行了改进，本文将详细介绍 ES9 的 Generator 函数，并给出实例代码和学习指导。

1. Generator 函数的基本语法

Generator 函数的声明方式和普通函数一样，但其函数名前加上一个星号 *。

function* gen() {
  // generator function body
}

调用 Generator 函数不会立即执行函数体，而是返回一个迭代器对象。我们可以通过调用迭代器对象的 next 方法，逐个执行 Generator 函数内部的代码块。

// javascriptcn.com 代码示例
function* gen() {
  console.log('start');
  yield 'Hello,';
  yield 'world!';
}

const iterator = gen();
console.log(iterator.next()); // { value: 'Hello,', done: false }
console.log(iterator.next()); // { value: 'world!', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

上面代码中，gen 函数定义了两个 yield 语句，它们分别返回 'Hello,' 和 'world!'。调用迭代器的 next 方法，可以分别执行这两个 yield 语句，并返回相应的值。

2. yield* 语句

在 Generator 函数内部，我们可以使用 yield* 语句将控制权移交给另一个 Generator 函数。这比多次调用一个 Generator 函数更加优雅。

// javascriptcn.com 代码示例
function* gen1() {
  yield 'Hello,';
}

function* gen2() {
  yield* gen1();
  yield 'world!';
}

const iterator = gen2();
console.log(iterator.next()); // { value: 'Hello,', done: false }
console.log(iterator.next()); // { value: 'world!', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

上面代码中，gen1 函数只有一个 yield 语句，返回字符串 'Hello,'。在 gen2 函数中，我们使用 yield* 语句将控制权移交给 gen1 函数，并在 gen1 函数执行完后，继续执行 gen2 函数的代码块。这样，我们就可以通过嵌套 Generator 函数来组合多个 Generator 函数，从而提高代码的可读性和可维护性。

3. Generator 函数的返回值

在 Generator 函数内部，我们可以使用 return 语句返回一个值，并终止 Generator 函数的执行。如果在 Generator 函数内部没有使用 return 语句显式返回任何值，则迭代器对象的 value 属性默认为 undefined。

// javascriptcn.com 代码示例
function* gen() {
  yield 'Hello,';
  yield 'world!';
  return 'Goodbye,';
}

const iterator = gen();
console.log(iterator.next()); // { value: 'Hello,', done: false }
console.log(iterator.next()); // { value: 'world!', done: false }
console.log(iterator.next()); // { value: 'Goodbye,', done: true }

上面代码中，gen 函数定义了三个 yield 语句和一个 return 语句。在执行到 return 语句时，Generator 函数终止执行，并返回 'Goodbye,'。

4. 异步操作和 Promise 的结合

Generator 函数的最大优势在于，它可以让异步操作代码看起来像同步操作代码一样。这样，我们就可以使用同步的代码结构来管理异步操作，从而提高程序的可读性和可维护性。

在 ES9 中，我们使用 async/await 和 Promise 结合可以更加优雅地使用 Generator 函数。例如，下面的代码展示了如何使用 Generator 函数实现异步地读取文件，并输出文件内容。

// javascriptcn.com 代码示例
const fs = require('fs').promises;

function* gen() {
  try {
    const content = yield fs.readFile('./file.txt', 'utf8');
    console.log(content);
  } catch (error) {
    console.error(error);
  }
}

const iterator = gen();
const promise = iterator.next().value;
promise.then((result) => {
  iterator.next(result);
}).catch((error) => {
  iterator.throw(error);
});

上面代码中，我们定义了一个 Generator 函数 gen，它异步地读取文件，并在控制台输出文件内容。在 try 块内，我们使用 yield 语句暂停函数的执行，并返回一个 Promise 对象。在 catch 块内，我们对读取文件的错误进行了处理。

在主函数中，我们获取迭代器对象，并调用迭代器的 next 方法，返回一个 Promise 对象。在 Promise 对象的 then 方法中，我们将上一次的执行结果传递给迭代器的 next 方法，继续执行 Generator 函数的代码块。如果发生错误，则在 Promise 对象的 catch 方法中，我们调用迭代器的 throw 方法抛出错误，并在 Generator 函数内部捕获和处理错误。

5. 学习指导和总结

本文介绍了 ES9 引入的 Generator 函数，包括了 Generator 函数的基本语法，yield* 语句，返回值和异步操作和 Promise 的结合。通过本文的学习，我们可以掌握使用 Generator 函数编写优雅的异步代码的技巧，并提高程序的可读性和可维护性。

如果您对 Generator 函数还不是很了解，可以先从 ES6 的 Generator 函数入手，再逐渐掌握更高级的用法。另外，使用 async/await 和 Promise 结合可以更加简洁地使用 Generator 函数，建议您学习和使用这些语法。

总之，掌握 Generator 函数，可以让我们更好地理解和运用异步操作和迭代器对象，是 Web 前端开发的必备技能之一。

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