一个对象组成的数组中删除另一个数组存在的对象

最新推荐文章于 2024-03-22 11:48:11 发布

夜空下的微笑

最新推荐文章于 2024-03-22 11:48:11 发布

阅读量957

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_41014370/article/details/103066992

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用JavaScript的every和filter方法实现从一个对象数组中批量删除特定元素的技巧，同时提供了一个使用for循环和splice方法的替代方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由对象组成的数组对照删除
一个表格，类似于下图，选中以后，做成纯前端批量删除

在这里插入图片描述

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循环和深拷贝或浅拷贝的问题。