JavaScriptSet去重技巧与实战

JavaScript 中的 Set 是处理数组去重的高效利器——它天然支持唯一值存储，一行代码 `[...new Set(arr)]` 即可清除原始类型重复项；面对对象数组，结合 filter 与 Set 记录唯一键（如 id），仍能保持 O(n) 时间复杂度；相比传统嵌套循环或 indexOf 方法，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学习网公众号！