JS深入之数组去重

本篇文章打算写一下关于数组去重的常用的七种方法。
参考文章：
冴羽的博客

一.Set()

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

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

set简化版：

[...new Set(arr)]  

二.for循环 splice去重

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
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;
}
console.log(unique(arr))
//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重，两个null直接消失了

三.利用for嵌套for，然后push

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

function unique(arr) {
    // res用来存储结果
    var res = [];
    for (var i = 0, arrayLen = arr.length; i < arrayLen; i++) {
        for (var j = 0, resLen = res.length; j < resLen; j++ ) {
            if (arr[i] === res[j]) {
                break;
            }
        }
        // 如果array[i]是唯一的，那么执行完循环，j等于resLen
        if (j === resLen) {
            res.push(arr[i])
        }
    }
    return res;
}

console.log(unique(arr)); //[1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN和{}没有去重

四.利用indexOf+push去重

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、{}没有去重
新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。

五.利用sort()排序后去重

function unique(arr) {
   if (!Array.isArray(arr)) {
       console.log('type error!')
       return;
   }
   arr = arr.sort()
   var array= [arr[0]];
   for (var i = 1; i < arr.length; i++) {
       if (arr[i] !== 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))
// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]      //NaN、{}没有去重

六.filter() 方法

利用filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

 var array = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

 // indexOf()
 // function unique(array) {
 //     var res = array.filter(function(item, index, array){
 //         return array.indexOf(item) === index;
 //     })
 //     return res;
 // }

 // sort()
 function unique(array) {
     return array.concat().sort().filter(function(item, index, array){
         return !index || item !== array[index - 1]
     })
 }
 console.log(unique(array));//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

七.Object 键值对 去除值相同的

这种方法是利用一个空的 Object 对象，我们把数组的值存成 Object 的 key 值，比如 Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。示例代码如

 var array = [1, 2, 1, 1, '1'];

 function unique(array) {
     var obj = {};
     return array.filter(function(item, index, array){
         return obj.hasOwnProperty(item) ? false : (obj[item] = true)
     })
 }

 console.log(unique(array)); // [1, 2]

我们可以发现，这是有问题的，因为 1 和 ‘1’ 是不同的，但是这种方法会判断为同一个值，这是因为对象的键值只能是字符串，所以我们可以使用 typeof item + item 拼成字符串作为 key 值来避免这个问题：

var array = [1, 2, 1, 1, '1'];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}

console.log(unique(array)); // [1, 2, "1"]

去重相同对象：
使用 JSON.stringify 将对象序列化：

var array = [{value: 1}, {value: 1}, {value: 2}];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        console.log(typeof item + JSON.stringify(item))
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
    })
}

console.log(unique(array)); // [{value: 1}, {value: 2}]

以上便是常用的数组去重方法

交流群 626319356

我作为一个小白，因为个人兴趣自学前端 后端。在学习的道路上独自一人前行，没啥钱也没报啥班，所以想要有共同理想的道友让我们互帮互助，共同成长。
建群目的：
各种学习资料共享
各种学习导图共享
如何学习前端 后端 指点 少走弯路
遇到问题 互相解决 吸取经验
声明
因为自己是个菜鸡 大三非计算机专业 对应专业知识比较薄弱
所以这个群的主要目的是互相成长
如果有大佬愿意帮助我们
我在此表示感谢
欢迎各位道友加入