数组过滤（元素为对象）

由对象组成的数组 对照删除

一个表格，类似于下图，选中以后，做成纯前端批量删除

在这里插入图片描述

数据源

arr2是全部的数据，arr1是勾选的数据

        let arr1 = [
          { code: "123456781",color: "芭比粉"},
          { code: "123456783",color: "芭比粉"},
          { code: "123456785",color: "芭比粉"}
        ];
        let arr2 = [
          { code: "123456781",color: "芭比粉"},
          { code: "123456782",color: "芭比粉"},
          { code: "123456783",color: "芭比粉"},
          { code: "123456784",color: "芭比粉"},
          { code: "123456785",color: "芭比粉"},
          { code: "123456786",color: "芭比粉"}
        ]

简单写法

        /*
        *       every方法，只要有一项不满足条件就返回false，也就是说必须每一项都得满足才能返回true。返回的是布尔值。
        *       filter方法，只要条件满足，我就将此元素返回出去，返回的是元素。
        *       在本示例中，只要arr1中存在与arr2中相同的元素，我就返回false。也就是说，我拿着arr2中
        *  的第一项去和arr1中的每一项去比较，如果code都不相等，满足所有条件，我就返回true。
        *       在filter中，只要条件为true，我就将这一项返回出去，就实现了批量删除的效果。
        */
        let arr3 = arr2.filter(item=>{
            return arr1.every(item2=>{
                return item.code != item2.code;
            })
        })
        
        console.log(arr1,'arr1');
        console.log(arr2,'arr2');
        console.log(arr3,'arr3');

在这里插入图片描述

for循环写法，因为arr2会改变，所以采用倒序的方法，也可以重新定义一个变量，来保存arr2，不过得是深拷贝才好。

        for(let i = arr2.length - 1; i >= 0; i--){
           for(let j = 0; j < arr1.length;j++){
               if(arr2[i].code == arr1[j].code){
                   arr2.splice(i,1);
               }
            }
         }
         console.log(arr1,'arr1');
         console.log(arr2,'arr2');

在这里插入图片描述

总结

一个是考察 every 和 filter 的用法，every 是必须所有项都满足条件才返回true，返回的是布尔值，filter 是返回满足条件的元素，返回的是元素。顺便说一下 some ，他和 every 相反，只要有一个满足条件，就返回true。另一个是for循环和深拷贝或浅拷贝的问题。