js怎么删除数组重复项

# JS怎么删除数组重复项

在JavaScript开发中，处理数组去重是一个常见需求。本文将详细介绍7种实用的数组去重方法，并分析它们的性能差异和适用场景。

## 一、使用Set数据结构（ES6+）

**最简单高效的方法**，适合现代浏览器环境：

```javascript
const uniqueArray = [...new Set(originalArray)];
// 或
const uniqueArray = Array.from(new Set(originalArray));

原理：Set对象自动忽略重复值

时间复杂度：O(n)

优点： - 代码简洁 - 性能最佳 - 保持原始顺序

缺点： - 不兼容IE11及以下浏览器

二、filter() + indexOf()

兼容性更好的传统方法：

const uniqueArray = originalArray.filter(
  (item, index) => originalArray.indexOf(item) === index
);

原理：通过检查元素首次出现位置实现过滤

时间复杂度：O(n²)（不推荐大数据量使用）

特点： - 兼容性好（ES5） - 保持原始顺序 - 性能中等

三、reduce()实现

函数式编程风格解决方案：

const uniqueArray = originalArray.reduce((acc, current) => {
  return acc.includes(current) ? acc : [...acc, current];
}, []);

优化版（使用Set提高性能）：

const uniqueArray = originalArray.reduce((acc, current) => {
  return acc.has(current) ? acc : acc.add(current);
}, new Set());

适用场景： - 需要链式操作时 - 函数式编程范式

四、for循环 + includes()

基础实现方案：

function unique(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (!result.includes(arr[i])) {
      result.push(arr[i]);
    }
  }
  return result;
}

优化方向： 1. 使用对象缓存替代includes检查（O(1)查找） 2. 倒序循环避免length重复计算

五、利用Object键值去重

原理：对象键名自动去重

const obj = {};
originalArray.forEach(item => {
  obj[item] = true;
});
const uniqueArray = Object.keys(obj);

注意事项： - 所有元素会被转为字符串类型 - 无法区分”1”和1 - 不推荐混合类型数组使用

六、Map数据结构方案

结合了Set和Object的优点：

const map = new Map();
const uniqueArray = [];
originalArray.forEach(item => {
  if (!map.has(item)) {
    map.set(item, true);
    uniqueArray.push(item);
  }
});

优势： - 保持任意数据类型 - 保留原始顺序 - 查找性能O(1)

七、排序相邻去重法

先排序后去重的高效方案：

const sortedArray = [...originalArray].sort();
const uniqueArray = [];
let last;
for (let i = 0; i < sortedArray.length; i++) {
  if (sortedArray[i] !== last) {
    uniqueArray.push(sortedArray[i]);
    last = sortedArray[i];
  }
}

适用场景： - 大型数组（时间复杂度O(n logn)） - 不要求保持原始顺序

性能对比测试

使用包含10000个随机数的数组测试：

特殊场景处理

1. 对象数组去重

function uniqueObjectArray(arr, key) {
  const map = new Map();
  return arr.filter(item => {
    const identifier = JSON.stringify(key ? item[key] : item);
    return map.has(identifier) ? false : map.set(identifier, true);
  });
}

2. 多维数组去重

function deepUnique(arr) {
  const seen = new WeakSet();
  return arr.filter(obj => {
    const identifier = JSON.stringify(obj);
    return seen.has(identifier) ? false : seen.add(identifier);
  });
}

最佳实践建议

1. 现代项目：优先使用Set方案
2. 兼容性要求：选择filter+indexOf或reduce
3. 大型数据集：考虑排序去重法
4. 对象数组：使用自定义key或JSON序列化
5. TypeScript项目：添加类型注解：

function unique<T>(arr: T[]): T[] {
  return [...new Set(arr)];
}

总结

选择数组去重方法时需要考虑： - 运行环境兼容性 - 数据规模 - 是否需要保持顺序 - 元素数据类型

Set方案在大多数现代场景下都是最优选择，而理解各种方法的底层原理有助于我们在特殊情况下做出合理选择。 “`

文章实际字数约1500字，包含了代码示例、性能分析和实用建议。如需调整篇幅或补充特定内容，可以随时告知。