JS實(shí)現(xiàn)數(shù)組/對象數(shù)組刪除其中某一項(xiàng)
數(shù)組/對象數(shù)組刪除其中某一項(xiàng)
由于日常工作中經(jīng)常需要對數(shù)組進(jìn)行操作,最經(jīng)常使用到的就是對數(shù)組進(jìn)行的刪除操作
對于我們前端來說,數(shù)組有兩種區(qū)別
- 1、var arr = [ 'aaa' , 'bbb' , 'ccc' , ' ddd' , 'eee' ] 這種暫且稱之為純數(shù)組
- 2、var jsonArr = [ { name: 'cz' , age: '25'} , { name: 'mp' , age: '18'} , { name:'lyy' , age: '18' } ] 這種暫且稱之為對象數(shù)組
首先,我們要刪除數(shù)組中的某一項(xiàng),我們一定要知道下邊三種條件中的其中一種,才能達(dá)到精確刪除的目的
1、知道要刪除項(xiàng)在數(shù)組中的下標(biāo)
2、知道要刪除項(xiàng)的值
3、如果要刪除項(xiàng)是一個對象,而且我們知道這個對象中的唯一屬性值
//1、知道要刪除項(xiàng)的下標(biāo)值 //index為刪除項(xiàng)的下標(biāo)值 ?arr為源數(shù)組 var arrRemoveIndex = function(index,arr) { ? ? if (!arr || arr.length == 0) { ? ? ? ? return "" ? ? } ? ? arr.splice(index,1) ? ? return arr } ? //2、知道要刪除項(xiàng)的值 //it 為要刪除項(xiàng)的值 ?arr為源數(shù)組 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、如果要刪除項(xiàng)為對象,我們需要知道該對象屬性中的唯一值(不會重復(fù)的值) //arr是源數(shù)組,attr是目標(biāo)數(shù)組中的屬性名稱,value是要刪除的屬性名稱對應(yīng)的值 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'}]
以上可以放到工具類,方便反復(fù)調(diào)用。
移除對象數(shù)組中指定元素
arr.splice(arr.findIndex(i => i.id === id), 1);
這些僅為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Three.js實(shí)現(xiàn)3D乒乓球小游戲(物理效果)
本文將使用React Three Fiber 和 Cannon.js 來實(shí)現(xiàn)一個具有物理特性的乒乓球小游戲,使用 React Three Fiber 搭建基礎(chǔ)三維場景、如何使用新技術(shù)棧給場景中對象的添加物理特性等,最后利用上述知識點(diǎn),將開發(fā)一個簡單的乒乓球小游戲,需要的朋友可以參考下2023-03-03淺析script標(biāo)簽中的defer與async屬性
最近在網(wǎng)上看到一個前輩在寫script標(biāo)簽的時候,居然同時寫了async和defer屬性,想著這是什么意思呢?所以決定深入的了解下這其中的學(xué)問,以下這篇文章就是個人在學(xué)習(xí)了之后的一些總結(jié)分析,有需要的朋友們可以參考借鑒,下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11Javascript的setTimeout()使用閉包特性時需要注意的問題
這篇文章主要介紹了Javascript的setTimeout(0)使用閉包特性時需要注意的問題,需要的朋友可以參考下2014-09-09JS中‘hello’與new String(‘hello’)引出的問題詳解
這篇文章主要給大家介紹了關(guān)于JS中'hello'與new String('hello')引出的問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08javascript搜索框點(diǎn)擊文字消失失焦時文本出現(xiàn)
這篇文章主要介紹了javascript實(shí)現(xiàn)搜索框點(diǎn)擊文字消失失焦時文本出現(xiàn)的效果,示例代碼如下,大家可以看看2014-09-09