js对象数组去重

爱池鱼的酱酱仔

已于 2023-02-25 16:38:21 修改

阅读量342

点赞数

分类专栏： vue 文章标签： javascript 前端开发语言 Powered by 金山文档

于 2023-02-25 16:31:00 首次发布

本文链接：https://blog.csdn.net/weixin_53339757/article/details/129217175

版权

vue 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

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

两种方法对象数组去重：

方法①：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

去重后的效果

亲测使用案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象数组去重</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        ***原始对象数组数据：{{arrForm}}
        <div style="margin-top: 20px;">1.对象数组去重{{newArrayform}}</div>
        <div style="margin-top: 20px;">2.reduce对象数组去重{{reduceform}}</div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            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: [],
            reduceform: []
        },
        created() {
            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
            this.reduce() //方法二
        },
        methods: {
            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) => {
                    hash[next.age] ? '' : hash[next.age] = true && item.push(next);
                    return item;
                }, [])
                console.info('去重后的数组:', newArray);
                this.reduceform = newArray
            }
        },
    })
</script>

</html>