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的使用将变得越发广泛。