探索 JS Set 与 WeakSet：从基础到应用的全面指南

前端

2023-11-05 04:06:11

JavaScript 的 Set 和 WeakSet：管理独特值的利器

在 JavaScript 中，Set 和 WeakSet 是两类独特且实用的数据结构，专为管理唯一值而设计。它们各有千秋，了解它们的特性和应用场景对于有效利用它们至关重要。

Set：独特值的集合

Set 是一种集合数据结构，顾名思义，它存储唯一的值。这意味着 Set 中的每个元素只能出现一次。它可以存储各种类型的数据，包括基本类型（如数字、字符串和布尔值）和复杂类型（如对象和数组）。

关键特性：

唯一性：确保 Set 中的每个值都是独特的。
数据类型：允许存储各种类型的数据。
不变性：Set 本身不会改变存储的值，但允许添加、删除和检查值是否存在。

应用场景：

Set 的典型应用场景包括：

存储唯一值的数据集合，如用户 ID、产品 ID 等。
检查某个值是否在集合中，例如在验证表单输入时。
删除重复值，例如从列表中删除重复项。
执行集合运算，如并集、交集和差集。

代码示例：

// 创建一个 Set
const mySet = new Set();

// 添加值
mySet.add(1);
mySet.add('apple');
mySet.add(true);

// 检查值是否存在
console.log(mySet.has(1)); // true
console.log(mySet.has('apple')); // true
console.log(mySet.has('banana')); // false

// 删除值
mySet.delete(1);

// 遍历 Set
for (const value of mySet) {
  console.log(value); // 'apple', 'true'
}

WeakSet：独特的对象集合

与 Set 相似，WeakSet 也是一种唯一集合数据结构。然而，它有一个关键区别：它只允许存储对象。这意味着 WeakSet 中的每个对象都必须是唯一的。此外，WeakSet 中的对象不会被枚举，也不能直接访问。

关键特性：

唯一性：确保 WeakSet 中的每个对象都是独特的。
数据类型：仅允许存储对象。
不变性：WeakSet 本身不会改变存储的对象。
不支持直接操作：不允许添加、删除或检查值是否存在。

应用场景：

WeakSet 的主要应用场景是：

存储对象，例如 DOM 元素、函数和类实例等。
防止循环引用导致的内存泄漏。WeakSet 中的对象不会被计数，因此当对象被销毁时，WeakSet 也不会保留对它们的引用，从而防止内存泄漏。
存储私有数据或状态，因为 WeakSet 中的对象无法直接访问。

代码示例：

// 创建一个 WeakSet
const myWeakSet = new WeakSet();

// 添加对象
const obj1 = { name: 'John' };
const obj2 = { age: 30 };
myWeakSet.add(obj1);
myWeakSet.add(obj2);

// 检查对象是否存在
console.log(myWeakSet.has(obj1)); // true
console.log(myWeakSet.has(obj2)); // true
console.log(myWeakSet.has({ name: 'John' })); // false

// 删除对象
myWeakSet.delete(obj1);

// 遍历 WeakSet (不可用)
// for (const value of myWeakSet) {
//   console.log(value); // Un Soaresacheable error: WeakSet does not have a for..of method
// }

Set 与 WeakSet 的区别

虽然 Set 和 WeakSet 都是独特集合，但它们在几个方面有所不同：

特性	Set	WeakSet
数据类型	任意数据类型	仅对象
唯一性	是	是
不变性	是	是
直接操作	允许添加、删除和检查值	不允许添加、删除或检查值
枚举	允许枚举值	不允许枚举值
size 属性	有	无