JS实现数组与对象数组的精准删除方法

作者:半夏时间:2026-10-25 19:30:46浏览:620

本文介绍JavaScript中两种常见数组类型——纯数组与对象数组的删除操作。根据已知条件(下标、值或唯一属性),分别演示了使用splice和findIndex进行精准删除的代码实现,旨在提供实用的前端开发参考。

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

在日常工作中,开发者经常需要对数组执行操作,其中删除操作尤为常见。

对于前端开发人员而言,数组主要可分为两种不同的类型。

  • 第一种是纯数组,例如:var arr = [ 'aaa' , 'bbb' , 'ccc' , ' ddd' , 'eee' ]。
  • 第二种是对象数组,例如:var jsonArr = [ { name: 'cz' , age: '25'} , { name: 'mp' , age: '18'} , { name:'lyy' , age: '18' } ]。

要实现数组中某一项的精确删除,必须掌握以下三种条件中的至少一种。

第一种情况:已知待删除项在数组中的下标。

第二种情况:已知待删除项的具体值。

第三种情况:若待删除项为对象,且已知该对象中的唯一属性值。

//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);

以上仅为个人经验分享,希望能为大家提供参考,也希望大家多多支持本站。

作者最新文章