JS数组去重技巧大全

本文深入解析了JavaScript数组去重的多种实用方案：对于基础类型数组，推荐使用高效且简洁的`[...new Set(arr)]`（时间复杂度O(n)），它天然保留顺序并正确处理NaN；针对对象数组，则需基于指定key（如id）借助Map实现高性能、精准的去重；同时提醒开发者注意Set对引用类型判等的局限性、IE兼容性问题及稀疏数组的语义丢失风险，并给出了兼顾兼容性与可读性的备选方案——助你根据实际场景快速选择最优解。

用 Set 快速去重，但要注意对象和 NaN 的特殊行为

最常用也最快的去重方式是 Array.from(new Set(arr)) 或展开运算符写法 [...new Set(arr)]。它时间复杂度接近 O(n)，底层依赖引擎对 Set 的哈希优化。

但要注意：Set 判等基于 SameValueZero（即 === 规则），所以 NaN 和 NaN 被视为相等，能正确去重；而对象即使内容相同，引用不同就仍是不同元素——{a:1} 和 {a:1} 不会去重。

• 原始数组含字符串、数字、布尔值时，[...new Set(arr)] 是首选
• 遇到对象数组，必须换策略（见下一条）
• 若需保留原始顺序，Set 方式天然支持；而用 filter() + indexOf() 会慢且不稳定（indexOf 总从头找）

对象数组去重：按指定 key 提取唯一项

对 [{id:1,name:'a'}, {id:2,name:'b'}, {id:1,name:'c'}] 这类数据，得靠 Map 或临时键值索引。直接用 JSON.stringify 对比性能差、还可能因属性顺序或 undefined 导致误判。

推荐用 Map 缓存已见的 key 值：

const uniqueByKey = (arr, key) => {
  const seen = new Map();
  return arr.filter(item => {
    const k = item[key];
    if (seen.has(k)) return false;
    seen.set(k, true);
    return true;
  });
};
// 使用：uniqueByKey(list, 'id')

• 比双重循环或 findIndex 查找快一个数量级（O(n) vs O(n²)）
• key 必须是基本类型（如 string/number）；若需复合 key，可拼接成字符串（如 item.a + '|' + item.b）
• 不修改原数组，返回新数组——这点和 Set 一致

需要兼容 IE 或处理稀疏数组？避免用扩展运算符

[...new Set(arr)] 在 IE 完全不支持，且对稀疏数组（如 [1, , 3]）会展开为 [1, undefined, 3]，丢失“空位”语义。如果项目仍需支持旧环境，或明确要保留稀疏性，就得回退到传统方法。

• 用 filter() + indexOf() 最兼容，但性能差，仅适合小数组（
• 手动 for 循环 + includes() 或哈希对象记录已见值，可控性强
• 现代项目建议用 Babel 转译或直接放弃 IE；稀疏数组场景本身极少，多数时候填 undefined 更安全

去重只是第一步，后续操作常决定整体效率

实际业务中，去重往往不是终点。比如从后端拿到用户列表后去重，紧接着要渲染、排序、分页。这时候如果在每一步都生成新数组（如先去重、再 sort()、再 slice()），内存和 GC 压力会明显上升。

• 链式调用时注意：map()、filter()、sort() 都返回新数组，连续三次调用 = 三份内存拷贝
• 大数据量下，考虑用 for 循环合并逻辑（例如边遍历边去重+筛选+计数）
• 如果只是校验是否重复，用 new Set(arr).size === arr.length 比全量去重快得多

本篇关于《JS数组去重技巧大全》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！