JS Set/WeakSet 去重：原理与实践

JS Set/WeakSet 去重：原理与实践

在 JavaScript 编程中，数据去重是一个常见的需求。Set 和 WeakSet 作为 ES6 引入的新数据结构，为我们提供了简洁高效的去重方案。

Set 去重

Set 是一种有序列表，其成员具有唯一性。这一特性使得它天然适合用于数组去重。

// 示例数组
const arr = [1, 2, 2, 3, 3, 3];
// 使用 Set 去重
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3]

上述代码中，new Set(arr) 将数组转换为 Set 结构，自动去除重复元素。再通过展开运算符 ... 将 Set 转回数组。

Set 还可用于对象数组去重，但需注意，Set 对对象的去重是基于引用的。若对象内容相同但引用不同，仍会被视为不同元素。

const objArr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' }
];
// 自定义去重逻辑（基于 id）
const uniqueObjArr = [...new Set(objArr.map(obj => obj.id))].map(id => 
  objArr.find(obj => obj.id === id)
);
console.log(uniqueObjArr); 
// [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]

WeakSet 去重

WeakSet 与 Set 类似，但有两点重要区别：

1. WeakSet 的成员只能是对象。
2. WeakSet 对对象的引用是弱引用，垃圾回收机制会自动回收不再被引用的对象。

这使得 WeakSet 在处理 DOM 元素等场景时更具优势，避免内存泄漏。

const divs = document.querySelectorAll('div');
const weakSet = new WeakSet();
divs.forEach(div => weakSet.add(div));
// 当 div 元素从 DOM 树移除后，会被垃圾回收

在数据去重中，若处理的是大量临时对象，WeakSet 可优化内存使用。

总结

Set 适用于一般数据类型（包括基本类型和对象，需自定义对象去重逻辑）的去重，操作直观。WeakSet 则在处理对象引用且关注内存管理时更优。根据具体场景选择合适的数据结构，能提升代码性能与可维护性。通过合理运用 Set 和 WeakSet，我们能轻松实现高效的数据去重，让代码更简洁优雅。