JavaScript数组去重的15种方法总结
作者：胖方Hale
这篇文章主要介绍了JavaScript数组去重的15种方法,包括利用ES6 Set、filter、reduce、Map对象、sort等,适合在面试中展示,需要的朋友可以参考下
前言
数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的 10 种，面试官很有可能对你刮目相看。一般工作只需要记住使用 SET 和递归就够用了。
在真实的项目中碰到的数组去重，一般都是后台去处理，很少让前端处理数组去重。虽然日常项目用到的概率比较低，但还是需要了解一下，以防面试的时候可能回被问到。
能力有限，但还是尽力想去做到最好。如果文档内容对你有一点帮助，请帮忙点一个免费的赞和关注🙇🙇🙇，这样我就能得到更多分享的机会，多多给大家分享。万分感谢
1. 利用 ES6 SET 去重(最常用)
// 数组去重
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 方法一：使用Set对象
const uniqueArr1 = function(arr) {
return Array.from(new Set(arr));
};
console.log(uniqueArr1(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
优势：简单，方便，代码最少，容易理解。
缺点：无法去掉 {} 空对象。
2. 使用 fliter 方法
// 方法二：使用filter方法
const uniqueArr2 = function(arr) {
return arr.filter((item, index, self) => self.indexOf(item) === index);
};
console.log(uniqueArr2(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
3. 使用 reduce 方法
// 方法三：使用reduce方法
const uniqueArr3 = function(arr) {
return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
};
4. 使用 Map 对象
// 方法四：使用Map对象
const uniqueArr4 = function(arr) {
const map = new Map();
return arr.filter((item) => !map.has(item) && map.set(item, 1));
};
console.log(uniqueArr4(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
5. 使用 sort 方法
// 方法五：使用sort方法
const uniqueArr5 = function(arr) {
return arr.sort().filter((item, index, self) => item !== self[index - 1]);
};
6. 使用 includes 方法
// 方法六：使用includes方法
const uniqueArr6 = function(arr) {
const res = [];
for (let i = 0; i < arr.length; i++) {
if (!res.includes(arr[i])) {
res.push(arr[i]);
}
}
return res;
};
console.log(uniqueArr6(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
7. 使用 indexof() 方法
// 方法七：使用indexOf方法
const uniqueArr7 = function(arr) {
const res = [];
for (let i = 0; i < arr.length; i++) {
if (res.indexOf(arr[i]) === -1) {
res.push(arr[i]);
}
}
return res;
};
console.log(uniqueArr7(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
8. 使用 for …of 循环
// 方法八：使用for...of循环
const uniqueArr8 = function(arr) {
const res = [];
for (const item of arr) {
if (!res.includes(item)) {
res.push(item);
}
}
return res;
};
console.log(uniqueArr8(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
9. 使用 for…in 循环
// 方法九：使用for...in循环
const uniqueArr9 = function(arr) {
const res = [];
for (const item in arr) {
if (!res.includes(arr[item])) {
res.push(arr[item]);
}
}
return res;
};
console.log(uniqueArr9(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
10. 使用 white 循环
// 方法十：使用while循环
const uniqueArr10 = function(arr) {
const res = [];
let i = 0;
while (i < arr.length) {
if (!res.includes(arr[i])) {
res.push(arr[i]);
}
i++;
}
return res;
};
console.log(uniqueArr10(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
11. 使用 do…while 循环
// 方法十一：使用do...while循环
const uniqueArr11 = function(arr) {
const res = [];
let i = 0;
do {
if (!res.includes(arr[i])) {
res.push(arr[i]);
}
i++;
} while (i < arr.length);
return res;
};
console.log(uniqueArr11(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
12. 使用 forEach 方法
// 方法十二：使用forEach方法
const uniqueArr12 = function(arr) {
const res = [];
arr.forEach((item) => {
if (!res.includes(item)) {
res.push(item);
}
});
return res;
};
console.log(uniqueArr12(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
13. 使用 map 方法
// 方法十三：使用map方法
const uniqueArr13 = function(arr) {
const res = [];
arr.map((item) => {
if (!res.includes(item)) {
res.push(item);
}
})
}
console.log(uniqueArr13(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
14. 利用递归去重
// 方法十四：利用递归去重
const uniqueArr14 = function(arr) {
const res = arr;
const len = res.length;
for (let i = 0; i < len; i++) {
for (let j = i + 1; j < len; j++) {
if (res[i] === res[j]) {
res.splice(j, 1);
len--;
}
}
}
}
console.log(uniqueArr14(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]总结
到此这篇关于JavaScript数组去重的15种方法的文章就介绍到这了,更多相关JS数组去重内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！