在前端开发中，数组去重是一个常见的需求。今天我们就来聊聊 JavaScript 中几种常用的数组去重方法，从最简单的到最高效的，帮你彻底掌握这个技能！
数组去重的几种方法
1. 使用Set 去重
Set 是 ES6 引入的一种数据结构，它天然具有去重的特性。
示例代码：
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // 输出：[1, 2, 3, 4, 5]
优点：代码简洁，性能较好。
缺点：无法处理对象类型的元素。
2. 使用filter 和indexOf
通过 filter 和 indexOf 结合，筛选出第一次出现的元素。
示例代码：
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // 输出：[1, 2, 3, 4, 5]
优点：兼容性好，支持旧版浏览器。
缺点：性能较差，时间复杂度为 O(n²)。
3. 使用reduce 和includes
通过 reduce 遍历数组，结合 includes 判断是否已存在。
示例代码：
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.reduce((acc, item) => {
if (!acc.includes(item)) acc.push(item);
return acc;
}, []);
console.log(uniqueArr); // 输出：[1, 2, 3, 4, 5]
优点：代码清晰，易于理解。
缺点：性能较差，时间复杂度为 O(n²)。
4. 使用forEach 和对象属性
利用对象的属性名不可重复的特性，实现去重。
示例代码：
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];
const temp = {};
arr.forEach(item => {
if (!temp[item]) {
temp[item] = true;
uniqueArr.push(item);
}
});
console.log(uniqueArr); // 输出：[1, 2, 3, 4, 5]
优点：性能较好，时间复杂度为 O(n)。
缺点：无法处理对象类型的元素。
5. 使用Map 去重
Map 是 ES6 引入的另一种数据结构，可以存储键值对，且键名不可重复。
示例代码：
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];
const map = new Map();
arr.forEach(item => {
if (!map.has(item)) {
map.set(item, true);
uniqueArr.push(item);
}
});
console.log(uniqueArr); // 输出：[1, 2, 3, 4, 5]
优点：性能较好，支持对象类型的元素。
缺点：代码稍复杂。
6. 使用lodash 库
lodash 是一个流行的 JavaScript 工具库，提供了 uniq 方法用于数组去重。
示例代码：
const _ = require('lodash');
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = _.uniq(arr);
console.log(uniqueArr); // 输出：[1, 2, 3, 4, 5]
优点：代码简洁，功能强大。
缺点：需要引入第三方库。
总结
| 方法 | 优点 | 缺点 |
|---|---|---|
Set | 代码简洁，性能较好 | 无法处理对象类型的元素 |
filter indexOf | 兼容性好 | 性能较差 |
reduce includes | 代码清晰 | 性能较差 |
forEach + 对象属性 | 性能较好 | 无法处理对象类型的元素 |
Map | 性能较好，支持对象类型 | 代码稍复杂 |
lodash | 代码简洁，功能强大 | 需要引入第三方库 |
