在 ES9 中，Map 和 Set 对象都被添加了一个新的方法，即 fromEntries，它可以根据一个可迭代对象创建一个新的 Map 或 Set 对象。然而，这两个对象仍然不支持直接使用 iterable 接口进行遍历。本文将介绍如何解决这个问题，并提供代码示例。
什么是 iterable？
在 ES6 中，引入了 iterable 接口，它是一种统一的遍历机制，可以让对象能够被 for...of 循环遍历。一个对象若要实现 iterable 接口，就必须具有一个名为 Symbol.iterator 的属性，该属性是一个函数，返回一个迭代器对象。
以数组为例，它是一个 iterable 对象，因此可以使用 for...of 循环遍历：
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}
// 输出：1 2 3而 Map 和 Set 对象则不支持直接使用 for...of 循环遍历。
解决方法
为了让 Map 和 Set 对象支持 iterable 接口，我们需要手动为它们添加 Symbol.iterator 属性。具体来说，我们需要创建一个新的迭代器对象，该对象的 next 方法会返回一个包含 value 和 done 属性的对象。value 属性表示当前迭代到的值，done 属性表示是否已经迭代完毕。
下面是为 Map 对象添加 iterable 接口的示例代码：
-- -------------------- ---- -------
------------------------------ - ---------- -
----- ---- - ------------------------
----- ------ - --------------------------
--- ----- - --
------ -
----- ---------- -
-- ------ - ------------ -
------ - ------ ------------- ----------------- ----- ----- --
- ---- -
------ - ----- ---- --
-
-
--
--我们首先通过 Array.from 方法将 Map 对象的键和值分别转化为数组。然后创建一个新的迭代器对象，使用闭包保存当前迭代到的索引 index，并在每次调用 next 方法时返回对应的键值对。
同样地，我们也可以为 Set 对象添加 iterable 接口：
-- -------------------- ---- -------
------------------------------ - ---------- -
----- ------ - --------------------------
--- ----- - --
------ -
----- ---------- -
-- ------ - -------------- -
------ - ------ ---------------- ----- ----- --
- ---- -
------ - ----- ---- --
-
-
--
--使用示例
现在我们可以使用 for...of 循环遍历 Map 和 Set 对象了：
-- -------------------- ---- ------- ----- --- - --- ---------- --- ----- --- ----- ----- --- ------ ----- ------ -- ---- - ---------------- ------- - -- ---- - -- - - -- - - ----- --- - --- ------- -- ---- --- ------ ----- -- ---- - ------------------- - -- ---- - -
总结
本文介绍了如何解决 ES9 中 Map 和 Set 对象不支持 iterable 的问题，并提供了相应的代码示例。通过手动添加 Symbol.iterator 属性，我们可以让 Map 和 Set 对象支持 for...of 循环遍历，提高了它们的灵活性和可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bc7e20add4f0e0ff51e926