JS 数组去重解析：从新手到专家的 8 种方法
2023-11-09 06:04:00
前言
JS 数组去重是前端面试中经常考察的一道题，也是实际项目中经常遇到的问题。本文将从新手到专家的角度，介绍 8 种 JS 数组去重的方法，并提供示例代码和测试用例，帮助你全面掌握 JS 数组去重技巧，在面试或实际项目中脱颖而出。
方法一：使用 filter() 方法
filter() 方法是 JavaScript 内置数组方法，用于过滤数组中的元素，返回一个由通过指定条件的元素组成的新数组。我们可以利用 filter() 方法来实现数组去重。
const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // [1, 2, 3, 4, 5]
方法二：使用 Set 数据结构
Set 数据结构是 JavaScript 内置的数据结构，它可以存储唯一值。我们可以利用 Set 数据结构来实现数组去重。
const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]
方法三：使用 reduce() 方法
reduce() 方法是 JavaScript 内置数组方法，用于对数组中的元素进行累积操作，返回一个累积结果。我们可以利用 reduce() 方法来实现数组去重。
const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = arr.reduce((acc, item) => {
if (!acc.includes(item)) {
acc.push(item);
}
return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]
方法四：使用 forEach() 方法和 Set 数据结构
forEach() 方法是 JavaScript 内置数组方法，用于遍历数组中的每个元素。我们可以利用 forEach() 方法和 Set 数据结构来实现数组去重。
const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [];
const seen = new Set();
arr.forEach((item) => {
if (!seen.has(item)) {
uniqueArr.push(item);
seen.add(item);
}
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]
方法五：使用 indexOf() 方法
indexOf() 方法是 JavaScript 内置数组方法，用于查找数组中指定元素的索引。我们可以利用 indexOf() 方法来实现数组去重。
const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) === i) {
uniqueArr.push(arr[i]);
}
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]
方法六：使用 lastIndexOf() 方法
lastIndexOf() 方法是 JavaScript 内置数组方法，用于查找数组中指定元素的最后一个索引。我们可以利用 lastIndexOf() 方法来实现数组去重。
const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
if (arr.lastIndexOf(arr[i]) === i) {
uniqueArr.push(arr[i]);
}
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]
方法七：使用 Object.keys() 方法
Object.keys() 方法是 JavaScript 内置对象方法，用于获取对象的所有键名。我们可以利用 Object.keys() 方法来实现数组去重。
const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [];
const obj = {};
arr.forEach((item) => {
if (!obj[item]) {
uniqueArr.push(item);
obj[item] = true;
}
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]
方法八：使用 lodash 库
lodash 是一个 JavaScript 库，提供了许多有用的函数。我们可以利用 lodash 库的 _.uniq() 方法来实现数组去重。
const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = _.uniq(arr);
console.log(uniqueArr); // [1, 2, 3, 4, 5]
总结
本文介绍了 8 种 JS 数组去重的方法，从最基础的过滤法到最优化的 Set 数据结构法，每种方法都配有示例代码和测试用例，方便你更好的测试和理解。希望本文能帮助你全面掌握 JS 数组去重技巧，在面试或实际项目中脱颖而出。
