JS中的 for of 与 Generator

2024-02-12 20:28:00

for of 循环的工作原理

for of 循环是一种用于遍历可迭代对象的循环语句，它可以遍历数组、字符串、Set 和 Map 等数据结构。for of 循环的语法如下：

for (const element of iterable) {
  // 在此块中使用 element
}

当执行 for of 循环时，JavaScript 首先会检查 iterable 是否可迭代，如果不可迭代则抛出 TypeError 异常。接下来，JavaScript 会创建一个迭代器对象，该对象实现了 next() 方法，用于返回可迭代对象的下一个值。

然后，JavaScript 会不断调用迭代器的 next() 方法，直到返回 done: true 为止。在每次调用 next() 方法时，JavaScript 都会将返回的值赋给 element 变量。

Generator 函数

Generator 函数是一种特殊的函数，它可以暂停执行并返回一个迭代器对象。Generator 函数的语法如下：

function* generatorFunction() {
  // 代码块
  yield value;
  // 代码块
  yield value;
  // ...
}

当执行 Generator 函数时，JavaScript 会创建一个 Generator 对象，该对象实现了 next() 方法，用于返回 Generator 函数的下一个值。

与 for of 循环类似，JavaScript 会不断调用 Generator 对象的 next() 方法，直到返回 done: true 为止。在每次调用 next() 方法时，JavaScript 都会执行 Generator 函数中的代码块，直到遇到 yield 。当遇到 yield 关键字时，JavaScript 会暂停执行 Generator 函数并返回 yield 表达式的值。

for of 循环和 Generator 函数的联系

for of 循环和 Generator 函数之间存在着密切的联系，for of 循环可以用于遍历 Generator 函数返回的迭代器对象。

const generator = generatorFunction();
for (const value of generator) {
  // 在此块中使用 value
}

在这个例子中，generatorFunction() 是一个 Generator 函数，它返回一个迭代器对象。for of 循环会遍历这个迭代器对象，并依次将迭代器对象中的值赋给 value 变量。

Generator 函数在异步编程中的应用

Generator 函数非常适合用于异步编程，因为它们可以暂停执行并等待异步操作完成。例如，以下代码演示了如何使用 Generator 函数来实现一个异步的 fetch 请求：

function* fetchAsync(url) {
  const response = yield fetch(url);
  const data = yield response.json();
  return data;
}

const generator = fetchAsync('https://example.com/api');

generator.next().value.then((response) => {
  generator.next(response).value.then((data) => {
    console.log(data);
  });
});

在这个例子中，fetchAsync() 是一个 Generator 函数，它返回一个迭代器对象。Generator 函数首先执行 yield fetch(url)，然后等待 fetch() 请求完成。当 fetch() 请求完成后，Generator 函数会继续执行并执行 yield response.json()，然后等待 response.json() 请求完成。当 response.json() 请求完成后，Generator 函数会返回 data 值。