JavaScriptSet去重应用_JavaScript数据结构实战-js教程-PHP中文网

JavaScriptSet去重应用_JavaScript数据结构实战

夢幻星辰

发布： 2025-12-05 20:23:31

原创

530人浏览过

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

javascriptset去重应用_javascript数据结构实战

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

PHP5 和 MySQL 圣经

本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。

466

查看详情

与其他去重方法的对比

传统去重方式如双重循环或使用 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去重应用_JavaScript数据结构实战的详细内容，更多请关注php中文网其它相关文章！