从零开始了解 JavaScript 生成器：掌握 ES6 强大工具

2023-10-23 19:27:04

JavaScript 生成器简介

JavaScript 生成器是一个特殊的函数，它可以暂停和恢复自己的执行。这使得它在许多场景中都非常有用，比如：

创建迭代器：生成器可以很容易地创建迭代器，而迭代器是 JavaScript 中一种强大的数据遍历机制。
实现协程：协程是一种并发编程技术，它允许多个任务交替执行，而生成器可以轻松实现协程。
异步编程：生成器可以很好地处理异步操作，比如网络请求或文件读写。

生成器的基本语法

生成器函数的定义与普通函数略有不同，它需要在函数名称之前加上一个星号 *。例如：

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

在这个例子中，myGenerator 是一个生成器函数。yield 是生成器的关键，它表示函数在执行到此位置时会暂停，并返回生成器函数的值。当再次调用生成器函数时，它将从暂停的位置继续执行。

使用生成器创建迭代器

生成器函数可以很容易地创建迭代器。迭代器是一个对象，它提供了 next() 方法，该方法返回一个包含当前值和 done 属性的对象。done 属性是一个布尔值，表示迭代器是否已经遍历完成。

我们可以通过以下方式使用生成器函数创建迭代器：

const myIterator = myGenerator();

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

生成器的高级技巧

除了上述基本用法之外，生成器还有一些高级技巧，比如：

发送值给生成器： 可以使用 next() 方法给生成器发送值。例如：

function* myGenerator() {
  const value = yield;
  console.log(value);
}

const myIterator = myGenerator();

myIterator.next(); // { value: undefined, done: false }
myIterator.next(10); // { value: 10, done: false }
myIterator.next(); // { value: undefined, done: true }

使用 return 关键字终止生成器： 可以使用 return 关键字来终止生成器。例如：

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

const myIterator = myGenerator();

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