weak-Set、weak-Map 和 Set、Map 之间的区别是什么？

WeakSet 和 WeakMap 是 JavaScript 中的集合类型，与 Set 和 Map 相似，但它们之间有一些重要的区别。以下分别是 WeakSet/WeakMap 与 Set/Map 之间的主要区别：

WeakSet 与 Set 的区别：

1. 弱引用：

   • WeakSet：只能包含对象的弱引用。这意味着如果没有其他引用指向对象，这些对象是可以被垃圾回收机制回收的。
   • Set：可以包含任意值的强引用，包括原始值或对象引用。只要 Set 存在，其中的元素就不会被垃圾回收机制回收。

2. 元素类型限制：

   • WeakSet：只能存储对象，不能存储原始数据类型（如字符串、数字、布尔值等）。
   • Set：可以存储任意类型的值，无论是原始数据类型还是对象。

3. 可枚举性：

   • WeakSet：不能被迭代，也没有提供方法来获取大小（即没有 size 属性）或者清空集合的方法。
   • Set：可迭代，且有 size 属性可以获取集合的大小，也提供了 clear 方法来清空集合。

4. 使用场景：

   • WeakSet：适合用于存储没有任何其他引用的对象集合，通常用于管理对象的生命周期，防止内存泄漏。
   • Set：适合于需要存储唯一值的场景，特别是当需要迭代或者获取集合大小时。

WeakMap 与 Map 的区别：

1. 弱引用键：

   • WeakMap：只接受对象作为键，并且这些键是弱引用的。如果没有其他引用指向键对象，那么这些键值对可以被垃圾回收机制回收。
   • Map：可以接受任意类型的值作为键，包括原始数据类型和对象，这些键是强引用的。

2. 键类型限制：

   • WeakMap：键必须是对象，不能是原始数据类型。
   • Map：键可以是任意类型的值，包括原始数据类型和对象。

3. 可枚举性：

   • WeakMap：同样不能被迭代，没有 size 属性，也不能清空整个集合。
   • Map：可迭代，有 size 属性，并提供了 clear 方法。

4. 使用场景：

   • WeakMap：经常用于缓存或者存储对象与数据的关联，同时不影响对象的垃圾回收。
   • Map：适用于需要明确地将键映射到值，并且需要键的枚举、大小统计或者清空映射。

示例：

假设我们正在开发一个应用程序，该应用程序需要跟踪一组 DOM 元素是否被点击。我们可以使用 WeakSet 来存储这些 DOM 元素，如下所示：

javascript
let clickedElements = new WeakSet();

document.addEventListener('click', event => {
  if (event.target.tagName === 'BUTTON') {
    clickedElements.add(event.target);
    // ...执行一些操作...
  }
});

// 由于 WeakSet 对象的特性，当 DOM 元素被移除并且没有其他引用时，它将自动从 WeakSet 中移除，防止内存泄漏

在这个例子中，如果没有 WeakSet，而是使用 Set，那么即使 DOM 元素被移除，它们也不会从集合中删除，这可能会导致内存泄漏。