JavaScript中 ES6 generator数据类型详解

什么是 generator？

generator 是 ES6 中新增加的一种数据类型，它可以在函数执行的过程中暂停执行，并可以恢复执行。

在函数中使用 yield 关键字可以暂停函数的执行，同时可以通过 next() 方法恢复函数的执行。

使用 generator 可以方便地实现异步操作、迭代器等功能。

如何定义 generator 函数？

定义 generator 函数时需要在函数名前加上 *，例如下面的示例：

function* myGenerator() {
  yield 'apple';
  yield 'banana';
  yield 'orange';
}

如何使用 generator 函数？

在函数中使用 yield 关键字可以暂停函数的执行，yield 表达式返回的是一个 IteratorResult 对象，包含两个属性：value 和 done。

当使用 next() 方法调用 generator 函数时，函数会从 yield 表达式处继续执行，直到出现下一个 yield 表达式或函数结束为止。

下面是一个例子：

function* myGenerator() {
  yield 'apple';
  yield 'banana';
  yield 'orange';
}

const gen = myGenerator();

console.log(gen.next()); // { value: 'apple', done: false }
console.log(gen.next()); // { value: 'banana', done: false }
console.log(gen.next()); // { value: 'orange', done: false }
console.log(gen.next()); // { value: undefined, done: true }

generator 函数的位置

在 ES6 中，generator 函数可以出现在以下位置：

在函数定义中；
在类定义中；
在对象字面量中；
在某些表达式中（如 yield*、for..of 等）。

下面是一个使用 generator 函数实现斐波那契数列的例子：

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

const gen = fibonacci();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
console.log(gen.next().value); // 5
console.log(gen.next().value); // 8

generator 函数的实际应用

使用 generator 函数可以很方便地实现异步操作。下面是一个使用 generator 函数实现异步操作的例子：

function* fetch(username) {
  const url = `https://api.github.com/users/${username}`;
  const response = yield fetch(url);
  const data = yield response.json();
  return data;
}

const gen = fetch('octocat');

gen.next().value.then(response => {
  return gen.next(response).value;
}).then(data => {
  console.log(data);
});