JavaScript 数组去重的几种方法：从基础到高级！

在前端开发中，数组去重是一个常见的需求。今天我们就来聊聊 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	代码简洁，功能强大	需要引入第三方库

---