JavaScript数组去重方法大全

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript数组去重方法有哪些？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

JavaScript数组去重需据场景选择：小数据量用[...new Set(arr)]，兼容性好且保持顺序；老旧环境用filter+indexOf；大数据量用Set哈希过滤；对象数组则按字段去重。

JavaScript数组去重有多种方式，核心在于根据场景选对方法：小数据量图简单，大数据量看性能，还要兼顾是否保留顺序、是否处理对象等细节。

Set + 扩展运算符（最常用）

适合基本类型（数字、字符串）且要求保持原顺序的场景，代码简洁、可读性强、现代浏览器兼容好。

• 原理：Set自动去重，扩展运算符转回数组
• 写法：[...new Set(arr)]
• 注意：不能处理对象或NaN的深层相等（比如{a:1}和{a:1}仍算不同）

filter + indexOf（兼容性最好）

适用于需要支持老旧环境（如IE）或明确依赖索引逻辑的场景，语义清晰，但时间复杂度为O(n²）。

• 写法：arr.filter((item, index) => arr.indexOf(item) === index)
• 优点：不依赖ES6，所有数组元素都走一遍比较
• 缺点：重复调用indexOf，大数据量时明显变慢

Map 或 Object 做哈希记录（大数据量首选）

当数组很长（上万项）、又需保留顺序时，用一次遍历+哈希查找，效率接近O(n)，比filter方案快得多。

• 基础版（仅限字符串/数字）：arr.reduce((unique, item) => unique.has(item) ? unique : unique.set(item, 1) && unique, new Map()).keys()，再转数组
• 更实用写法：

  const seen = new Set();
  const result = arr.filter(item => !seen.has(item) && seen.add(item));

• 扩展提示：若要处理对象，可序列化键名（如JSON.stringify(obj)），但要注意属性顺序、undefined、函数等会被忽略

针对对象数组的去重（按指定字段）

不能直接用Set，需自定义唯一标识。常见做法是提取关键字段拼接成字符串作为key。

• 示例（按id去重）：

  const seenIds = new Set();
  const uniqueByField = arr.filter(item => {
    if (seenIds.has(item.id)) return false;
    seenIds.add(item.id);
    return true;
  });

• 通用函数思路：接收数组和一个取值函数（如item => item.id或item => [item.name, item.age].join('|')）
• 注意：避免直接用JSON.stringify做key，性能差且不稳定（如属性顺序不同会导致key不同）

基本上就这些。日常开发中，[...new Set(arr)]覆盖80%需求；真遇到几万条数据或对象去重，再上Map/Set手动过滤。不复杂，但容易忽略适用边界。

到这里，我们也就讲完了《JavaScript数组去重方法大全》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！