如何在 ES9 中使用 Generator 生成器

ES9 中使用 Generator 生成器

在 ES6 中，JavaScript 引入了新的概念：Generator 生成器。在 ES9 中，更加完善了 Generator 的相关特性，拓展了其功能。本文将详细讲述如何使用 ES9 中的 Generator 生成器，从基本概念到实际应用，以及可以实现的效果。

Generator 生成器基本概念

Generator 生成器可以被理解为一个函数迭代器，可以将函数以可暂停的方式执行，并保留其内部状态。通过使用 function* 语法定义一个 Generator：

function* generatorFunction() {
  // Generator 函数体
}

在函数体内部，通过 yield 关键字来暂停函数，我们可以通过一个简单的示例来了解 Generator：

function* generatorFunction() {
  let n = 0;
  while (true) {
    yield n++;
  }
}

const generator = generatorFunction();
console.log(generator.next().value) // 0
console.log(generator.next().value) // 1
console.log(generator.next().value) // 2

在上述示例中，Generator 函数定义了一个无限执行的 while 循环，每次循环通过 yield 暂停函数，返回当前 n 的值。通过调用 generator.next() 来恢复函数，并返回上次暂停的值。由于这是一个无限执行的函数，我们可以每次调用 generator.next() 来获取新值。

Generator 生成器中的参数和异常处理

在 Generator 中也可以向函数中传递参数，并通过 throw 关键字来抛出异常。来看一个示例：

function* generatorFunction(x) {
  let sum = x;
  while (true) {
    try {
      const value = yield sum++;
      if (value) sum += value;
    } catch(e) {
      console.log(e);
    }
  }
}

const generator = generatorFunction(3);
console.log(generator.next().value) // 3
console.log(generator.next(2).value) // 5
console.log(generator.throw("Invalid value")) // Invalid value
console.log(generator.next().value) // 6

在上述示例中，我们向 Generator 函数传递了一个初始值 x=3 ，并通过 try 和 catch 处理了抛出的异常。在每次执行 yield 后，都会对传递的参数进行判断，如果存在，则将其加入计算结果。最后，在执行 console.log(generator.throw("Invalid value")) 时会抛出一个异常。

Generator 生成器实际应用

Generator 除了可以用来实现无限循环外，还可以用来异步操作。在 JavaScript 中，异步任务可以通过回调函数或者 Promise 来实现。在 ES6 中，Generator 还可以与 Promise 结合来实现异步任务调度。

function* getName(){
  const name = yield fetch('https://api.github.com/users/octocat').then(res => res.json()).then(data => data.name);
  console.log(name);
}
 
const gen = getName();
const promise = gen.next().value;
promise.then(res => gen.next(res));

在上述示例中，我们通过向 Generator 函数传递参数来获取 GitHub API 中用户的名字。使用了 Promise 和 fetch 进行异步请求调用，在调用 gen.next(res) 方法时，将获取到的任务结果传递给 Generator 函数。

除了结合 Promise 处理异步操作外，Generator 还可以在实际开发中结合自动化测试、迭代器等场景得到应用。

总结

本文从 Generator 基本概念到实际应用及与 Promise 结合使用，详细介绍了在 ES9 中如何使用 Generator 生成器。在实际开发中，可以结合 Generator 和 Promise 实现异步任务调度、结合迭代器进行数据遍历等功能。Generator 的出现扩展了 JavaScript 的编程范式，也让代码变得更加优雅、简洁，实现更加方便。

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