c语言编程笔录

首页 >   > 笔记大全

笔记大全

JavaScript中Generator函数yield表达式示例

更新时间：2023-06-20

前言

Generator函数是一种特殊类型的函数，可以通过yield表达式来实现暂停和恢复函数执行的能力。Generator函数与普通函数不同之处在于，它可以暂停执行并通过yield关键字产生一个值。这使得Generator函数非常适合用于处理需要分步执行或惰性求值的情况。在JavaScript中，Generator函数通过function*语法来定义。

1. 基本语法

要定义一个Generator函数，我们可以使用function*关键字：

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

在上面的例子中，我们定义了一个简单的Generator函数，它通过yield关键字依次返回了数字1、2和3。 Generator函数会返回一个迭代器对象，我们可以通过调用next()方法来依次获取Generator函数yield表达式返回的值。

2. 迭代器对象

调用Generator函数后，会返回一个迭代器对象。这个迭代器对象有一个next()方法，每次调用next()方法会返回一个包含value和done属性的对象。value属性表示yield表达式返回的值，done属性表示Generator函数是否已经执行完毕。

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

在上面的例子中，我们通过调用next()方法依次获取了Generator函数yield表达式的返回值。当Generator函数执行完毕后，继续调用next()方法会返回一个value为undefined，done为true的对象，表示Generator函数已经执行完毕。

3. 生成器 yield 表达式

在Generator函数中，可以通过yield关键字产生一个值，并且暂停函数的执行。当函数恢复执行时，从上次暂停的地方继续执行。

function* myGenerator() {
  console.log('执行第一次yield之前');
  yield 1;
  console.log('执行第二次yield之前');
  yield 2;
  console.log('执行第三次yield之前');
  yield 3;
  console.log('执行结束');
}

const gen = myGenerator();
console.log(gen.next().value); // 执行第一次yield之前，并返回1
console.log(gen.next().value); // 执行第二次yield之前，并返回2
console.log(gen.next().value); // 执行第三次yield之前，并返回3
console.log(gen.next().value); // 执行结束，并返回undefined

在上面的例子中，我们在Generator函数中使用了console.log()语句来模拟函数执行的过程。通过调用gen.next().value，我们可以依次获取 yield 表达式返回的值。

4. Generator函数的应用场景

Generator函数在许多情况下都是非常有用的，特别是在处理需要分步执行或惰性求值的情况下。

一种常见的用法是通过Generator函数进行异步编程。通过将异步操作封装在Generator函数内部，并使用yield表达式暂停函数的执行，我们可以通过同步的方式编写异步代码。

function* fetchData() {
  try {
    const data = yield fetch('https://api.example.com/data');
    console.log(data);
  } catch (error) {
    console.log('发生错误：', error);
  }
}

function run() {
  const gen = fetchData();
  const promise = gen.next().value;
  promise.then(response => gen.next(response).value)
         .catch(error => gen.throw(error));
}

run();

在上面的例子中，我们定义了一个fetchData() Generator函数来封装一个异步请求。通过调用gen.next()方法，Generator函数会暂停执行，并返回一个Promise对象。接着，我们使用Promise的then()方法来获取请求的响应，并将其作为参数传递给gen.next()方法，从而实现了Generator函数的恢复执行。

以上就是关于JavaScript中Generator函数yield表达式的介绍和示例，希望能对您有所帮助。

图文推荐