JavaScript数组去重技巧与优化方法

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《JavaScript数组去重方法及优化技巧》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

Set可快速去重原始值，但对象需按字段用Map或filter+findIndex；NaN自动合并，-0/+0默认等价；大数据量应避免O(n²)算法，优先用Map缓存键值。

用 Set 快速去重，但要注意类型和引用问题

直接用 new Set(arr) 是最简方式，适合基础场景。它自动过滤重复的原始值（string、number、boolean、null、undefined），但对对象或数组无效——因为它们是按引用比较的。

• Array.from(new Set([1, 2, 2, 3])) → [1, 2, 3]
• Array.from(new Set([{a:1}, {a:1}])) → 仍是两个对象，长度为 2
• 对字符串数组也安全：Array.from(new Set(['a', 'b', 'a'])) → ['a', 'b']

对象数组去重得靠 filter + findIndex 或 Map 缓存

不能依赖 Set，必须定义“重复”的逻辑，比如根据某个字段（如 id）判断唯一性。常见写法是用 filter 配合 findIndex，但性能一般；更优的是用 Map 记录已见的 key，一次遍历完成。

const arr = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 1, name: 'c'}];
const seen = new Map();
const unique = arr.filter(item => {
  if (seen.has(item.id)) return false;
  seen.set(item.id, true);
  return true;
});

• 避免用 indexOf 或 includes 判断对象，它们内部仍用 ===，无法识别逻辑重复
• 如果字段可能为 undefined 或 null，Map 比用普通对象做 hash 更稳妥（不会触发原型链查找）
• 字段名硬编码时注意拼写：比如写成 item.ID 而非 item.id 就会全去重失败

大数据量下慎用 includes 或双重循环

像 arr.filter((item, i) => arr.indexOf(item) === i) 看似简洁，但时间复杂度是 O(n²)，10 万条数据可能卡顿数秒。浏览器主线程会被阻塞，UI 停滞。

• indexOf 在每次迭代中都从头扫描，实际做了 n×n 次比较
• 用 Set 或 Map 缓存键值，可降到 O(n)，内存换时间，值得
• 若数据来自后端且总量极大（如 >50 万），考虑是否真需要前端去重——有时应在 API 层加 DISTINCT 或分页+服务端 dedupe

特殊值去重要主动处理 NaN 和 -0

Set 能正确把多个 NaN 合并为一个（这是 ES6 规范行为），但 -0 和 +0 在 Set 中被视为相同，而某些业务可能要求区分。这时得手动控制。

const arr = [NaN, NaN, 0, -0, +0];
// Set 默认：[NaN, 0] —— -0 和 +0 都变成 0
// 若需保留 -0，可用 Object.is 判断：
const uniqueByObjectIs = arr.filter((item, i) =>
  arr.findIndex(v => Object.is(v, item)) === i
);

• Object.is(NaN, NaN) 返回 true，而 NaN === NaN 是 false
• Object.is(-0, +0) 返回 false，可借此区分零符号
• 这种精细控制会牺牲性能，只在金融、科学计算等明确要求时启用

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