ES6 面试题 | 09.精选 ES6 面试题（生成器）

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

解释一下生成器的工作原理。

生成器是一种特殊的函数，它可以在迭代过程中逐步产生值，而不是一次性返回所有结果。生成器函数使用关键字function*定义，并使用yield语句来产生值。

当调用生成器函数时，它不会立即执行，而是返回一个迭代器对象。可以使用next()方法来迭代生成器并获取下一个值。每次调用next()方法，生成器函数会从上次暂停的地方继续执行，直到遇到下一个yield语句。yield语句将表达式的值作为当前迭代的值返回，并暂停生成器函数的执行。

生成器函数还可以使用throw()方法来抛出异常，使用return()方法来结束生成器的执行。当生成器函数抛出异常或返回时，迭代器对象会抛出异常或返回undefined，表示迭代结束。

生成器的一个重要优点是它可以按需生成值，避免一次性生成大量数据并占用大量内存。此外，生成器还可以与其他迭代工具（如for...of循环）配合使用，提供简洁和高效的迭代方式。

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

function* generateNumbers() {
  let i = 1;
  while (i <= 10) {
    yield i++;
  }
}

const generator = generateNumbers();
console.log(generator.next().value);  
console.log(generator.next().value);  
console.log(generator.next().value);  

在上面的示例中，generateNumbers()是一个生成器函数，它使用yield语句逐步生成从 1 到 10 的数字。通过调用next()方法，可以迭代生成器并获取下一个值。

如何在JavaScript中使用生成器函数？

在 JavaScript 中，生成器函数是一种特殊的函数，可以通过使用function*关键字来定义。生成器函数与普通函数的不同之处在于，它们可以通过yield关键字暂停和恢复执行，并且可以按需生成值。

以下是一些使用生成器函数的基本示例：

1. 简单的生成器函数：

function* generateNumbers() {
  for (let i = 1; i <= 5; i++) {
    yield i;
  }
}

const generator = generateNumbers();
// 通过 next()方法迭代生成器
console.log(generator.next().value);  
console.log(generator.next().value);  
console.log(generator.next().value);  

在这个示例中，generateNumbers()是一个生成器函数，它使用yield关键字生成从 1 到 5 的数字。通过调用next()方法，可以迭代生成器并获取下一个值。

2. 使用生成器函数处理异步操作：

function* generateAsyncData() {
  // 模拟异步操作
  yield new Promise(resolve => setTimeout(resolve, 1000, 'Value 1'));  
  yield new Promise(resolve => setTimeout(resolve, 2000, 'Value 2'));  
  yield new Promise(resolve => setTimeout(resolve, 3000, 'Value 3'));  
}

const generator = generateAsyncData();

// 通过 next()方法迭代生成器
console.log(generator.next().value);  
console.log(generator.next().value);  
console.log(generator.next().value);  

在这个示例中，generateAsyncData()是一个生成器函数，它使用yield关键字来模拟异步操作。每个yield语句都返回一个 Promise，在异步操作完成后通过resolve()方法解析并返回值。

3. 与其他迭代工具配合使用：

function* generateNumbers() {
  for (let i = 1; i <= 5; i++) {
    yield i;
  }
}

// 使用 for...of 循环迭代生成器
for (const value of generateNumbers()) {
  console.log(value);
}

// 使用 async...await 语法结合生成器处理异步操作
async function processAsyncGenerator() {
  for await (const value of generateAsyncData()) {
    console.log(value);
  }
}

processAsyncGenerator();

在这个示例中，展示了如何将生成器函数与for...of循环和async...await语法结合使用。

生成器函数是 JavaScript 中的一种强大工具，提供了一种灵活的方式来按需生成值。通过使用yield关键字，生成器函数可以暂停和恢复执行，并且可以与其他迭代工具和异步操作无缝配合使用。

生成器函数和Promise有什么关系？

生成器函数和 Promise 之间没有直接的关系，它们是 JavaScript 中的两个不同的概念。

• 生成器函数是一种特殊的函数，可以通过使用yield关键字来暂停和恢复函数的执行。生成器函数可以用于生成一系列的值，并且可以与其他迭代工具（如for...of循环）配合使用。

• Promise 是 JavaScript 中的一种异步操作的抽象，用于表示异步操作的结果。Promise 对象可以用于处理异步操作的成功和失败情况，并提供了一些有用的方法，如then()、catch()和finally()。

虽然生成器函数和 Promise 没有直接的关系，但是它们可以结合使用来处理异步操作。例如，可以在生成器函数中使用yield关键字来暂停函数的执行，并使用 Promise 来处理异步操作的结果。这样可以实现一种类似于异步生成器的效果。

以下是一个示例，展示了如何在生成器函数中使用 Promise：

function* generateAsyncData() {
  // 模拟异步操作
  yield new Promise(resolve => setTimeout(resolve, 1000, 'Value 1'));  
  yield new Promise(resolve => setTimeout(resolve, 2000, 'Value 2'));  
  yield new Promise(resolve => setTimeout(resolve, 3000, 'Value 3'));  
}

const generator = generateAsyncData();

// 使用 next()方法迭代生成器
let result = generator.next();
while (!result.done) {
  result = generator.next(result.value);
  console.log(result.value);  
}

在这个示例中，generateAsyncData()是一个生成器函数，它使用yield关键字来模拟异步操作。每个yield语句都返回一个 Promise，在异步操作完成后通过resolve()方法解析并返回值。然后，通过使用next()方法迭代生成器，可以逐步处理异步操作的结果。

这样，生成器函数和 Promise 可以结合使用来处理异步操作，并提供一种按需生成值的方式。

解释generator（生成器）函数的作用及其与普通函数的区别。

生成器函数是一种特殊的函数，可以在迭代过程中按需生成值，而不是一次性生成所有值。生成器函数使用function*关键字定义，并使用yield语句来生成值。

与普通函数的区别如下：

1. 生成器函数是一个迭代器：生成器函数返回一个迭代器对象，可以使用next()方法来逐步获取生成的值。普通函数返回一个单次调用的结果。

2. 生成器函数可以暂停和恢复：当遇到yield语句时，生成器函数会暂停执行，并将yield后面的表达式作为当前迭代的值返回。然后，每次调用next()方法，生成器函数会从上次暂停的地方继续执行，直到再次遇到yield语句。

3. 生成器函数节省内存：生成器函数按需生成值，不会一次性生成所有值，因此可以节省内存。普通函数会一次性生成所有值，并将它们存储在内存中。

4. 生成器函数可以与其他迭代工具配合使用：生成器函数可以与for...of循环、iter()方法等迭代工具配合使用，方便地迭代生成的值。普通函数通常需要使用其他方法来获取其返回的值，如console.log()。

示例如下：

function* generateNumbers() {
  let i = 1;
  while (i <= 10) {
    yield i++;
  }
}

// 使用 for...of 循环迭代生成的值
for (const num of generateNumbers()) {
  console.log(num);
}

在上面的示例中，generateNumbers()是一个生成器函数，它使用yield语句逐步生成从 1 到 10 的数字。可以使用for...of循环来迭代生成的值。