JavaScript 数组对象删除某些元素

最新推荐文章于 2025-05-22 18:57:09 发布
最新推荐文章于 2025-05-22 18:57:09 发布
阅读量4k 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： javascript 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaochao123go/article/details/108823739
本文介绍了一种在JavaScript中从数组对象中删除指定元素的有效方法。通过使用filter方法结合map和includes方法，可以轻松地从源数组中移除匹配特定条件的所有元素。提供了一个具体的示例来展示这一过程。

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

实际开发中，总是会遇到数组对象中，删除指定的元素对象，以下示例是我在开发中使用的的删除的方法，仅供参考

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数组对象删除元素对象</title>
  </head>

  <body>
    <script>
      // 1、从数组中删除某些元素
      let array = [
        {
          INSTU_CDE: '0000',
          ORG_NAME: '北区分行',
          LEVELUNIT: '2',
          APP_ID: '62',
          SUPERUNITID: '500',
          UNITSEQ: '500,002',
          ID: '002',
          UNITNAME: '北区分行',
          UNITID: '002',
          ISLEAF: false,
        },
        {
          INSTU_CDE: '0000',
          ORG_NAME: '东区分行',
          LEVELUNIT: '2',
          APP_ID: '62',
          SUPERUNITID: '500',
          UNITSEQ: '500,003',
          ID: '003',
          UNITNAME: '东区分行',
          UNITID: '003',
          ISLEAF: false,
        },
        {
          INSTU_CDE: '0000',
          ORG_NAME: '南区分行',
          LEVELUNIT: '2',
          APP_ID: '62',
          SUPERUNITID: '500',
          UNITSEQ: '500,004',
          ID: '004',
          UNITNAME: '南区分行',
          UNITID: '004',
          ISLEAF: false,
        },
        {
          INSTU_CDE: '0000',
          ORG_NAME: '北京分行',
          LEVELUNIT: '2',
          APP_ID: '62',
          SUPERUNITID: '500',
          UNITSEQ: '500,005',
          ID: '005',
          UNITNAME: '北京分行',
          UNITID: '005',
          ISLEAF: false,
        },
        {
          INSTU_CDE: '0000',
          ORG_NAME: '天津分行',
          LEVELUNIT: '2',
          APP_ID: '62',
          SUPERUNITID: '500',
          UNITSEQ: '500,006',
          ID: '006',
          UNITNAME: '天津分行',
          UNITID: '006',
          ISLEAF: false,
        },
        {
          INSTU_CDE: '0000',
          ORG_NAME: '海南银行',
          LEVELUNIT: '2',
          APP_ID: '62',
          SUPERUNITID: '500',
          UNITSEQ: '500,100001',
          ID: '100001',
          UNITNAME: '海南银行',
          UNITID: '100001',
          ISLEAF: false,
        },
        {
          INSTU_CDE: '0000',
          ORG_NAME: '北京分公司',
          LEVELUNIT: '2',
          APP_ID: '62',
          SUPERUNITID: '500',
          UNITSEQ: '500,800',
          ID: '800',
          UNITNAME: '北京分公司',
          UNITID: '800',
          ISLEAF: false,
        },
        {
          INSTU_CDE: '0000',
          ORG_NAME: '上海分公司',
          LEVELUNIT: '2',
          APP_ID: '62',
          SUPERUNITID: '500',
          UNITSEQ: '500,900',
          ID: '900',
          UNITNAME: '上海分公司',
          UNITID: '900',
          ISLEAF: false,
        },
        {
          INSTU_CDE: '0000',
          ORG_NAME: '三亚分行',
          LEVELUNIT: '3',
          APP_ID: '62',
          SUPERUNITID: '100001',
          UNITSEQ: '500,100001,100002',
          ID: '100002',
          UNITNAME: '三亚分行',
          UNITID: '100002',
          ISLEAF: true,
        },
      ];
      let splitArr = [
        {
          INSTU_CDE: '0000',
          ORG_NAME: '南区分行',
          LEVELUNIT: '2',
          APP_ID: '62',
          SUPERUNITID: '500',
          UNITSEQ: '500,004',
          ID: '004',
          UNITNAME: '南区分行',
          UNITID: '004',
          ISLEAF: false,
        },
        {
          INSTU_CDE: '0000',
          ORG_NAME: '北京分行',
          LEVELUNIT: '2',
          APP_ID: '62',
          SUPERUNITID: '500',
          UNITSEQ: '500,005',
          ID: '005',
          UNITNAME: '北京分行',
          UNITID: '005',
          ISLEAF: false,
        },
      ];
      console.log('原始数组对象', array);
      // 输出 --------> 原始数组对象 [{"INSTU_CDE":"0000","ORG_NAME":"北区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,002","ID":"002","UNITNAME":"北区分行","UNITID":"002","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"东区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,003","ID":"003","UNITNAME":"东区分行","UNITID":"003","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"南区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,004","ID":"004","UNITNAME":"南区分行","UNITID":"004","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"北京分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,005","ID":"005","UNITNAME":"北京分行","UNITID":"005","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"天津分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,006","ID":"006","UNITNAME":"天津分行","UNITID":"006","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"海南银行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,100001","ID":"100001","UNITNAME":"海南银行","UNITID":"100001","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"北京分公司","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,800","ID":"800","UNITNAME":"北京分公司","UNITID":"800","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"上海分公司","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,900","ID":"900","UNITNAME":"上海分公司","UNITID":"900","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"三亚分行","LEVELUNIT":"3","APP_ID":"62","SUPERUNITID":"100001","UNITSEQ":"500,100001,100002","ID":"100002","UNITNAME":"三亚分行","UNITID":"100002","ISLEAF":true}]
      console.log('被删除数组对象', splitArr);
      // 输出 ---------> 被删除数组对象 [{"INSTU_CDE":"0000","ORG_NAME":"南区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,004","ID":"004","UNITNAME":"南区分行","UNITID":"004","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"北京分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,005","ID":"005","UNITNAME":"北京分行","UNITID":"005","ISLEAF":false}]

      // 从array中删除 splitArr
      const newArray = [];
      newarray = array.filter(arrItem => {
        // 找到 被删除数组对象中 的主键 ，此处是 ID
        const splitArrList = splitArr.map(splitArrItem => {
          return splitArrItem['ID'];
        });
        return !splitArrList.includes(arrItem['ID']);
      });
      console.log('删除后数组对象', newarray);
      // 输出 -----------> 删除后数组对象 [{"INSTU_CDE":"0000","ORG_NAME":"北区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,002","ID":"002","UNITNAME":"北区分行","UNITID":"002","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"东区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,003","ID":"003","UNITNAME":"东区分行","UNITID":"003","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"天津分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,006","ID":"006","UNITNAME":"天津分行","UNITID":"006","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"海南银行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,100001","ID":"100001","UNITNAME":"海南银行","UNITID":"100001","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"北京分公司","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,800","ID":"800","UNITNAME":"北京分公司","UNITID":"800","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"上海分公司","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,900","ID":"900","UNITNAME":"上海分公司","UNITID":"900","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"三亚分行","LEVELUNIT":"3","APP_ID":"62","SUPERUNITID":"100001","UNITSEQ":"500,100001,100002","ID":"100002","UNITNAME":"三亚分行","UNITID":"100002","ISLEAF":true}]
    </script>

    <script>
      var a = [
        {
          id: 1,
          name: 'hong',
        },
        {
          id: 2,
          name: 'huang',
        },
        {
          id: 3,
          name: 'lan',
        },
      ];

      var b = [
        {
          id: 1,
          name: 'hong',
        },
        {
          id: 2,
          name: 'lan',
        },
        {
          id: 4,
          name: 'lv',
        },
      ];

      b.forEach(item => {
        a = a.filter(a => a.id != item.id);
      });
      console.log(JSON.stringify(a));
      // [{"id":3,"name":"lan"}]
    </script>
  </body>
