JavaScriptSet去重方法详解

学习文章要努力，但是不要急！今天的这篇文章《JavaScript Set去重实战教程》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

Set是JavaScript中用于存储唯一值的集合，可高效实现数组去重。通过展开运算符[...new Set(arr)]能简洁去除原始类型重复元素；处理对象数组时，结合filter与Set记录唯一键（如id），实现O(n)时间复杂度的去重；相比传统方法，Set语法更简洁、性能更优，且无需第三方库。实战中可封装通用函数distinct(arr, key)，兼顾简单数组和对象数组去重，提升代码复用性与可维护性。

在JavaScript中，处理数据去重是一个常见的需求，尤其是在操作数组时。ES6引入的 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 对原始类型去重非常直接，但在处理对象数组时需要额外逻辑，因为对象是引用类型。

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)，性能优于嵌套循环。

与其他去重方法的对比

传统去重方式如双重循环或使用 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 开发中不可或缺的工具之一。不复杂但容易忽略。

好了，本文到此结束，带大家了解了《JavaScriptSet去重方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！