揭秘JS生成器：从概念到应用

2023-03-15 07:14:23

探索 JavaScript 中生成器的奇妙世界：自定义可迭代对象、状态机和异步操作

什么是生成器？

想象一下一个函数拥有暂停和恢复执行的能力，就像一场精彩的电影可以暂停和继续播放一样。这就是生成器，JavaScript 世界中独一无二的存在。使用 function* 声明，生成器函数在内部利用 yield 关键字来控制执行的流程。

生成器有什么用处？

生成器的强大之处在于其广泛的应用场景：

创建自定义可迭代对象： 生成器可以轻松创建可迭代对象，让你能够轻松遍历一系列值。
实现状态机： 想象一下一个交通信号灯不断在红、黄、绿之间切换，生成器可以轻松实现这种状态转换。
惰性计算： 生成器可以延迟计算，只在需要时才执行，从而节省资源和提高效率。
简化异步操作： 在处理异步操作时，生成器可以通过暂停执行来等待结果，简化代码流程。

生成器示例

为了更好地理解生成器的妙用，让我们通过几个示例来探索：

1. 自定义可迭代对象：

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

const fib = fibonacci();
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2

2. 状态机：

function* trafficLight() {
  let state = 'green';

  while (true) {
    switch (state) {
      case 'green':
        yield 'green';
        state = 'yellow';
        break;
      case 'yellow':
        yield 'yellow';
        state = 'red';
        break;
      case 'red':
        yield 'red';
        state = 'green';
        break;
    }
  }
}

const light = trafficLight();
console.log(light.next().value); // green
console.log(light.next().value); // yellow
console.log(light.next().value); // red

3. 惰性计算：

function* primes() {
  let num = 2;

  while (true) {
    if (isPrime(num)) {
      yield num;
      num++;
    } else {
      num++;
    }
  }

  function isPrime(num) {
    for (let i = 2; i < num; i++) {
      if (num % i === 0) {
        return false;
      }
    }
    return true;
  }
}

const prime = primes();
console.log(prime.next().value); // 2
console.log(prime.next().value); // 3
console.log(prime.next().value); // 5

4. 异步操作：

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

const getUserData = fetchUserData(123);
getUserData.next().value.then(response => {
  getUserData.next(response).value.then(data => {
    console.log(data);
  });
});