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);以上仅为个人经验分享,希望能为大家提供参考,也希望大家多多支持本站。
作者最新文章
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
