ES6 中的生成器（Generator）详解-JavaScript中文网-JavaScript教程资源分享门户

介绍

生成器（Generator）是 ES6 中新增的一种函数类型，它的作用是在函数执行过程中暂停执行，并且可以在暂停的过程中向函数传递数据。在 ES6 之前，实现这种暂停执行的功能只能通过回调函数或者 Promise 来实现，而生成器则提供了一种更为简单、直观的方式。

基本语法

生成器函数使用 function* 关键字来定义，其基本语法如下：

function* generator() {
  // 函数体
}

在生成器函数中，可以使用 yield 关键字来暂停函数的执行，并将一个值传递给调用方。例如：

// javascriptcn.com 代码示例
function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

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

在上面的例子中，我们定义了一个生成器函数 generator，并通过 yield 关键字暂停了函数的执行，并分别传递了值 1、2 和 3 给调用方。在调用方使用 next() 方法继续执行生成器函数时，函数会从上一次暂停的位置继续执行，直到遇到下一个 yield 关键字或者函数执行结束。

生成器的应用

生成器的应用非常广泛，下面我们来介绍一些常见的用法。

生成器的迭代器

在上面的例子中，我们使用 next() 方法来迭代生成器函数，这是因为生成器函数本身就是一个迭代器。因此，我们可以使用 for...of 循环来迭代生成器函数，例如：

// javascriptcn.com 代码示例
function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

for (const value of generator()) {
  console.log(value);
}
// 1
// 2
// 3

在上面的例子中，我们使用 for...of 循环来迭代生成器函数 generator，并依次输出每个值。

生成器的嵌套

生成器函数可以嵌套调用，这样可以使代码更加简洁、易于理解。例如：

// javascriptcn.com 代码示例
function* innerGenerator() {
  yield 2;
  yield 3;
}

function* outerGenerator() {
  yield 1;
  yield* innerGenerator();
  yield 4;
}

for (const value of outerGenerator()) {
  console.log(value);
}
// 1
// 2
// 3
// 4

在上面的例子中，我们定义了两个生成器函数 innerGenerator 和 outerGenerator，并通过 yield* 关键字来嵌套调用 innerGenerator。在 for...of 循环中迭代 outerGenerator 函数时，依次输出每个值。

生成器的异步编程

生成器函数可以与 Promise 结合使用，实现异步编程。例如：

// javascriptcn.com 代码示例
function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('data');
    }, 1000);
  });
}

function* generator() {
  const data = yield fetchData();
  console.log(data);
}

const g = generator();
const promise = g.next().value;
promise.then(data => {
  g.next(data);
});

在上面的例子中，我们定义了一个异步函数 fetchData，并在生成器函数中使用 yield 关键字暂停函数的执行，等待异步函数返回数据。在调用方中，我们通过 next() 方法获取生成器函数的返回值，并将其传递给异步函数，等待异步函数完成后继续执行生成器函数。

总结

生成器是 ES6 中新增的一种函数类型，它可以在函数执行过程中暂停执行，并且可以在暂停的过程中向函数传递数据。生成器的应用非常广泛，包括生成器的迭代器、生成器的嵌套和生成器的异步编程等。学习生成器可以让我们更加深入地了解 JavaScript 的底层机制，同时也可以提高我们的编程效率和代码质量。

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