JavaScript 中 Generator 函数怎么使用

JavaScript 中的 Generator 函数可以实现不执行到底的函数能力、可以在函数执行的任意阶段进行暂停和恢复。这种特性可以用于解决诸如异步编程的复杂性、实现迭代器模式以及协同程序等多种用途。它的核心在于 function* 语法和 yield 关键字的配合使用。通过 yield，函数可以暂停执行并且保存执行上下文，稍后可以通过 next() 方法恢复执行。

接下来，让我们更详细地探讨Generator函数的使用方法。

一、基本语法

Generator函数通过在普通函数定义中的 function 关键字后添加一个星号（*）来标记。函数体内部使用 yield 表达式定义不同的内部状态。

function* generatorFunction() {

  console.log('执行开始');
  yield '状态1';
  console.log('执行恢复');
  yield '状态2';
  console.log('执行结束');
}

在上面的代码中，每当执行到 yield 表达式时，函数执行将会暂停。该函数返回一个遍历器对象，这个对象具有 next() 方法，通过它可以恢复函数执行直到遇到下一个 yield 或函数结束。

二、使用next()方法

当调用Generator函数时，函数不会立即执行，而是返回一个指向内部状态的指针对象，也就是遍历器对象。

const gen = generatorFunction();

遍历器对象的 next() 方法被调用时，Generator函数恢复执行，直到遇到下一个 yield 或 return 语句。

console.log(gen.next()); // { value: '状态1', done: false }

console.log(gen.next()); // { value: '状态2', done: false }
console.log(gen.next()); // { value: undefined, done: true }

每次 next() 调用返回的对象包含两个属性：value 表示当前内部状态的值，done 表示Generator函数是否执行完毕。

三、yield表达式

yield 表达式就是暂停标志。通过 yield 可以暂停函数执行，并且可以通过 yield 返回一个值。执行 next() 方法时可恢复执行。

yield 在Generator函数中可用来控制函数的执行流程，促成函数执行的暂停及恢复：

function* countAppleSales() {

  let saleList = [3, 7, 5];
  for (let i = 0; i < saleList.length; i++) {
    yield saleList[i];
  }
}

四、传递参数

每次调用 next() 方法时，都可以传递参数，这个参数会被当作上一次执行的 yield 表达式的返回值。

function* genFuncWithParams() {

  const x = yield '需要输入x';
  const y = yield '需要输入y';
  return x + y;
}
const genWithParams = genFuncWithParams();
console.log(genWithParams.next()); // { value: '需要输入x', done: false }
console.log(genWithParams.next(2)); // 这里的2被当做第一个yield的结果
console.log(genWithParams.next(3)); // 这里的3被当做第二个yield的结果

在上面的示例中，第二次和第三次执行 next() 方法时传递的参数，分别成了第一个和第二个 yield 表达式的结果，这个特性使得Generator函数可以实现更加灵活的控制。

五、Generator函数的异常处理

Generator 函数内部还可以部署错误处理代码，捕获函数体外抛出的错误。

function* genWithErrorHandling() {

  try {
    yield '试一试';
  } catch (e) {
    console.log('捕获到错误:', e);
  }
}
const genError = genWithErrorHandling();
console.log(genError.next());
genError.throw(new Error('出错了')); // { value: undefined, done: true }

通过遍历器的 throw() 方法抛出的错误，可以被函数体内的 catch 代码块捕获。这为异步编程提供了统一的错误处理机制。

六、Generator与异步编程

Generator 函数最大的应用场景是处理异步操作，配合Promise对象可以使异步逻辑更加清晰。

function* fetchUserById(id) {

  const user = yield fetch(`https://api.example.com/users/${id}`);
  return user.json();
}
const genUser = fetchUserById('123');
const userPromise = genUser.next().value; // 返回的是Promise对象
userPromise.then(data => {
  genUser.next(data); // 将异步操作的结果传递回Generator函数
});

七、Generator函数返回的遍历器对象

Generator函数返回的遍历器对象，除了 next 方法，还有 throw 方法和 return 方法。

• next 方法用来恢复执行，如前文所介绍。
• throw 方法主要用来在函数外部抛出错误，然后在Generator函数内部捕获。
• return 方法则用于提前退出Generator函数。

function* genFuncWithReturn() {

  yield 'a';
  yield 'b';
  return 'The end';
}
const genReturn = genFuncWithReturn();
console.log(genReturn.next()); // { value: 'a', done: false }
console.log(genReturn.return('提前退出')); // { value: '提前退出', done: true }

通过 return() 方法可以提前让生成器函数返回，后续的 yield 不再执行。

八、Generator作为对象属性的语法

当Generator函数用作对象的属性时，可以简写如下：

let obj = {

  * myGeneratorMethod() {
    // ...Generator函数体
  }
};

这通过 * 将对象的方法定义为Generator函数。

九、应用场景举例

Generator 函数配合协程库如 co，可以实现自动执行异步任务。

const co = require('co');

co(function* () {
  const [res1, res2] = yield [
    Promise.resolve('第一个异步结果'),
    Promise.resolve('第二个异步结果')
  ];
  console.log(res1, res2);
});

十、小结

总之，Generator 函数为JavaScript提供了一种更加方便和强大的函数执行控制方法。通过 yield 实现执行的暂停与恢复，结合遍历器更加便捷地进行数据的读取和传递。在处理异步编程、流控制等方面都有很大的用处。不仅增强了代码的可读性，还提升了异步编程的效率和逻辑的清晰度。随着更多现代前端框架和库的利用，Generator的使用将变得越发广泛。

相关问答FAQs：

Q: 什么是 JavaScript Generator 函数？如何使用它？

A: JavaScript Generator 函数是一种特殊的函数，可以创建可迭代的对象。它使用 function* 关键字定义，并使用 yield 语句来生成一个或多个值。通过迭代器的 next() 方法，可以依次取得生成器函数中生成的每个值。

Q: Generator 函数有什么特点？可以举个使用 Generator 函数的例子吗？

A: Generator 函数具有特点：可以暂停和继续执行；通过 yield 语句生成多个值；可以迭代生成的值；可以向生成器函数传递参数。

以下是一个使用 Generator 函数的示例：

function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const generator = fibonacci();
console.log(generator.next().value); // 输出：0
console.log(generator.next().value); // 输出：1
console.log(generator.next().value); // 输出：1
console.log(generator.next().value); // 输出：2

Q: Generator 函数有什么应用场景？有没有其他常见的使用方法？

A: Generator 函数在异步编程中非常常见，它可以使代码更具可读性和可维护性。比如，通过 yield 和 next() 方法可以实现异步操作的流程控制，避免回调地狱。在客户端开发中，常常使用它来处理异步请求、迭代器和生成器，从而实现更加优雅的代码编写。另外，在处理大量数据的情况下，也可以使用 Generator 函数来逐步生成和处理数据，减少内存占用。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。