JavaScript 语言是一门动态的、基于对象的脚本语言，现在已经成为 Web 前端开发的事实标准。而在 ES8（也就是 ECMAScript 2017）中，新增了 WeakMap 和 WeakSet 这两个数据结构，为前端开发带来了更加便捷和高效的开发方式。
本文将介绍 WeakMap 和 WeakSet 的知识点，包括其定义、适用场景、使用示例等，希望能够帮助前端开发者更好地理解和应用这两种数据结构。
1. WeakMap
WeakMap 是 ES6 中新增的一种 Map 类型的弱引用版本。它和 Map 不同的是，WeakMap 中的键(key)只能是对象（Object），而且这个对象是“弱引用”（weakly held）的。也就是说，当这个对象的其他引用被删除时，WeakMap 中保存的键值对也会被自动地清除。
以下是 WeakMap 的定义方式：
let wm = new WeakMap();
1.1 适用场景
WeakMap 主要是在对象存储方法中使用的，比如事件处理器、对象缓存、私有属性等。因为 WeakMap 中添加的键值对并不会造成内存泄露问题，所以建议在这样的场景下使用它。
1.2 使用示例
- 缓存 DOM 元素
下面的代码展示了如何将 DOM 元素保存到 WeakMap 中：
const element = document.querySelector(".content");
const cache = new WeakMap();
cache.set(element, "some data");
console.log(cache.get(element));- 实现私有属性
通过 WeakMap 我们可以实现类似于私有属性的功能，例如：
-- -------------------- ---- -------
--- ------ - ----------- -
--- ------------ - --- ----------
-------- ------------ ---- -
---------------------- - ----- --- ---
-
------------------------ - ---------- -
------ ----------------------------
--
------ -------
-----
--- ------ - --- -------------- ----
------------------------------ -- ------2. WeakSet
WeakSet 和 Set 的主要不同在于，WeakSet 中存储的对象同样是“弱引用”的。WeakSet 和 Set 一样，是不重复的值的集合，但是它只可以存储对象引用，而且当这个对象的其他引用被删除时，WeakSet 中保存的键值对也会被自动地清除。
以下是 WeakSet 的定义方式：
let ws = new WeakSet();
2.1 适用场景
WeakSet 主要用于保存一些“短暂”的对象，比如临时的对象列表。只要对象不再被引用，就会被自动删除。这种方式非常适用于一些需要临时对象的场景，比如临时缓存一些对象、标记处理过的对象等等。
2.2 使用示例
- 标记一些对象已经被遍历过
let visitedSet = new WeakSet();
function visit(obj) {
if (visitedSet.has(obj)) {
return;
}
visitedSet.add(obj);
// ...
}- 临时保存一些对象
-- -------------------- ---- -------
-------- ------------------- -
--- -- - --- ----------
------ ----------------- -- -
-- -------------- -
------ ------
-
-------------
------ -----
---
-
----- ----- - --- -- -- -- -- -- -- -- ---
--------------------------------- -- --- -- -- -- -- --总结
WeakMap 和 WeakSet 作为 ES8 中新增加的数据结构，为我们提供了一种更加高效、便捷的开发方式。在使用 WeakMap 和 WeakSet 时，需要注意其特点和适用场景，以便更好地利用它们提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e9ec448841e9894b26291