Set是JavaScript中用于存储唯一值的集合，可高效实现数组去重。通过展开运算符[...new Set(arr)]能简洁去除原始类型重复元素；处理对象数组时，结合filter与Set记录唯一键（如id），实现O(n)时间复杂度的去重；相比传统方法，Set语法更简洁、性能更优，且无需第三方库。实战中可封装通用函数distinct(arr, key)，兼顾简单数组和对象数组去重，提升代码复用性与可维护性。
在JavaScript中，处理数据去重是一个常见的需求，尤其是在操作数组时。ES6引入的 Set 对象为这一问题提供了简洁高效的解决方案。结合实际应用场景，我们可以将 Set 与数据结构知识结合，实现更智能的数据管理。
什么是 Set？
Set 是一种集合数据结构，其特点是成员唯一、无重复值。它允许存储任何类型的值，无论是原始类型还是对象引用。当你尝试添加已存在的值时，Set 会自动忽略该操作，从而天然支持去重。
示例：使用 Set 去除数组中的重复元素
const arr = [1, 2, 2, 3, 4, 4, 5]; const uniqueArr = [...new Set(arr)]; console.log(uniqueArr); // [1, 2, 3, 4, 5]
这行代码利用了展开运算符（...）将 Set 转换回数组，整个过程仅需一行，极大提升了开发效率。
Set 在复杂数据结构中的应用
虽然 Set 对原始类型去重非常直接，但在处理对象数组时需要额外逻辑，因为对象是引用类型。
立即学习“Java免费学习笔记（深入）”；
场景：去除对象数组中具有相同 id 的重复项
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' }
];
const seenIds = new Set();
const uniqueUsers = users.filter(user => {
if (seenIds.has(user.id)) {
return false;
}
seenIds.add(user.id);
return true;
});
console.log(uniqueUsers);
// [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
这里我们借助一个临时的 Set 来记录已出现的 id，通过 filter 实现去重。这种方法时间复杂度为 O(n)，性能优于嵌套循环。
Nextjs App Router Audit
下载
审查 Next.js App Router 代码库，检查 React Server Component 边界错误、请求瀑布、客户端/服务端反模式以及 Core Web Vitals 风险...
与其他去重方法的对比
传统去重方式如双重循环或使用 indexOf，在大数据量下效率较低。而基于 Set 的方案具备以下优势：
- 语法简洁，可读性强
- 内部基于哈希表实现，查找和插入平均时间复杂度为 O(1)
- 原生支持，无需依赖第三方库
注意：如果需要深度比较对象内容，仍需配合 JSON.stringify 或自定义逻辑，但多数业务场景中按唯一键（如 id）过滤已足够。
实战建议
在真实项目中，可以封装一个通用去重函数：
function distinct(arr, key) {
if (!key) return [...new Set(arr)];
const seen = new Set();
return arr.filter(item => {
const val = item[key];
if (seen.has(val)) return false;
seen.add(val);
return true;
});
}
// 使用
distinct([1, 2, 2, 3]); // [1, 2, 3]
distinct(users, 'id'); // 按 id 去重
这个函数兼顾了简单数组和对象数组的去重需求，提升代码复用性。
基本上就这些。合理使用 Set 不仅能简化去重逻辑，还能提升程序性能，是现代 JavaScript 开发中不可或缺的工具之一。不复杂但容易忽略。
