在日常的开发当中，我们经常会遇到数组去重的场景，通常来说不会的就网上查一下，用完即溜，不会彻底的去深究到底有多少种方法可以解决这个问题，今天刚好有空，咱们一起来罗列一下，加深加深印象。
一、new Set去重（ES6中最常用）
function unique (arr) {
return Array.from(new Set(arr))
}
function unique (arr) {
return [...new Set(arr)]
}
// input
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
// output
[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {}, {}]
// {}没有去重
如果不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。
二、利用for嵌套for，然后splice去重（ES5中最常用）
function unique(arr){
for(var i = 0; i < arr.length; i++){
for(var j=i+1; j < arr.length; j++){
if(arr[i] === arr[j]){ //第一个等同于第二个，splice方法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
}
// input
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
// output
== [1, 'true', 15, false, undefined, NaN, NaN, 'NaN', 'a', {}, {}]
=== [1, 'true', true, 15, false, undefined, null, NaN, NaN, 'NaN', 0, 'a', {}, {}]
==的情况
NaN和{}没有去重，两个null、true直接消失了
===的情况NaN 和 {}没有去重
三、利用indexOf判断法
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
[1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {}, {}]
// NaN、{}没有去重
新建了一个空数组，遍历老数组的项是否存在于新数组
四、利用includes
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var array =[];
for(var i = 0; i < arr.length; i++) {
if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
array.push(arr[i]);
}
}
return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]
// {}没有去重
和第三种是一个意思
五、利用hasOwnProperty判断属性
function unique(arr) {
var obj = {};
return arr.filter(function(item, index, arr){
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]
//所有的都去重了
六、利用Map数据结构去重
function arrayNonRepeatfy(arr) {
let map = new Map();
let array = new Array(); // 数组用于返回结果
for (let i = 0; i < arr.length; i++) {
if(map.has(arr[i])) { // 如果有该key值
map.set(arr[i], true);
} else {
map.set(arr[i], false); // 如果没有该key值
array.push(arr[i]);
}
}
return array ;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(arrayNonRepeatfy(arr))
[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {}, {}]
// {}没有去掉
七、利用reduce+includes
function unique(arr){
return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {}, {}]
// {}没有去掉
总结
1、大家在解决数组去重问题时，如果数组项存在 {} 对象时，多留个心眼，因为大部分常用的去重方法都无法解决，需要通过hasOwnProperty来处理，也就是上面的第五种方法
2、大家在做遍历属性值对比时尽量采用 ===
各位大佬，如果有更多解决方法，可以留言，我补上
