在 JavaScript 的 ES6 标准中，新增了两种数据结构：Map 和 WeakMap。它们是一种键值对存储结构，不同于 JavaScript 中的普通对象，Map 和 WeakMap 能够在键和值之间建立强关联，同时提供了更加灵活的数据处理方式。在本文中，我们将探讨 Map 和 WeakMap 的差异以及各自的使用场景。
Map
Map 是一种新的数据结构，它能够通过设置键值对的方式存储和读取数据，且支持任意类型的键和值。以下是 Map 的一些基本用法：
创建 Map
const map = new Map();
设置键值对
map.set('key1', 'value1');
map.set(1, 'value2');
map.set(true, 'value3');读取值
console.log(map.get('key1')); // 'value1'
console.log(map.get(1)); // 'value2'
console.log(map.get(true)); // 'value3'删除键值对
map.delete('key1');
console.log(map.get('key1')); // undefinedWeakMap
WeakMap 与 Map 的区别主要在于键值的生命周期和可枚举性。WeakMap 中的键必须是对象，且对象是被弱引用的，也就是说如果对象在其他地方没有引用，那么它会被垃圾回收机制回收。WeakMap 的键值对不可枚举，也就是说我们不能像 Map 那样通过 size 属性或 forEach 方法来获取键值对的数量或遍历所有键值对，这是因为想要获取值时需要有一个已经存在的键，而我们无法枚举到这些键。以下是 WeakMap 的一些基本用法：
创建 WeakMap
const weakMap = new WeakMap();
设置键值对
const obj = {};
weakMap.set(obj, 'value');读取值
console.log(weakMap.get(obj)); // 'value'
删除键值对
weakMap.delete(obj); console.log(weakMap.get(obj)); // undefined
Map 和 WeakMap 的使用场景
在实际开发中，我们可以根据 Map 和 WeakMap 的不同特点来选择使用它们。通常情况下，我们可以使用 Map 来代替普通对象，主要是为了避免使用对象字面量时的一些问题，如键只能是字符串类型，且存在属性名冲突的风险。以下是一些 Map 的使用案例：
储存交互事件
const eventMap = new Map();
eventMap.set('click', handleClick);
eventMap.set('keyup', handleKeyUp);
button.addEventListener('click', eventMap.get('click'));
input.addEventListener('keyup', eventMap.get('keyup'));统计字符数量
-- -------------------- ---- -------
----- --- - ------- --------
----- ------ - --- ------
--------- ---- -- ---- -
-------------------- -
---------------- ---------------- - ---
- ---- -
---------------- ---
-
-
----------------------------- -- -而 WeakMap 更适合作为中间状态的存储结构，例如存储一些需要跟踪的对象，当对象被垃圾回收后，WeakMap 也会自动删除相应的键值对。以下是一些 WeakMap 的使用案例：
存储一些私有数据
-- -------------------- ---- -------
----- ---------- - --- ----------
-------- ----- -
----- ----------- - -
------- --------
--
-------------------- -------------
-
------------------------- - ---------- -
----- ----------- - ---------------------
--------------------------------
-
----- --- - --- ------
------------------ -- --------存储 DOM 元素的属性
-- -------------------- ---- ------- ----- ---------- - --- ---------- ----- ------- - ----------------------------------- ----------------------- - ------ -------------------- ------- -------------------- --- ------------------------------------- -- - ------ ---- ------- --- -
总结
本文介绍了 ES6 中 Map 和 WeakMap 的使用方法和注意事项，以及在实际开发中使用它们的场景。在处理一些简单的数据结构时，我们可以使用普通的对象，但在需要对键和值之间建立强关联时，Map 和 WeakMap 是更好的选择。同时，WeakMap 可以帮助我们更加清晰的管理中间状态，避免内存泄漏的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ddef45f6b2d6eab393b8f3