JavaScript——不同类型数组去重(简单数组去重、对象数组去重)

1. 简单数组去重

1.1 new Set() 去重

• MDN中对于Set的释义：Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。
• 执行Set后返回的是一个Set结构，是类数组

1.1.1 Array.from 将类数组转换成数组

• 因为Set结构不是数组，我们可以通过Array.from()的形式将其转换成数组

实例一： Set + Array.from去重

let normalArr = [1,2,3,4,5,3,4,4,'a','b','f','a'];
let setArr = Array.from(new Set(normalArr))
console.log(setArr);   // [1, 2, 3, 4, 5, "a", "b", "f"]

1.1.2 扩展运算符…

• MDN中对于扩展运算符释义：展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。
• 我对于扩展运算符的理解，设置某种格式，扩展运算符会将数据转换成我们想要的格式。

let normalArr = [1,2,3,4,5,3,4,4,'a','b','f','a'];
let setArr = [...new Set(normalArr)]
console.log(setArr)    // [1, 2, 3, 4, 5, "a", "b", "f"]

1.2 indexOf+forEach去重

• MDN中对于indexOf的释义：indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
• 所以我们在数组去重时，原数组myArr，去重后数据所在数组setArr,我们循环原数组，其中每一项判断是否在setArr中，若indexOf返回为-1，则表示去重后的数组中没有这个元素，就将这个元素加入到去重后的数组，否则证明去重后数组中存在该元素，无需进行操作

       const myArr = [1,2,3,5,2,2,5,6,7,'a','g','c','g'];
            let setArr = []
            myArr.forEach((v)=>{
                if(setArr.indexOf(v) === -1){
                    setArr.push(v)
                }
            })
            console.log(setArr)   //  [1, 2, 3, 5, 6, 7, "a", "g", "c"] 

1.3 lodash去重

lodash CDN引用等相关资料可查看

      const arr = [5,2,3,4,1,2,3,5,'a','c','b','d','a','b']
      const solveArr = _.uniq(arr)
      console.log(solveArr)  // [5, 2, 3, 4, 1, "a", "c", "b", "d"]

2. 对象数组去重

2.1 reduce根据对象数组中某个属性进行去重

• MDN中对于reduce的释义：reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

2.1.1 reduce求和

        const arr = [1,2,3,4,5,6];
        const res = arr.reduce((a,b,c)=>{
            // a总和 b当前值 c 索引值
            console.log(a,b,c)
            return a+b+c
        },0); // 这个位置0，表示加法求和，若为''，是字符串拼接

2.2.2 reduce去重

• 回到正题，开始去重

        const arr = [
            {
                name:"Ably",
                age:20
            },
            { // 与第一个元素 age 字段值相同
                name:"Wang",
                age:20
            },
            { // 与第一个元素 name 字段值相同
                name:"Ably",
                age:21
            },
            { // 与第一个元素完全相同
                name:"Ably",
                age:20
            },
        ];
        let tempObj = {};  // 这是一个对象
        const res = arr.reduce((returnVal,currentVal)=>{
            // 观察同一属性的值，并放入对象中，若对象中存在该值，则表明重复不进行处理，若对象中不存在该值，表示新值，需要存进去
            console.log(tempObj)  // 所有存在的值放入这个对象当中

            if(!tempObj[currentVal.name]){
                tempObj[currentVal.name] = true; // 若文中Ably的值为true，表示这个值存在，不会走里面的push方法
                returnVal.push(currentVal);
            }
            // a总和，也就是每一次处理后的返回结果 b当前值 c 索引值
            return returnVal
        },[]);
        console.log(res,"返回结果") 

• 上述的方法是围绕对象数组中某个属性进行去重，如果想要将对象数组中整个对象来进行去重的话，我们可以这样做：

2.2 对象中所有属性值相同进行去重

2.2.1 Set + JSON.stringify + JSON.parse

• new Set() + Array.from 实现去重
• JSON.stringify 将对象转换成字符串形式
• JSON.parse 将字符串转换成对象形式
• 我们可以通过将数组遍历，将其中的对象转成string类型，通过Set方式进行去重后转成数组，再将数组中每一项转成对象

        const arr = [
            {
                name:"Ably",
                age:20
            },
            { // 与第一个元素 age 字段值相同
                name:"Wang",
                age:20
            },
            { // 与第一个元素 name 字段值相同
                name:"Ably",
                age:21
            },
            { // 与第一个元素完全相同
                name:"Ably",
                age:20
            },
        ];
        const strItemArr = arr.map((v)=>{
            return JSON.stringify(v)
        })
        const sortArr = Array.from(new Set(strItemArr))
        const finalArr = sortArr.map((v)=>{
            return JSON.parse(v)
        })
        console.log(finalArr)

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~