ES6 生成器(Generators)-ES6入门指南

当前位置:　首页>> 技术小册>> ES6入门指南

ES6生成器是JavaScript中一种特殊的函数，可以在函数执行的过程中暂停和恢复函数的执行。在本章节中，将深入探讨ES6生成器的概念、语法和用法，并通过代码示例来演示如何使用生成器函数。

1、生成器函数的概念

生成器函数是ES6引入的一种新类型的函数，它的执行过程可以被暂停和恢复。当生成器函数被调用时，它返回一个生成器对象，该对象可以用于在函数执行过程中暂停和恢复函数的执行。生成器函数可以看作是一种可迭代的序列，可以通过迭代器协议来遍历序列中的每个值。

生成器函数的定义方式与普通函数类似，但使用function*关键字来声明函数：

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

在生成器函数内部，我们可以使用yield语句来指定函数的执行点，并将一个值返回给调用者。每次调用生成器的next方法时，函数将从上一次yield语句的位置继续执行，并返回一个对象，该对象包含一个value属性和一个done属性。value属性包含当前yield语句的返回值，done属性表示生成器函数是否已经执行完毕。

2、生成器函数的语法

生成器函数的语法与普通函数的语法略有不同。以下是一些生成器函数的语法特点：

使用function*关键字来声明函数。
在函数体内部，可以使用yield语句来指定函数执行的返回点。
生成器函数可以像普通函数一样接受参数，并将参数传递给函数体内部的代码。
调用生成器函数时，不会立即执行函数体内的代码。相反，它会返回一个生成器对象，该对象可以在需要时按需执行生成器函数。
以下是一个简单的示例，演示了如何定义和调用生成器函数：

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}
const generatorObject = myGenerator();
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}

在上面的示例中，我们定义了一个名为myGenerator的生成器函数。该函数返回一个生成器对象，并且在函数体内部使用了三个yield语句来指定函数的执行点。我们创建了一个生成器对象，并连续调用了四次next方法来迭代生成器函数的执行。

第一次调用next方法时，生成器函数执行到第一个yield语句，并返回一个对象，该对象包含value属性为1，done属性为false。第二次调用next方法时，生成器函数继续执行，并返回一个对象，该对象的value属性为2，done属性为false。第三次调用next方法时，生成器函数执行到最后一个yield语句，并返回一个对象，该对象的value属性为3，done属性为false。最后一次调用next方法时，生成器函数执行结束，并返回一个对象，该对象的value属性为undefined，done属性为true。

3、生成器函数的应用

生成器函数可以在许多场景中使用，例如：

3.1 延迟执行
生成器函数可以用于延迟执行代码，这对于某些应用场景非常有用。例如，当需要处理大量数据时，可以使用生成器函数来逐步处理数据，而不是一次性处理所有数据。这种方式可以大大降低内存的使用量，从而提高应用程序的性能。

以下是一个简单的示例，演示了如何使用生成器函数来逐步处理数组中的元素：

function* lazyIterateArray(array) {
  for (let i = 0; i < array.length; i++) {
    yield array[i];
  }
}
const myArray = [1, 2, 3, 4, 5];
const generatorObject = lazyIterateArray(myArray);
for (const element of generatorObject) {
  console.log(element);
}

在上面的示例中，我们定义了一个名为lazyIterateArray的生成器函数，它使用yield语句来逐步返回数组中的每个元素。我们创建了一个数组myArray，并使用lazyIterateArray函数来创建一个生成器对象generatorObject。最后，我们使用for-of循环来遍历生成器对象，以逐个输出数组中的元素。

3.2 无限序列
生成器函数可以用于创建无限序列，这对于某些算法和应用场景非常有用。例如，我们可以使用生成器函数来创建一个无限斐波那契数列：

function* fibonacci() {
  let a = 0;
  let b = 1;
  while (true) {
    yield b;
    [a, b] = [b, a + b];
  }
}
const generatorObject = fibonacci();
for (let i = 0; i < 10; i++) {
  console.log(generatorObject.next().value);
}

在上面的示例中，我们定义了一个名为fibonacci的生成器函数，它使用yield语句来逐步返回斐波那契数列中的每个元素。我们创建了一个生成器对象generatorObject，并使用for循环来输出斐波那契数列的前10个元素。

3.3 协程
生成器函数可以用于实现协程，这是一种基于生成器函数的并发编程技术。协程是一种轻量级的线程，可以通过协作式多任务处理来实现。在JavaScript中，协程可以用生成器函数来实现。

以下是一个简单的示例，演示了如何使用生成器函数来实现协程：

function* asyncTask() {
  console.log('Task started');
  yield new Promise((resolve) => setTimeout(resolve, 1000));
  console.log('Task resumed');
  yield;
  console.log('Task completed');
}
const task = asyncTask();
task.next();
setTimeout(() => task.next(), 2000);

在上面的示例中，我们定义了一个名为asyncTask的生成器函数，它使用yield语句来控制异步任务的执行。我们创建了一个生成器对象task，并在第一次调用next方法时启动了异步任务。异步任务使用Promise来模拟一个需要1秒钟才能完成的操作。在异步任务的执行过程中，我们使用两个yield语句来暂停任务的执行，并在恰当的时候恢复执行。

最后，我们使用setTimeout来模拟异步任务的完成，并在2秒钟后调用next方法来恢复任务的执行。这样，异步任务就能够在正确的时间点恢复执行，并完成任务的处理。

小结
ES6生成器是JavaScript语言中的一种非常有用的特性，它提供了一种简单而强大的方式来实现迭代器和协程等功能。生成器函数使用yield语句来控制代码的执行流程，并允许我们在需要的时候暂停和恢复代码的执行。这使得生成器函数非常适合于处理异步和大数据量等情况，从而提高了应用程序的性能和可维护性。

在使用生成器函数时，我们需要注意以下几点：