【js数组去重方法】在 JavaScript 中,数组去重是一个常见的需求。不同的数据类型和性能要求会决定使用哪种去重方式。下面是一些常用的数组去重方法,并对它们进行总结和对比。
一、常见去重方法总结
| 方法名称 | 使用场景 | 是否支持对象去重 | 性能(时间复杂度) | 是否保留顺序 | 是否使用 ES6+ 特性 |
| `filter + indexOf` | 简单数组去重 | 否 | O(n²) | 是 | 否 |
| `Set` | 基础数组去重 | 否 | O(n) | 是 | 是 |
| `reduce` | 高级操作或链式处理 | 否 | O(n) | 是 | 是 |
| `Object` | 数组元素为字符串时 | 否 | O(n) | 否 | 否 |
| `includes` + `forEach` | 简单逻辑处理 | 否 | O(n²) | 是 | 否 |
| `Map` | 支持对象去重 | 是 | O(n) | 是 | 是 |
二、具体实现方法说明
1. `filter + indexOf`
```javascript
let arr = [1, 2, 2, 3, 4, 4];
let uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
```
- 优点:代码简洁,适合简单场景。
- 缺点:重复遍历数组,效率较低。
2. `Set`
```javascript
let arr = [1, 2, 2, 3, 4, 4];
let uniqueArr = [...new Set(arr)];
```
- 优点:语法简洁,性能高。
- 缺点:不支持对象去重。
3. `reduce`
```javascript
let arr = [1, 2, 2, 3, 4, 4];
let uniqueArr = arr.reduce((acc, item) => {
if (!acc.includes(item)) acc.push(item);
return acc;
}, []);
```
- 优点:可扩展性强,适合复杂逻辑。
- 缺点:需要手动判断是否已存在。
4. `Object`
```javascript
let arr = ['a', 'b', 'a'];
let obj = {};
let uniqueArr = arr.filter(item => {
return obj.hasOwnProperty(item) ? false : (obj[item] = true);
});
```
- 优点:性能较好,适合字符串数组。
- 缺点:不能处理对象或数字以外的类型。
5. `includes + forEach`
```javascript
let arr = [1, 2, 2, 3, 4, 4];
let uniqueArr = [];
arr.forEach(item => {
if (!uniqueArr.includes(item)) uniqueArr.push(item);
});
```
- 优点:逻辑清晰,易于理解。
- 缺点:效率不高,不适合大数据量。
6. `Map`(支持对象去重)
```javascript
let arr = [{ id: 1 }, { id: 2 }, { id: 1 }];
let map = new Map();
let uniqueArr = arr.filter(item => {
const key = JSON.stringify(item);
return !map.has(key) && map.set(key, 1);
});
```
- 优点:支持对象去重,保留顺序。
- 缺点:需要将对象转为字符串,可能影响性能。
三、选择建议
- 如果只是简单的基础类型数组,推荐使用 `Set`,简洁高效。
- 如果需要保留顺序且处理对象,使用 `Map` 或自定义 `filter`。
- 对于旧版本浏览器兼容性要求高的项目,可以使用 `filter + indexOf` 或 `Object` 方法。
通过合理选择去重方法,可以提升代码的可读性和运行效率,同时也更符合实际开发中的需求。


