js对象数组去重

对象数组去重是工作中常用到的一种场景

两种方法对象数组去重：

方法①：foreach遍历结合set去重方法

 arrForm: [{
                name: 'tom',
                age: 12,
                key: 1,
            }, {
                name: 'jurry',
                age: 10,
                key: 2,
            }, {
                name: 'jurry',
                age: 10,
                key: 2,
            }, {
                name: 'tom',
                age: 12,
                key: 1,
            }],
            newArrayform: [],
//方法一 forEach遍历对象数组，其次利用set（）函数去重
const arr = this.arrForm
            console.info('原始数组：', arr);
            const keyArr = [];
            arr.forEach((element, index) => {
                keyArr.push(element.key); // 通过key作为条件来判断
            });
            const newArr = [];
            const newKey = new Set(keyArr); // key去重
            newKey.forEach(item => {
                const index = keyArr.findIndex(item2 => item2 === item);
                newArr.push(arr[index]);
            })
            console.info('去重后的数组:', newArr);
            this.newArrayform = newArr

方法②：reduce()方法

  reduceform:[]
//方法二 reduce
const arr = [{
                    name: '张三',
                    age: 22,
                }, {
                    name: '李四',
                    age: 22,
                }, {
                    name: '赵武',
                    age: 26
                }, {
                    name: '王六',
                    age: 23,
                }, {
                    name: '李宏',
                    age: 25
                }, {
                    name: '赵四',
                    age: 23,
                }];
                console.info('原始数组：', arr);
                const hash = {};
                const newArray = arr.reduce((item, next) => {//age是条件
                    hash[next.age] ? '' : hash[next.age] = true && item.push(next);
                    return item;
                }, [])
                console.info('去重后的数组:', newArray);
                this.reduceform = newArray

去重后的效果

亲测使用案例

    
    
    
    
    



    

        ***原始对象数组数据：{{arrForm}}
        
1.对象数组去重{{newArrayform}}
        
2.reduce对象数组去重{{reduceform}}