在前端开发中，迭代器是一个非常常见的概念。在 JavaScript 中，迭代器可以让我们对一个对象进行迭代循环操作，从而获取其中的数据。在 ECMAScript 2019 (ES10) 中，引入了同步和异步迭代器的概念，这个新的特性在某些场景下可以为我们带来很大的便利。本文将详细介绍同步迭代器和异步迭代器的区别，以及它们的使用方法，希望能为您提供一些指导意义。
同步迭代器
我们先来了解一下同步迭代器。同步迭代器是一种能够同步迭代访问 JavaScript 对象的机制。这意味着迭代器会等待当前项被处理完成后才继续迭代。同步迭代器非常适用于处理本地数据的场景，比如说对数组、Map 等对象的迭代。
我们来看一个同步迭代器的例子，假设我们有一个数组，我们想要用迭代器来访问其中的每个元素：
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
for (let item of iterator) {
console.log(item);
}在这个例子中，我们首先使用了 arr[Symbol.iterator]() 方法获取了数组的迭代器对象。然后我们通过 for...of 循环来逐个访问数组中的元素。这时候，迭代器就会同步地返回数组中的每个元素，直到所有元素都被处理完成。
同步迭代器在处理本地数据时非常实用，但是在涉及到异步操作的场景中，就会表现得比较鸡肋，因为无法支持异步操作。对于这种情况，我们需要用到异步迭代器。
异步迭代器
异步迭代器是一种能够异步迭代访问 JavaScript 对象的机制。这意味着开始迭代后，在当前项被处理完成之前会继续执行下一项，从而可以提高性能。异步迭代器非常适用于处理异步数据源的场景，比如说对一组异步数据、WebSocket 等对象的迭代。
我们来看一个异步迭代器的例子，假设我们有一个异步数据源，我们想要用迭代器来异步地访问其中的每个元素：
-- -------------------- ---- -------
----- --------- ---------------- -
----- --
----- --
----- --
-
----- -------- --------------- -
----- ------------- - -----------------
--- ----- ------ ---- -- -------------- -
------------------
-
-
----------------在这个例子中，我们定义了一个异步生成器函数 asyncGenerator()，它会异步地生成一组数据。然后我们定义了一个异步迭代器函数 asyncIterator()，它会用异步迭代的方式访问 asyncGenerator() 生成的数据。在 asyncIterator() 函数中，我们使用了 for await...of 循环来异步地遍历 asyncGenerator() 返回的数据。由于 asyncGenerator() 中的数据是异步生成的，所以我们使用 async 和 await 来等待数据的到来。
总结
以上就是同步迭代器和异步迭代器的区别及使用方法。同步迭代器适用于处理本地数据的场景，异步迭代器适用于处理异步数据源的场景。如果你的应用涉及到异步操作，那么使用异步迭代器可以提高程序的性能。但是需要注意的是，在使用异步迭代器时，由于其中涉及到异步操作，所以代码的错误处理和资源释放需要特别小心。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1d0c7f6b2d6eab3d0c1cb