JS实现数组/对象数组删除其中某一项

作者:NAMECZ 时间:2024-04-29 13:36:37 

数组/对象数组删除其中某一项

由于日常工作中经常需要对数组进行操作,最经常使用到的就是对数组进行的删除操作

对于我们前端来说,数组有两种区别

  • 1、var arr = [ 'aaa' , 'bbb' , 'ccc' , ' ddd' , 'eee' ]  这种暂且称之为纯数组

  • 2、var jsonArr =  [ { name: 'cz' , age: '25'} , { name: 'mp' , age: '18'} , { name:'lyy' , age: '18' } ] 这种暂且称之为对象数组

首先,我们要删除数组中的某一项,我们一定要知道下边三种条件中的其中一种,才能达到精确删除的目的

1、知道要删除项在数组中的下标

2、知道要删除项的值

3、如果要删除项是一个对象,而且我们知道这个对象中的唯一属性值

//1、知道要删除项的下标值
//index为删除项的下标值  arr为源数组
var arrRemoveIndex = function(index,arr) {
    if (!arr || arr.length == 0) {
        return ""
    }
    arr.splice(index,1)
    return arr
}
 
//2、知道要删除项的值
//it 为要删除项的值  arr为源数组
var arrRemove = function (it, arr) {
    if (!arr || arr.length == 0) {
        return ""
    }
    let flag = arr.indexOf(it)
    if (flag > -1) {
        arr.splice(flag, 1)
        return arr
    } else {
        console.log("未查找到该元素")
    }
}
 
//3、如果要删除项为对象,我们需要知道该对象属性中的唯一值(不会重复的值)
//arr是源数组,attr是目标数组中的属性名称,value是要删除的属性名称对应的值
var arrRemoveJson = function (arr, attr, value) {
  if (!arr || arr.length == 0) {
    return ""
  }
  let newArr = arr.filter(function (item, index) {
    return item[attr] != value
  })
  return newArr
}
 
let arr = ['aaa','bbb','ccc','ddd']
let arrJson = [{ id: 1 , name: 'cz'},{ id: 2 , name: 'mp'},{ id: 3 , name: 'xp'}];
let newArr1 = arrRemoveIndex(1,arr);  // ['aaa','ccc','ddd']
let newArr2 = arrRemove('bbb',arr);   // ['aaa','ccc','ddd']
let newArr3 = arrRemoveJson(arr,'id','2') //[{id:1,name:'cz'},{id:3,name:'xp'}]

以上可以放到工具类,方便反复调用。 

移除对象数组中指定元素

arr.splice(arr.findIndex(i => i.id === id), 1);

这些仅为个人经验,希望能给大家一个参考,也希望大家多多支持asp之家。 

来源:https://blog.csdn.net/NAMECZ/article/details/105090186

标签:JS,数组,对象数组,某一项
0
投稿

猜你喜欢

  • JDBC连接MySQL数据库关键的四个步骤

    2009-12-17 12:06:00
  • 修改MySQL的数据库引擎为INNODB的方法

    2024-01-13 08:13:43
  • 解决Django中多条件查询的问题

    2021-10-10 07:32:16
  • Explain命令在优化查询中的实际应用

    2024-01-20 03:54:13
  • Go语言中反射的正确使用

    2024-02-01 16:31:57
  • 用python写个博客迁移工具

    2023-06-09 05:13:14
  • Python模块相关知识点小结

    2022-04-12 06:58:23
  • Python迭代器iterator生成器generator使用解析

    2023-11-17 18:50:24
  • 在Pytorch中使用Mask R-CNN进行实例分割操作

    2023-05-18 21:41:22
  • MySQL与SQLserver的差异对比

    2024-01-24 18:49:48
  • Python使用psutil对系统数据进行采集监控

    2023-03-13 07:21:19
  • Python探索之pLSA实现代码

    2022-01-03 11:30:28
  • keras自定义回调函数查看训练的loss和accuracy方式

    2021-01-11 18:13:09
  • HTML 5 胜出:XHTML2 宣告夭折

    2009-07-12 15:23:00
  • 一次性压缩Sqlserver2005中所有库日志的存储过程

    2024-01-28 13:40:13
  • Python中Permission denied的解决方案

    2023-11-09 18:42:24
  • python中的内置函数max()和min()及mas()函数的高级用法

    2023-01-21 18:45:43
  • 如何更改mysql命令下提示信息

    2010-10-25 19:48:00
  • python求最大公约数和最小公倍数的简单方法

    2022-08-31 22:05:45
  • vue-router命名路由和编程式路由传参讲解

    2024-05-02 17:03:39
  • asp之家 网络编程 m.aspxhome.com