前言
在 ES9 中，新增了 for-await-of 语法，用于循环遍历异步迭代器中的值。同时，ES6 中也引入了四个新的集合类型：Map、WeakMap、Set 和 WeakSet。本文将介绍 for-await-of 与这些集合类型的互动方式，以及如何使用它们来提高代码的效率。
for-await-of 语法
在介绍 for-await-of 与集合类型的互动方式之前，我们先来了解一下 for-await-of 语法。
for-await-of 语法用于循环遍历异步迭代器中的值。异步迭代器是指一个对象，它实现了 Symbol.asyncIterator 方法，并返回一个异步迭代器对象。异步迭代器对象是一个具有 next 方法的对象，该方法返回一个 Promise，用于异步获取下一个值。
下面是一个简单的示例代码：
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - -- -
------ - ------ ---- ----- ----- --
- ---- -
------ - ----- ---- --
-
-
--
-
--
------ ---------- -
--- ----- ------ --- -- -------------- -
-----------------
-
-----输出结果为：
0 1 2
在上面的示例代码中，我们定义了一个异步迭代器对象 asyncIterable，它实现了 Symbol.asyncIterator 方法，并返回一个具有 next 方法的对象。在使用 for-await-of 循环遍历 asyncIterable 时，会依次输出 0、1、2。
Map/WeakMap/Set/WeakSet 与 for-await-of 的互动方式
在 ES9 中，Map、WeakMap、Set 和 WeakSet 都实现了 Symbol.asyncIterator 方法，可以被用于异步迭代。下面我们将介绍它们与 for-await-of 的互动方式。
Map 和 for-await-of
Map 实现了 Symbol.asyncIterator 方法，可以被用于异步迭代。下面是一个简单的示例代码：
-- -------------------- ---- -------
----- --- - --- -----
-------- ------
------- ----
---------- ----
---
------ ---------- -
--- ----- ------ ----- ------ -- ---- -
-------------------- -----------
-
-----输出结果为：
name: 张三 age: 18 gender: 男
在上面的示例代码中，我们定义了一个 Map 对象 map，它包含了三个键值对。在使用 for-await-of 循环遍历 map 时，会依次输出每个键值对的键和值。
WeakMap 和 for-await-of
WeakMap 实现了 Symbol.asyncIterator 方法，可以被用于异步迭代。下面是一个简单的示例代码：
-- -------------------- ---- -------
----- ------- - --- ----------
----- ---- - ---
----- ---- - ---
----------------- ------
----------------- ----
------ ---------- -
--- ----- ------ ----- ------ -- -------- -
-------------------- -----------
-
-----输出结果为：
Uncaught TypeError: weakMap[Symbol.asyncIterator] is not a function
在上面的示例代码中，我们定义了一个 WeakMap 对象 weakMap，它包含了两个键值对。在使用 for-await-of 循环遍历 weakMap 时，会抛出一个类型错误。
这是因为 WeakMap 中的键是弱引用，可能在任何时候被垃圾回收，因此 WeakMap 并没有实现同步迭代器方法。如果需要遍历 WeakMap 中的键值对，可以将键值对转换为数组，然后使用 for-of 循环遍历。示例代码如下：
-- -------------------- ---- ------- ----- ------- - --- ---------- ----- ---- - --- ----- ---- - --- ----------------- ------ ----------------- ---- ----- ------- - ------------------------------ --- ------ ----- ------ -- -------- - -------------------- ----------- -
输出结果为：
[object Object]: 张三 [object Object]: 18
在上面的示例代码中，我们先将 WeakMap 中的键值对转换为数组 entries，然后使用 for-of 循环遍历每个键值对的键和值。
Set 和 for-await-of
Set 实现了 Symbol.asyncIterator 方法，可以被用于异步迭代。下面是一个简单的示例代码：
const set = new Set(["张三", 18, "男"]);
(async function() {
for await (const value of set) {
console.log(value);
}
})();输出结果为：
张三 18 男
在上面的示例代码中，我们定义了一个 Set 对象 set，它包含了三个值。在使用 for-await-of 循环遍历 set 时，会依次输出每个值。
WeakSet 和 for-await-of
WeakSet 实现了 Symbol.asyncIterator 方法，可以被用于异步迭代。下面是一个简单的示例代码：
-- -------------------- ---- -------
----- ------- - --- ----------
----- ---- - ---
----- ---- - ---
------------------
------------------
------ ---------- -
--- ----- ------ ----- -- -------- -
-------------------
-
-----输出结果为：
Uncaught TypeError: weakSet[Symbol.asyncIterator] is not a function
在上面的示例代码中，我们定义了一个 WeakSet 对象 weakSet，它包含了两个对象。在使用 for-await-of 循环遍历 weakSet 时，会抛出一个类型错误。
这是因为 WeakSet 中的值是弱引用，可能在任何时候被垃圾回收，因此 WeakSet 并没有实现同步迭代器方法。如果需要遍历 WeakSet 中的值，可以将值转换为数组，然后使用 for-of 循环遍历。示例代码如下：
-- -------------------- ---- ------- ----- ------- - --- ---------- ----- ---- - --- ----- ---- - --- ------------------ ------------------ ----- ------ - -------------------- --- ------ ----- -- ------- - ------------------- -
输出结果为：
[object Object] [object Object]
在上面的示例代码中，我们先将 WeakSet 中的值转换为数组 values，然后使用 for-of 循环遍历每个值。
总结
在本文中，我们介绍了 ES9 中的 for-await-of 语法和 Map、WeakMap、Set 和 WeakSet 集合类型与 for-await-of 的互动方式。通过学习这些内容，我们可以更加方便地遍历异步迭代器中的值，提高代码的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66075b36d10417a2225e0874