JavaScript--同步和异步迭代器

正在奋斗的程序猿

已于 2023-07-31 09:24:11 修改

阅读量651

点赞数 2

分类专栏： JavaScript 文章标签： javascript 开发语言

于 2023-07-31 08:51:32 首次发布

本文链接：https://blog.csdn.net/m0_74293254/article/details/132015014

版权

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

在JavaScript中，同步迭代器和异步迭代器是用于处理迭代操作的两种不同类型迭代器。

同步迭代器（Sync Iterator）：

同步迭代器是一种按顺序同步返回元素的迭代器。它通过 next() 方法以同步方式返回下一个元素，并且直到所有元素都被迭代完毕后才会停止。同步迭代器可以使用 for...of 循环进行遍历，也可以使用 Iterator 接口的其他方法进行操作。例如，在ES6中，数组默认就是一个同步迭代器，你可以直接对它进行遍历操作。

同步迭代器通过Symbol.iterator方法创建，并使用for...of循环或者Array.from()等可迭代对象转换方法进行遍历。它会一次性返回所有的数据项，并阻塞代码执行，直到所有数据项都被遍历完毕。

下面是一个同步迭代器的示例：

const iterable = {
  [Symbol.iterator]() {
    let count = 0;
    return {
      next() {
        if (count < 3) {
          return { value: count++, done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

for (let item of iterable) {
  console.log(item); // 0, 1, 2
}

在上述示例中，iterable对象通过实现Symbol.iterator方法创建了一个同步迭代器。每次调用迭代器的next方法，都会返回下一个数据项的value和done标志。通过for...of循环遍历时，会依次输出数据项的值。

异步迭代器（Async Iterator）：

异步迭代器则用于处理异步迭代操作，特别适用于处理需要等待时间的操作，例如异步网络请求或读取大型数据集。异步迭代器使用 next() 方法返回一个 Promise 对象，该对象在完成后返回具有 { value, done } 属性的结果。其中，value 是当前迭代的值，而 done 表示迭代是否完成。异步迭代器可以通过 await 关键字或 .then() 方法来获取每个迭代结果，并在需要时进行等待。异步迭代器可以与 for await...of 循环一起使用，或者使用其他适合的方法进行操作。

异步迭代器通过Symbol.asyncIterator方法创建，并使用for await...of循环来进行遍历。它适用于处理异步操作，每次返回一个Promise对象，该Promise对象在解析为数据项后才会继续进行遍历。

下面是一个异步迭代器的示例：

const asyncIterable = {
  [Symbol.asyncIterator]() {
    let count = 0;
    return {
      async next() {
        if (count < 3) {
          await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟异步操作
          return { value: count++, done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

(async () => {
  for await (let item of asyncIterable) {
    console.log(item); // 0, 1, 2 (每隔1秒输出一次)
  }
})();

在上述示例中，asyncIterable对象通过实现Symbol.asyncIterator方法创建了一个异步迭代器。每次调用迭代器的next方法，都返回一个Promise对象，当异步操作完成后才会解析为下一个数据项的value和done标志。通过for await...of循环遍历时，会在每个数据项可用时进行输出。

总结：

异步迭代器对于处理异步操作，比如网络请求或读取大型文件等场景非常有用，可以避免阻塞代码执行。而同步迭代器适用于处理同步的、一次性获取全部数据的情况。

需要注意的是，异步迭代器通常涉及到使用异步函数或 Promise 来处理迭代操作。这些功能是ES2018引入的，并在处理具有异步或延迟操作的情况下非常有用。

综合案例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="syncContainer"></div>
  <div id="asyncContainer"></div>


<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
  <script>
    // 同步迭代器
    function* syncIterator() {
      yield "1";
      yield "2";
      yield "3";
    }

    const syncContainer = document.getElementById("syncContainer");
    const syncIteratorInstance = syncIterator();

    for (const element of syncIteratorInstance) {
      const item = document.createElement("p");
      item.textContent = `数字: ${element}`;
      syncContainer.appendChild(item);
    }

    // 异步迭代器
    async function* asyncIterator() {
      yield await new Promise(resolve => setTimeout(() => resolve("A"), 1000));
      yield await new Promise(resolve => setTimeout(() => resolve("B"), 1000));
      yield await new Promise(resolve => setTimeout(() => resolve("C"), 1000));
    }

    const asyncContainer = document.getElementById("asyncContainer");
    const asyncIteratorInstance = asyncIterator();

    async function processAsyncIterator() {
      for await (const element of asyncIteratorInstance) {
        const item = document.createElement("p");
        item.textContent = `字母: ${element}`;
        asyncContainer.appendChild(item);
      }
    }

    processAsyncIterator();
  </script>
</body>
</html>

正在奋斗的程序猿

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript--同步和异步迭代器

异步迭代器对于处理异步操作，比如网络请求或读取大型文件等场景非常有用，可以避免阻塞代码执行。而同步迭代器适用于处理同步的、一次性获取全部数据的情况。需要注意的是，异步迭代器通常涉及到使用异步函数或 Promise 来处理迭代操作。这些功能是ES2018引入的，并在处理具有异步或延迟操作的情况下非常有用。
复制链接

扫一扫