在JavaScript中，数组去重是一个常见的需求，尤其在处理数据时，重复的元素可能会导致错误或不一致的结果。这里我们将介绍14种不同的方法来实现数组去重，并通过代码示例来演示每种方法的实现。
1. 使用 Set
Set 是一种新的数据结构，能够存储唯一值。通过将数组转换为 Set，然后再将其转换回数组，可以轻松实现去重。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = Array.from(new Set(array));
console.log(uniqueArray); // [1, 2, 3, 4, 5]
2. 利用 filter 和 indexOf
使用 filter 方法遍历数组，并结合 indexOf 方法来判断数组中第一次出现的元素的下标是否等于当前下标。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
3. 使用 reduce
可以使用 reduce 方法来构建一个新的数组，该数组将只包含唯一值。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((accumulator, current) => {
if (!accumulator.includes(current)) {
accumulator.push(current);
}
return accumulator;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
4. 使用 forEach
使用 forEach 遍历数组，并将唯一值添加到新的数组中。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [];
array.forEach(item => {
if (!uniqueArray.includes(item)) {
uniqueArray.push(item);
}
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]
5. 使用 map 和 filter
通过 map 创建一个新的数组，再结合 filter 可以实现去重。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.map((item, index) => ({
item,
index
})).filter((current, index, self) =>
index === self.findIndex(t => t.item === current.item)
).map(o => o.item);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
6. 使用 includes 和 for 循环
通过 for 循环和 includes 方法，可以手动检查每个元素是否已经存在于新的数组中。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {
if (!uniqueArray.includes(array[i])) {
uniqueArray.push(array[i]);
}
}
console.log(uniqueArray); // [1, 2, 3, 4, 5]
7. 利用 Object 的属性来去重
可以使用对象的属性来存储已经见过的元素，从而去重。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueObject = {};
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {
if (!uniqueObject[array[i]]) {
uniqueArray.push(array[i]);
uniqueObject[array[i]] = true;
}
}
console.log(uniqueArray); // [1, 2, 3, 4, 5]
8. 使用 sort 和遍历
通过对数组进行排序，再遍历一遍，直接比较相邻的元素来实现去重。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.sort().filter((item, index) => item !== array[index - 1]);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
9. 使用 JSON 方法
将数组转换为 JSON 字符串是另一种去重的方法，然后再解析回来。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = JSON.parse(JSON.stringify([...new Set(array)]));
console.log(uniqueArray); // [1, 2, 3, 4, 5]
10. 利用递归（仅适合小数组的场景）
可以使用递归函数进行去重，不过不建议用于大数组。
const uniqueRecursive = (arr, result = []) => {
if (arr.length === 0) return result;
const [first, ...rest] = arr;
if (!result.includes(first)) result.push(first);
return uniqueRecursive(rest, result);
};
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = uniqueRecursive(array);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
11. 使用 Array.prototype.some
利用 some 方法判断元素是否已经存在来实现去重。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [];
array.forEach(item => {
if (!uniqueArray.some(uniqueItem => uniqueItem === item)) {
uniqueArray.push(item);
}
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]
12. 使用 Array.from + map + filter
另一种利用 Array.from 结合 map 和 filter 的方法。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = Array.from(array.map((item, index) => ({
item,
index
})))
.filter((current, index, self) =>
index === self.findIndex(t => t.item === current.item)
).map(o => o.item);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
13. 使用 splice 和 indexOf
利用 splice 方法在原数组中进行操作。
const array = [1, 2, 2, 3, 4, 4, 5];
for (let i = 0; i < array.length; i++) {
while (array.indexOf(array[i], i + 1) !== -1) {
array.splice(array.indexOf(array[i], i + 1), 1);
}
}
console.log(array); // [1, 2, 3, 4, 5]
14. 使用第三方库
如果你的项目中使用了 Lodash 或类似的库，可以直接使用它们提供的去重方法。
const _ = require('lodash');
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = _.uniq(array);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
以上就是在 JavaScript 中实现数组去重的 14 种方法。根据不同的应用场景和需求，开发者可以选择适合自己的去重方式。希望本篇文章对你有帮助！
