下面给你一份 最新整理的 JavaScript 数组去重四大常见方法，包含写法、原理、优缺点与最佳实践，一看就明白、可直接用于面试笔记。

✅ 1. 使用 ES6 Set 去重（最推荐）

✔ 写法最短

✔ 性能最好

✔ 可去除所有重复，包括对象引用一致的情况

const arr = [1, 2, 2, 3, 4, 4];

const result = [...new Set(arr)];
console.log(result); // [1, 2, 3, 4]

适用场景

  • 数字、字符串、布尔等基础类型
  • 对象引用相同的情况也能处理

不适用

  • 对象内容相同但引用不同（Set 认为不相等）
const arr = [{a:1}, {a:1}];
new Set(arr); // 不去重

✅ 2. 使用 filter + indexOf 去重（传统方法）

原理：

indexOf 总是返回元素第一次出现的位置。

const arr = [1, 2, 2, 3];

const result = arr.filter((item, index) => {
  return arr.indexOf(item) === index;
});

console.log(result);  // [1, 2, 3]

优点

  • 可读性强
  • 兼容老浏览器（ES5）

缺点

  • 时间复杂度 O(n²)（因为 indexOf 内部是循环）

✅ 3. 使用 reduce + Map（可处理对象内容相同）

这是项目中高级写法，可按对象字段去重。

const arr = [
  { id: 1, name: "A" },
  { id: 1, name: "A" },
  { id: 2, name: "B" }
];

const result = arr.reduce((map, item) => {
  if (!map.temp.has(item.id)) {
    map.temp.add(item.id);
    map.result.push(item);
  }
  return map;
}, { temp: new Set(), result: [] }).result;

console.log(result);
// [ { id: 1, name: "A" }, { id: 2, name: "B" } ]

优点

  • 可按对象中某个 key 去重
  • 性能比 indexOf 方法好很多（近似 O(n)）

缺点

  • 代码量稍多

✅ 4. 使用 sort + 遍历相邻元素（适合超大数组）

原理：

先排序 → 相同的值就在一起 → 逐个比较

const arr = [3, 1, 2, 2, 3];

const result = arr
  .sort((a, b) => a - b)
  .filter((item, index, array) => {
    return index === 0 || item !== array[index - 1];
  });

console.log(result);  // [1, 2, 3]

优点

  • 排序后只需一次遍历，性能好（O(n log n)）

缺点

  • 改变原数组排序
  • 需要自定义排序规则（字符串数字等）

🎯 四种方法对比总结

方法代码量性能是否保留原顺序对象内容去重
Set最少✔✔✔（最快）✔✘
filter + indexOf中等✘（慢）✔✘
reduce + Map/Set较多✔✔✔✔（最佳）
sort + 遍历一般✔✔✘（会排序）✘

📌 实际项目中的最佳实践推荐

✔ 基础类型数组（数字/字符串）

[...new Set(arr)]

✔ 多字段对象数组去重

reduce + Map/Set

✔ 大数据量数组，需要性能

sort + 遍历