深入挖掘 JavaScript 生成器

2024-02-11 02:47:50

前言

在上一篇文章中，我们深入理解了迭代器的原理和作用。在这一篇中，我们来深扒与迭代器息息相关的生成器。

关于生成器，红宝书是这样的：

生成器是 JavaScript 中一种强大的工具，它允许您轻松地创建和使用迭代器。生成器函数与普通函数的不同之处在于，它可以使用yield来暂停执行，并在以后继续执行。

生成器的原理

生成器函数与普通函数的不同之处在于，它可以使用yield关键字来暂停执行，并在以后继续执行。当一个生成器函数被调用时，它不会立即执行，而是返回一个生成器对象。这个生成器对象包含了生成器函数的执行状态，包括当前执行到的位置、局部变量的值等。

当我们使用next()方法调用生成器对象时，生成器对象就会继续执行，直到遇到下一个yield关键字或执行完毕。此时，next()方法会返回一个包含了当前生成器函数执行结果的对象。这个对象包含两个属性：value和done。value属性包含了当前生成器函数的执行结果，done属性是一个布尔值，表示生成器函数是否已经执行完毕。

生成器的用法

生成器函数的用法非常简单，只需要在函数内部使用yield关键字即可。yield关键字可以用来暂停函数的执行，并返回一个值。当函数再次被调用时，它将从yield关键字处继续执行。

以下是一个生成器函数的示例：

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

这个生成器函数可以用来生成一个数字序列。我们可以使用以下代码来调用这个生成器函数：

const generatorObject = generator();

console.log(generatorObject.next()); // { value: 1, done: false }
console.log(generatorObject.next()); // { value: 2, done: false }
console.log(generatorObject.next()); // { value: 3, done: false }
console.log(generatorObject.next()); // { value: undefined, done: true }

输出结果为：

{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: undefined, done: true }

生成器的应用

生成器在 JavaScript 中有很多应用，比如：

创建迭代器
实现协程
生成数据序列
实现惰性求值

创建迭代器

生成器可以很容易地创建迭代器。只需使用yield关键字将生成器函数变成一个迭代器即可。例如，以下代码就是一个创建迭代器的生成器函数：

function* createIterator() {
  yield 1;
  yield 2;
  yield 3;
}

我们可以使用以下代码来创建一个迭代器：

const iterator = createIterator();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

输出结果为：

{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: undefined, done: true }

实现协程

生成器还可以用来实现协程。协程是一种并发编程技术，它允许多个任务同时执行。在 JavaScript 中，可以使用生成器来实现协程。例如，以下代码就是一个使用生成器实现的协程示例：

function* coroutine1() {
  yield 1;
  yield 2;
  yield 3;
}

function* coroutine2() {
  yield 4;
  yield 5;
  yield 6;
}

const coroutine1Object = coroutine1();
const coroutine2Object = coroutine2();

while (true) {
  const result1 = coroutine1Object.next();
  if (result1.done) {
    break;
  }

  console.log(result1.value);

  const result2 = coroutine2Object.next();
  if (result2.done) {
    break;
  }

  console.log(result2.value);
}

输出结果为：

生成数据序列

生成器还可以用来生成数据序列。例如，以下代码就是一个使用生成器生成数据序列的示例：

function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

const sequence = generateSequence(1, 10);

console.log([...sequence]); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

输出结果为：

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

实现惰性求值

生成器还可以用来实现惰性求值。惰性求值是一种计算技术，它可以延迟计算直到需要时才进行计算。在 JavaScript 中，可以使用生成器来实现惰性求值。例如，以下代码就是一个使用生成器实现惰性求值的示例：

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

const fibonacciGenerator = fibonacci();

console.log(fibonacciGenerator.next().value); // 0
console.log(fibonacciGenerator.next().value); // 1
console.log(fibonacciGenerator.next().value); // 1
console.log(fibonacciGenerator.next().value); // 2
console.log(fibonacciGenerator.next().value); // 3