</html>

可以直接复制运行代码，查看打印结果

如何从 JavaScript 对象中移除属性？
Jerry学长
05-27 803
在 JavaScript 中，移除对象中的属性是一项常见的操作。本文将详细介绍如何使用delete操作符以及其他相关方法。
js删除数组里的某个元素
说：/~不了的专栏
01-20 4084
转载来自：http://caibaojian.com/js-splice-element.html 删除数组指定的某个元素 首先可以给JS的数组对象定义一个函数，用于查找指定的元素在数组中的位置，即索引，代码为： Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (
js移除对象元素
xue2xue的博客
03-25 8215
for(var key in data){ delete data[key]; } for(var i=0;i<data.length;i++){ delete data[i]["name"]; }
JavaScript中从原数组中删除某个元素
最新发布
BillKu的博客
05-22 548
使用indexOf找到元素索引，再用splice。
js移除对象数组中指定（与要求匹配）元素
weixin_43242112的博客
08-29 4125
1.给定数组如下： let objArr = [ { id:1, name:'令狐冲' }, { id:2, name:'东方不败' }, { id:3, name:'任盈盈' }, ]; 想要删除id为2的元素，首先通过findIndex找到该元素的索引： l.
JS删除数组（对象数组）中的指定元素
热门推荐
weixin_52102740的博客
10-06 1万+
JS删除数组中的指定元素
js 删除对象数组中指定元素
qq_29236119的博客
04-07 7654
操作对象数组中指定条件的元素： 例： let arr = [{ createDate: "2021-03-20", id: 1 }, { createDate: "2021-03-21", id: 2 }, { createDate: "2021-03-22", id: 3 }, { createDate: "2021-03-23", id: 4 }, { createDate: "2021-03-24", id: 5 }, { createDate: "2021
javascript数组元素删除方法delete和splice解析
10-15
在JavaScript中，数组是动态的数据结构，提供了多种方法来操作其元素。特别是当需要从数组中删除元素时，我们可以使用`delete`操作符和`splice`方法。尽管两者都可以移除数组中的元素，但它们在处理方式上存在显著...
js数组相减简单示例【删除a数组所有与b数组相同元素】
10-15
扩展阅读中提及的专题，例如《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》等，为读者提供了更多的学习资源。通过这些资源，读者可以更加全面地掌握JavaScript中数组操作的多种技巧和方法，从而...
JavaScript 中有关数组对象的方法(详解)
11-24
JavaScript的数组对象提供了丰富的内置方法，方便我们对数组进行操作。以下是对这些方法的详细解释： 1. **数组元素的添加**： - `push()`：将一个或多个新元素添加到数组末尾，并返回数组的新长度。 - `unshift...
javascript删除数组元素的七个方法示例
10-16
JavaScript数组的灵活性意味着它既能够提供丰富的解决方案，也可能在某些情况下让人难以掌握。为了更好地控制这种灵活性，理解如何操作数组变得至关重要。 第一个方法是利用length属性。在JavaScript中，数组的...
javascript 删除数组元素和清空数组的简单方法
12-07
本篇文章将详细介绍如何使用JavaScript删除数组元素以及清空数组的几种方法。 1. **清空数组** 清空数组最简单的方法是使用`splice()`方法。例如： ```javascript var ary = [1, 2, 3, 4]; ary.splice(0, ary....
js 对象 去除空元素
小考拉的博客
12-08 1425
let arr = {a:1,b:'',c:3,d:1,e:null}; Object.keys(arr).map((item)=>{ if(arr[item] == '' || arr[item] == null){ delete arr[item] } }); console.log(arr) // {a:1,c:3,d:1}
2023-JavaScript-js-删除数组（对象数组）中的指定元素
itwangyang520的博客
01-10 1377
以下列举的方法，基本能够满足内元素的删除，如果是多层嵌套的数组，也可使用，在该方法上循坏使用。
js删除对象中的元素
桃花岛主的博客
12-02 5990
采用delete方法删除掉这两个元素
删除JavaScript对象中的元素
weixin_30510153的博客
05-24 913
参考http://stackoverflow.com/questions/208105/how-to-remove-a-property-from-a-javascript-object 通过dojo收集表单数据如下： 想删除data对象中的nsnId属性。 直接添加代码delete data["equipFailureInput.nsnId"]即可。 PS:如果操作delete...
删除JS 对象属性（子元素）
AinUser的博客
02-26 1875
js删除对象子元素 //数据：Object { id: 1, name: "ainusers", age: "18" } delete a.age; //输出：Object { id: 1, name: "ainusers" }
js删除元素对象或其内容（div、ulli、img、input等）
那些年的代码
09-09 8768
　　在Web前端设计过程中，用js删除元素对象经常会用到。例如某一个页面在加载完成时显示一条新闻，这条新闻只显示一次且仅显示一小段时间，则显示完后就需要把它删除或隐藏。 　　在 javascript 中，删除元素其实是移除元素，用 removeChild() 方法，元素不能自己删除自己，所以只能用其父元素将其删除，所以用移除孩子的方法。无论用js删除页面级元素div，还是删除列表级元素 ulli...
【笔记】js 移除对象数组中指定元素
程序边界
05-08 1689
arr.splice(arr.findIndex(i => i.id === id), 1); 水。。。over
JavaScript数组对象深度解析与高效操作方法
JavaScript中的数组对象小结 在JavaScript编程中，数组是一种至关重要的数据结构，尽管它不像其他语言那样直接提供固定大小的、连续内存分配的数组，但通过将数组视为对象来实现。JavaScript的Array对象实际上是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值