JavaScript数组去重技巧大全

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript数组去重方法全解析》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

JavaScript数组去重推荐用Set+扩展运算符处理基础类型，filter+indexOf兼容旧环境，对象数组需按字段用filter+findIndex或Map实现；避免reduce+includes和splice等低效易错方法。

JavaScript 数组去重有多种方法，核心区别在于：是否保留原顺序、是否兼容旧环境、是否支持对象等复杂类型、以及性能表现。现代开发中推荐优先使用 Set + 扩展运算符，简洁且语义清晰。

✅ 基础类型去重（推荐：Set + 展开）

适用于字符串、数字、布尔值等原始值，自动去重并保持首次出现顺序：

const arr = [1, 2, 2, 3, 'a', 'a', true, true];
const unique = [...new Set(arr)]; // [1, 2, 3, 'a', true]

• 写法最简，可读性高
• 天然去重，不修改原数组
• ES6+ 环境可用（几乎所有现代浏览器和 Node.js 12+）

✅ 兼容老环境（IE 或低版本 Node）

用 filter + indexOf 模拟去重逻辑：

const arr = [1, 2, 2, 3];
const unique = arr.filter((item, index) => arr.indexOf(item) === index);

• 兼容 IE9+，无需额外 polyfill
• 时间复杂度 O(n²)，小数组无压力，大数组慎用
• 同样保持原始顺序

✅ 处理对象数组（按指定字段去重）

原始值去重方法对对象无效（因为引用不同），需基于 key 判断：

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' }
];

const uniqueById = users.filter((user, index, self) =>
  index === self.findIndex(item => item.id === user.id)
);

• 用 findIndex 定位第一个匹配项，保留首次出现的对象
• 也可配合 Map 实现更高性能（尤其大数据量）
• 注意：不能直接用 Set 对象数组，除非自定义序列化逻辑

⚠️ 不推荐的方法（易出错或过时）

避免使用 reduce + includes 在大数组中反复遍历；也别用 for 循环配合 splice 边遍历边删——容易跳过元素。

• includes 在每次迭代都从头扫描，O(n²) 更明显
• splice 改变原数组长度后，索引会偏移，逻辑难维护
• 用 Map 或 Set 缓存已见 key 是更健壮的选择

今天关于《JavaScript数组去重技巧大全》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！