JavaScript数组元素比较：如何检测并移除重复元素？

下面是几种常用的数组去重方案，覆盖不同场景需求：

1. ES6 Set 对象（推荐用于简单类型数组） #

Set 是ES6引入的集合类型，天然不允许重复值，结合扩展运算符或Array.from可以快速实现去重：

const arr = [1, 2, 3, 4, 4];
const uniqueArr = [...new Set(arr)];
// 或者用 Array.from：const uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // 输出: [1, 2, 3, 4]

适用场景：数组元素为字符串、数字、布尔值等原始类型，代码简洁高效。

2. filter + indexOf（兼容ES5及更早版本） #

利用indexOf返回元素首次出现的索引，过滤掉非首次出现的元素：

const arr = [1, 2, 3, 4, 4];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // 输出: [1, 2, 3, 4]

注意：indexOf对NaN的处理有局限，因为NaN === NaN为false，这种方法会保留多个NaN。

3. reduce + includes（灵活可控） #

通过reduce遍历数组，用累加器收集未出现过的元素：

const arr = [1, 2, 3, 4, 4];
const uniqueArr = arr.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);
console.log(uniqueArr); // 输出: [1, 2, 3, 4]

优势：可以在判断逻辑中加入自定义条件，比如针对部分属性去重。

4. 复杂类型数组去重（如对象数组） #

如果数组元素是对象（引用类型），需要根据对象的特定属性判断重复：

方法一：reduce + some #

const arr = [{id: 1}, {id: 2}, {id: 2}, {id: 3}];
const uniqueArr = arr.reduce((acc, curr) => {
  const isDuplicate = acc.some(item => item.id === curr.id);
  if (!isDuplicate) acc.push(curr);
  return acc;
}, []);
console.log(uniqueArr); // 输出: [{id: 1}, {id: 2}, {id: 3}]

方法二：Map 记录已存在的属性值 #

const arr = [{id: 1}, {id: 2}, {id: 2}, {id: 3}];
const idMap = new Map();
const uniqueArr = arr.filter(item => {
  if (!idMap.has(item.id)) {
    idMap.set(item.id, true);
    return true;
  }
  return false;
});

适用场景：需要根据对象的某个唯一标识（如id）去重的场景。

内容的提问来源于stack exchange，提问作者Lunste