javascript 三种常用简单的数组去重方法

javascript 三种常用简单的数组去重方法

第一种

• 使用对象key值唯一的特性实现数组去重
  先看一个对象

       let testObj1 = {
           name:'康家豪',
           age:18,
           high:1.88,
           home:'xiyounet'
       }

       let testObj2 = {
           name:'灰太狼',
           home:'狼堡',
           wife:'红太狼'
       }

    //如果对象key值不唯一的话我们将两个对象合并起来，得到的对象应该有8个属性
    let finalObj = Object.assign({},testObj1,testObj2);
    console.log(finalObj)  
    //{name: "灰太狼", age: 18, high: 1.88, home: "狼堡", wife: "红太狼"}

    //由此可见后面复制的同属性名会覆盖之前的，也就是说同一个属性名只能出来一次

{
    //提供一个具有数字，字符串，布尔值，undefined，null类型以及对象类型
    let arrList = [1,1,'name','name',true,true,undefined,undefined,null,null,NaN,NaN,{},{}]
    function noRepeatArr (arr){
        let obj = {};
        let finalArray = [];

        for(let i in arr){
            if(obj[arr[i]] == undefined){
                //如果对象没有这个属性名的话,就给这个属性赋值，并且将它push进新数组
                obj[arr[i]] = 1;
                finalArray.push(arr[i])
            }
        }
        return finalArray;
    }
    console.log("————————数组去重前————————")
    console.log(arrList);
    //(14) [1, 1, "name", "name", true, true, undefined, undefined, null, null, NaN, NaN, {…}, {…}]
    
    console.log("————————数组去重后————————")
    console.log(noRepeatArr(arrList))
    //(7) [1, "name", true, undefined, null, NaN, {…}]
}

利用对象的key值唯一的属性，实现数组去重比较全面。

第二种

• 使用includes（）实现数组去重

{
    //提供一个具有数字，字符串，布尔值，undefined，null类型以及对象类型
    let arrList = [1,1,'name','name',true,true,undefined,undefined,null,null,NaN,NaN,{},{}]
    function noRepeatArr2(arr){
        let finalArray = [];
        for(let i in arr){
            //如果新的数组不包括这个元素的话，就将他push进新的数组
            if(!finalArray.includes(arr[i])){
                finalArray.push(arr[i])
            }
        }
        return finalArray;
    }
    console.log("————————数组去重前————————")
    console.log(arrList);
    //(14) [1, 1, "name", "name", true, true, undefined, undefined, null, null, NaN, NaN, {…}, {…}]

    console.log("————————数组去重后————————")
    console.log(noRepeatArr2(arrList))
    //(8) [1, "name", true, undefined, null, NaN, {…}, {…}]
    //这种方法,不能去除重复的对象
}

这个方法没啥好说的，大家肯定可以理解，就是注意同一个对象不能实现去重。

第三种

• 使用ES6提供的特别给力的Set数据结构实现数组去重

先来解释一下Set数据结构，ES6推出set数据结构类似于数组，但是其中的值都是唯一的。
举个例子：

let set = new Set([1,1,2,3,4,3,4,2]);
        console.log(set);
        // Set(4) {1, 2, 3, 4}
        // 将set数据结构转换为数组可以直接使用Array.from()方法
        console.log(Array.from(set))
        //(4) [1, 2, 3, 4]

在set结构中，它对值的比较使用的是Same-value equality 类似于严格相等，但是认为NaN是等于NaN的，但是两个{}是不相等的。
这也就是我们这种方法可以实现NaN的去重不能实现相同对象的去重。

     // 举个例子
            let a = {};
            let b = {};
            let set = new Set()
            set.add(a).add(b);
            console.log(set.size);  //2
            console.log(set);//Set(2) {{…}, {…}}

去重代码

{
            //提供一个具有数字，字符串，布尔值，undefined，null类型以及对象类型
            let arrList = [1,1,'name','name',true,true,undefined,undefined,null,null,NaN,NaN,{},{}]

            function noRepeatArr3(arr){
                return Array.from(new Set(arr));
            }

            noRepeatArr3(arrList);
            console.log("————————数组去重前————————")
            console.log(arrList);
            //(14) [1, 1, "name", "name", true, true, undefined, undefined, null, null, NaN, NaN, {…}, {…}]

            console.log("————————数组去重后————————")
            console.log(noRepeatArr3(arrList))
            //(8) [1, "name", true, undefined, null, NaN, {…}, {…}]
        }

这是三种我比较喜欢的数组去重的方法，一般的话应该使用set数据结构是最为简单的，key值特征是最为安全保险的。