数组去重,手写数组去重方法的代码。有十来种
在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重。虽然日常项目用到的概率比较低,但还是需要了解一下

数据:

let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
方法1:ES6 Set+数组的Array.from方法 去重(ES6)
const newArr = [...new Set(arr)]
console.log(newArr)            //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

or

const newArr = Array.from(new Set(arr))
console.log(unique(arr))    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

上面有去不掉空对象的问题,因为空对象的引用地址不同,所以不会被认为是重复的,可以把空的对象转换成字符串,再用set去重,然后再还原对象,底下别的去重方式 同样类似处理

let arr2 = []
let seen = new Set()

for(let item of arr) {
    let key = (typeof item === "object") ? JSON.stringfy(item) : String(item) + typeof item
    if(!(seen.has(key))) {
        seen.add(key)
        arr2.push(item)
    }
}
console.log(arr2)    // [1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {}]
方法2:for嵌套for,用splice去重(ES5)
function unique(arr) {
    for (var i = 0; i < arr.lenght; i++) {
        for (var j = 0; j < arr.length; j++) {
            if(arr[i] === arr[j]) { //第一个等于第二个,就删除第二个
                arr.splice(j,1);
                j--;
            }
        }
    }
    return arr;
}
 console.log(unique(arr))  //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重,两个null直接消失了
方法3:利用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;
}
console.log(unique(arr))     // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重
方法4:利用sort()
function unique(arr) {
   if (!Array.isArray(arr)) {
       console.log('type error!')
       return;
   }
   arr = arr.sort()
   var arrry= [arr[0]];
   for (var i = 1; i < arr.length; i++) {
       if (arr[i] !== arr[i-1]) {
           arrry.push(arr[i]);
       }
   }
   return arrry;
}
console.log(unique(arr))    // [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]      //NaN、{}没有去重
方法5:利用对象的属性不能相同的特点
function unique(arr) {
    if (!Array.isArray(arr)) {
       console.log('type error!')
       return
    }
    var arrry= [];
    var  obj = {};
    for (var i = 0; i < arr.length; i++) {
       if (!obj[arr[i]]) {
           arrry.push(arr[i])
           obj[arr[i]] = 1
       } else {
           obj[arr[i]]++
       }
   }
   return arrry;
}
console.log(unique(arr))    //[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]    //两个true直接去掉了,NaN和{}去重
方法6:利用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
}
console.log(unique(arr))    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{}没有去重
方法7: 利用filter + 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)
   })
}
console.log(unique(arr))    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   //所有的都去重了
方法8: filter+indexof
function unique(arr) {
    return arr.filter(function(item, index, arr) {
        //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
        return arr.indexOf(item, 0) === index;
    });
}
console.log(unique(arr))    //[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]
方法9: 递归
function unique(arr) {
    var array= arr;
    var len = array.length;
    array.sort(function(a,b){   //排序后更加方便去重
       return a - b;
   })
   function loop(index){
       if(index >= 1){
           if(array[index] === array[index-1]){
               array.splice(index,1);
           }
           loop(index - 1);    //递归loop,然后数组去重
       }
   }
   loop(len-1);
   return array;
}
console.log(unique(arr))    //[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]
方法10: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 ;
}
console.log(unique(arr))    //[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]
方法11: refuce+includes
function unique(arr){
   return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
console.log(unique(arr));    // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]