探索 (Weak)Set 和 (Weak)Map，领略 JavaScript 数据结构的精妙之处

2023-09-22 13:33:42

JS 中的 (Weak)Set 和 (Weak)Map

在 JavaScript 中，Set 和 Map 都是 ES6 新增的数据结构，它们为程序员提供了更加灵活和强大的数据操作方式。Set 是一个集合，它类似于数组，但是成员的值都是唯一的，没有重复的值。它允许你存储任何类型的唯一值，无论是原始值或者是对象引用。Set 是一个构造函数，它有一个可选的参数一个可迭代对象。如果传递了这个参数它的所有元素将不重复...

(Weak)Set

WeakSet 类似于 Set，不同之处在于 WeakSet 中只能存储对象，并且这些对象都是弱引用的。这意味着当对象不再被任何变量或其他对象引用时，垃圾回收器可以释放这些对象所占用的内存，从而避免了内存泄漏。WeakSet 的主要用途之一是存储 DOM 节点，因为 DOM 节点在 JavaScript 中是作为对象存在的。

(Weak)Map

WeakMap 与 WeakSet 类似，它也是一个弱引用对象集合，但是 WeakMap 可以存储键值对，键可以是任何类型的值，值只能是对象。WeakMap 的主要用途之一是存储对象与其他对象之间的关系，例如，可以将一个对象作为键，将另一个对象作为值存储在 WeakMap 中，然后可以使用键来检索值。

实例

使用 WeakSet 存储 DOM 节点

const weakSet = new WeakSet();

const node1 = document.getElementById('node1');
const node2 = document.getElementById('node2');

weakSet.add(node1);
weakSet.add(node2);

console.log(weakSet.has(node1)); // true
console.log(weakSet.has(node2)); // true

node1 = null; // 这里释放了 node1 对象

console.log(weakSet.has(node1)); // false
console.log(weakSet.has(node2)); // true

使用 WeakMap 存储对象与其他对象之间的关系

const weakMap = new WeakMap();

const obj1 = {};
const obj2 = {};

weakMap.set(obj1, obj2);

console.log(weakMap.get(obj1)); // obj2

obj1 = null; // 这里释放了 obj1 对象

console.log(weakMap.get(obj1)); // undefined