在前端领域中，我们经常需要使用对象来存储和处理数据。然而，对象的实现方式并不是最优的，特别是在处理大量数据和需要进行垃圾回收时。这时候，使用 ES6 中的 Map 和 WeakMap 可以提高性能，减少内存占用。本文将详细介绍 Map 和 WeakMap 的用法及其优劣势，并提供示例代码以便读者更好的理解和实践。
Map
Map 是 ES6 提供的一种新的数据结构，它可以存储键值对，并且键和值可以是任意类型。与对象不同，Map 的键和值是完全独立的，因此可以非常灵活地处理数据。以下是一个简单的示例：
const myMap = new Map();
myMap.set('name', 'Tom');
myMap.set('age', 18);
myMap.set('gender', 'male');
console.log(myMap.get('name')); // 输出：Tom
console.log(myMap.size); // 输出：3上面的代码中，我们定义了一个 Map 对象，并且向其中添加了三个键值对，其中键是字符串类型，值可以是任意类型。使用 set 方法添加键值对，使用 get 方法获取键对应的值，使用 size 属性获取 Map 的大小。
Map 相较于对象的优势在于：
- 键可以是任意类型，包括原始类型和对象，甚至是 NaN。
- 支持迭代器，可以方便地遍历键值对。
- 自动处理键的重复，当添加重复的键时，后面的值会覆盖前面的值。
- 垃圾回收更加高效，不会因为被引用而占用内存。
我们可以通过以下代码来比较 Map 和对象的性能差异：
-- -------------------- ---- -------
----- ----- - --- ------
----- ----- - ---
--------------------
--- ---- - - -- - - -------- ---- -
------------ ---
-
-----------------------
-----------------------
--- ---- - - -- - - -------- ---- -
-------- - --
-
--------------------------在我的电脑上，上面的代码在 Chrome 浏览器中输出的结果如下：
map: 23.360107421875ms object: 15.5810546875ms
可以看到，对象略微快一些。然而，当数据量增大时，Map 的优势就可以体现出来。
WeakMap
WeakMap 与 Map 类似，也是存储键值对的集合。但是，WeakMap 有一些不同寻常的行为。首先，它只能使用对象作为键，而且键必须是对象的弱引用。这意味着当对象被垃圾回收时，WeakMap 中相应的键值对也会自动删除，而不需要手动处理。
以下是一个简单的示例：
-- -------------------- ---- ------- ----- --------- - --- ---------- ----- ---- - --- ---- - --- ---- - --- ------------------- --- ------------------- --- --------------------------------- -- ---- ---- - ----- --------------------------------- -- ------------
上面的代码中，我们创建了一个 WeakMap 对象，并向其中添加了两个键值对，键都是对象。当我们将 obj1 设为 null 时，它指向的对象就没有强引用了，因此在下次垃圾回收时，这个对象将被删除，并且 WeakMap 中相应的键值对也会自动删除。
与 Map 相比，WeakMap 有以下优势：
- 自动处理键的重复，当添加重复的键时，后面的值会覆盖前面的值。
- 更加高效的垃圾回收，不会因为被引用而占用内存。
- 只能使用对象作为键，确保键的唯一性，避免命名冲突和代码混淆。
需要注意的是，由于使用弱引用作为键，WeakMap 有以下限制：
- 不能迭代，不存在 keys 和 values 方法或者 size 属性。
- 不能用于序列化（即不能将 WeakMap 转换为 JSON）。
使用 Map 和 WeakMap 优化代码
Map 和 WeakMap 的优势在于可以减少代码中的命名冲突和垃圾回收，同时也可以使代码更加简洁和易于维护。
以下是一些常见的使用场景：
避免命名冲突
在 JavaScript 中，全局变量、对象属性和函数名都是公共空间，如果不小心使用了相同的名称，就会造成命名冲突。使用 Map 可以有效避免这种情况。
const myMap = new Map();
myMap.set('func1', () => console.log('function one'));
myMap.set('func2', () => console.log('function two'));
function test() {
const fun = myMap.get('func1');
fun();
}上面的代码中，我们将两个函数分别存储在了 Map 中，这样它们的名称可以不同，避免了命名冲突。在 test 函数中，我们通过 get 方法获取了 Map 中的值，并且调用了这个函数。
缓存数据
有些操作需要花费一定的时间和计算资源才能完成，例如加载远程数据、解析 XML 等。使用 Map 可以缓存这些操作的结果，避免重复计算和网络请求，提高性能和减少延迟。
-- -------------------- ---- -------
----- ----- - --- ------
-------- -------------- -
-- ---------------- -
------ --------------------------------
-
------ ----------
-------------- -- ----------------
---------- -- -
-------------- ------
------ -----
---
-上面的代码中，我们定义了一个 fetchData 函数，它接受一个远程 URL 地址并返回 Promise 对象。在函数中，我们首先检查 Map 中是否已经有了这个 URL 对应的数据，如果有就直接返回，否则就发起网络请求，获取数据并存储到 Map 中，然后返回数据。
页面控制
在一些场景下，我们需要创建多个页面，并且每个页面之间需要共享一些状态信息，例如用户登录状态、应用设置等。使用 WeakMap 可以使页面之间的状态信息不会因为引用而占用内存，同时也避免了命名冲突和垃圾回收。
-- -------------------- ---- -------
----- --------- - --- ----------
----- ---- -
--------------- -
------- - ---
--------- - ---
------------------- ----
-
------------ ------ -
----- ---- - --------------------
--------- - ------
-
------------ -
----- ---- - --------------------
------ ----------
-
-
----- ----- - --- ------------
----- ----- - --- ------------
--------------------- -------
--------------------- ---------
----------------------------------- -- ------
----------------------------------- -- --------上面的代码中，我们定义了一个 Page 类，用来表示页面。在类的构造函数中，我们使用 WeakMap 存储了一个空对象，用来存储页面的状态信息。在 setData 和 getData 方法中，我们通过 this 来获取 WeakMap 中存储的状态信息，实现了页面状态共享的功能。
总结
Map 和 WeakMap 是 ES6 中新增的数据结构，可以用来存储和处理数据，并且具有很多优势，例如支持任意类型的键、键值对的完全独立、自动处理键的重复、垃圾回收效率高等。
我们可以使用 Map 和 WeakMap 来优化前端代码，例如避免命名冲突、缓存数据、页面控制等等。同时，使用它们也要考虑到它们各自的优缺点，并选择合适的场景来使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6538a2c67d4982a6eb192364