在 JavaScript 的 ES6 标准中，引入了 WeakMap 和 WeakSet 两个对象。它们本质上是一种特殊类型的 Map 和 Set，有着更为灵活的性质和更适合特定用途的特点。本文将详细介绍 WeakMap 和 WeakSet 对象的概念、用途以及注意事项，助你更好地理解和应用这两个对象。
WeakMap 和 WeakSet 概念和用途介绍
WeakMap
WeakMap 是一种轻量级的 Map 实现，它和普通的 Map 对象一样，也是键值对的集合，但是它有一些特殊的限制和优化。
首先，WeakMap 中的键必须是对象或 null，而值可以是任意的 JavaScript 值。其次，WeakMap 中的键是弱引用，也就是说，如果键所引用的对象被垃圾回收时，键值对会自动从 WeakMap 中删除，这样可以避免内存泄漏。
WeakMap 可以应用在一些需要保存额外信息的场景中，比如在开发中，我们可以把每一个元素上绑定对应的数据，这样在事件回调中可以直接访问到它们。但是这样会造成另一个问题，当页面卸载或某些元素被移除时，我们需要手动移除绑定的数据，否则，数据就会一直保存在内存中造成内存泄漏。这时候就可以使用 WeakMap，将元素作为键、附加的数据作为值存储在 WeakMap 中，当元素被销毁时，它们对应的键值对也会被从 WeakMap 中删除，避免内存泄漏。
具体的示例代码如下：
-- -------------------- ---- -------
----- ------- - --- ----------
----- ---- - --------------------------------
----- ---- - --------------------------------
-- -----------
------------------------------ -- -- -
----- ---- - -
----- ----------
------ --------
-
-- ------------------- ------- -
----------------- ------
----------------- -------- ---------
---
------------------------------ -- -- -
----- ---- - ------------------
----------------- ------------ ------
---
-- ---------- ------- -----
--------------------------------- -- -- -
----------------
-------------------- ---------- ---------
---在这个例子中，我们使用 WeakMap 存储了按钮的一些数据，比如按钮的名称和值。每次点击按钮时，我们都会向 WeakMap 中添加一个键值对，当页面卸载时，我们使用 WeakMap 的 clear() 方法将其中存储的键值对清空，避免内存泄漏。
WeakSet
WeakSet 类似于 Set，也是一个由引用组成的集合，其中的值也是弱引用的。同样，WeakSet 中的元素不能被枚举，也没有任何迭代器，只能通过 add 和 delete 方法来添加和删除元素。
WeakSet 可以应用于判断某个对象是否已经在一个集合中存在，或者在一些需要存储对象引用的场景。在这些场景下，如果我们使用普通的 Set 对象，我们需要确保在某些对象被垃圾回收时，手动从 Set 中删除其引用。而使用 WeakSet，则可以自动地从集合中删除没有被引用的对象。
具体的示例代码如下：
-- -------------------- ---- -------
----- ---- - --- ----------
----- --- -
----------------- ---- -
--------- - -----
-------- - ----
---------------
-
------ -
------------------------- ----- --------
-
--------- -
------------------
-
-
----- ---- - --- ----------- ---
----- ---- - --- ------------ ---
----------------- -- ------- ---------------- -- ----
----------------- -- ------- ---------------- -- ----
------------ -- ---- ----- -----
---------------
----------------- --------- --- -- ------- ---------------- -- -----在这个例子中，我们使用了 WeakSet 存储了一些猫的实例对象，在构造函数中使用 cats.add(this) 方法将自己添加到集合中。当我们需要处理这些猫的实例对象时，只需要从 WeakSet 中获取它们即可。当猫的实例对象被销毁时，它们对应的键值对也会被从 WeakSet 中删除，避免内存泄漏。
注意事项
使用 WeakMap 和 WeakSet 需要注意一些事项。
首先，WeakMap 和 WeakSet 都只能存储对象的弱引用，如果我们将基本类型值作为键或值传入，会导致代码运行时抛出 TypeError 错误。
其次，由于 WeakMap 和 WeakSet 中的键只是弱引用，即便其对应的对象没有被主动释放，只要 JS 引擎觉得有必要，也可以将其释放，所以我们不能依赖 WeakMap 和 WeakSet 来存储一些必须一直存在的数据。而且 WeakMap 和 WeakSet 中的值也不能被枚举，我们无法遍历其中的键或值。
最后，WeakMap 和 WeakSet 中的键和值都是不可枚举的，也就是说，我们不能对它们进行循环遍历。它们也没有任何迭代器，只能通过其提供的 API 进行操作。
总结
本文详细介绍了 JavaScript 中的 WeakMap 和 WeakSet 对象，解释了它们的概念、用途和注意事项。WeakMap 和 WeakSet 可以很好地解决对象销毁时的内存泄漏问题，它们尤其适用于保存需要额外信息的场景。但是，使用 WeakMap 和 WeakSet 时需要注意其局限性，不能过度依赖。在实际开发中，我们应该根据具体的场景需要，选择合适的数据结构进行存储和访问。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503c66295b1f8cacd08e003