JS对象数组中重复对象的过滤

最新推荐文章于 2024-07-16 16:50:55 发布

原创最新推荐文章于 2024-07-16 16:50:55 发布 · 4.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用JavaScript处理对象数组，包括过滤掉重复对象和根据另一数组过滤数据的方法。示例代码展示了如何利用for循环和filter方法实现这两个功能，帮助理解数组操作技巧。

JS对象数组中重复对象的过滤

数组的过滤一般有两种需求：
1.对象数组中过滤掉重复的数据。
2.有两组数组，一组为a,一组为b，要求过滤掉a组中在b组出现的数据。

需求1（对象数组中过滤掉重复的数据）：

		let arr = [
            {"id":"1","name":"张三"},
            {"id":"2","name":"李四"},
            {"id":"1","name":"张三"}
        ];
        let newArr = [];
        let obj = {};
        for (let i = 0; i < arr.length; i++) {
            //将arr[i].id作为对象属性进行判断
            if (!obj[arr[i].id]){
                newArr.push(arr[i]);
                obj[arr[i].id] = true;
            }
        }
        //0: {id: "1", name: "张三"} 1: {id: "2", name: "李四"}
        console.log(newArr);

需求2（过滤掉a组中在b组出现的数据）：

		let arr = [
            {"id":"1","name":"张三"},
            {"id":"2","name":"李四"},
            {"id":"3","name":"赵五"}
        ];
        let brr = [
            {"id":"1","name":"张三"},
            {"id":"6","name":"站六"}
        ];
        /*filter,every的回调函数都有三个参数（value: T, index:number, arr: T[]）*/
        let newArr = arr.filter(function (item) {
            return brr.every(function (item1) {
                return item.id != item1.id;
            })
        })
        //0: {id: "2", name: "李四"} 1: {id: "3", name: "赵五"}
        console.log(newArr);

        //可以简化为如下：
        let newArr2 = arr.filter(item => brr.every(item1 => item.id != item1.id));
        //0: {id: "2", name: "李四"} 1: {id: "3", name: "赵五"}
        console.log(newArr2);

        //相当于如下：
        let newArr3 = [];
        for (let i=0; i<arr.length; i++){
            let flag = true;
            for (let j = 0; j < brr.length; j++) {
                if (arr[i].id == brr[j].id){
                    flag = false;
                    break;
                }
            }
            if (flag) newArr3.push(arr[i]);
        }
        //0: {id: "2", name: "李四"} 1: {id: "3", name: "赵五"}
        console.log(newArr3);