JS實(shí)現(xiàn)數(shù)組/對(duì)象數(shù)組刪除其中某一項(xiàng)
更新時(shí)間：2022年09月01日 11:33:47 作者：NAMECZ
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組/對(duì)象數(shù)組刪除其中某一項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
數(shù)組/對(duì)象數(shù)組刪除其中某一項(xiàng)
由于日常工作中經(jīng)常需要對(duì)數(shù)組進(jìn)行操作，最經(jīng)常使用到的就是對(duì)數(shù)組進(jìn)行的刪除操作
對(duì)于我們前端來(lái)說(shuō)，數(shù)組有兩種區(qū)別
- 1、var arr = [ 'aaa' , 'bbb' , 'ccc' , ' ddd' , 'eee' ] 這種暫且稱(chēng)之為純數(shù)組
- 2、var jsonArr = [ { name: 'cz' , age: '25'} , { name: 'mp' , age: '18'} , { name:'lyy' , age: '18' } ] 這種暫且稱(chēng)之為對(duì)象數(shù)組
首先，我們要?jiǎng)h除數(shù)組中的某一項(xiàng)，我們一定要知道下邊三種條件中的其中一種，才能達(dá)到精確刪除的目的
1、知道要?jiǎng)h除項(xiàng)在數(shù)組中的下標(biāo)
2、知道要?jiǎng)h除項(xiàng)的值
3、如果要?jiǎng)h除項(xiàng)是一個(gè)對(duì)象，而且我們知道這個(gè)對(duì)象中的唯一屬性值
//1、知道要?jiǎng)h除項(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、知道要?jiǎng)h除項(xiàng)的值
//it 為要?jiǎng)h除項(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、如果要?jiǎng)h除項(xiàng)為對(duì)象，我們需要知道該對(duì)象屬性中的唯一值（不會(huì)重復(fù)的值）
//arr是源數(shù)組，attr是目標(biāo)數(shù)組中的屬性名稱(chēng)，value是要?jiǎng)h除的屬性名稱(chēng)對(duì)應(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'}]以上可以放到工具類(lèi)，方便反復(fù)調(diào)用。
移除對(duì)象數(shù)組中指定元素
arr.splice(arr.findIndex(i => i.id === id), 1);
這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Three.js實(shí)現(xiàn)3D乒乓球小游戲(物理效果)
本文將使用React Three Fiber 和 Cannon.js 來(lái)實(shí)現(xiàn)一個(gè)具有物理特性的乒乓球小游戲，使用 React Three Fiber 搭建基礎(chǔ)三維場(chǎng)景、如何使用新技術(shù)棧給場(chǎng)景中對(duì)象的添加物理特性等，最后利用上述知識(shí)點(diǎn)，將開(kāi)發(fā)一個(gè)簡(jiǎn)單的乒乓球小游戲,需要的朋友可以參考下2023-03-03
淺析script標(biāo)簽中的defer與async屬性
最近在網(wǎng)上看到一個(gè)前輩在寫(xiě)script標(biāo)簽的時(shí)候，居然同時(shí)寫(xiě)了async和defer屬性，想著這是什么意思呢？所以決定深入的了解下這其中的學(xué)問(wèn)，以下這篇文章就是個(gè)人在學(xué)習(xí)了之后的一些總結(jié)分析，有需要的朋友們可以參考借鑒，下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11![解決FireFox下[使用event很麻煩]的問(wèn)題](http://img.jbzj.com/images/xgimg/bcimg2.png)
解決FireFox下[使用event很麻煩]的問(wèn)題
解決FireFox下[使用event很麻煩]的問(wèn)題...2006-11-11
Javascript的setTimeout()使用閉包特性時(shí)需要注意的問(wèn)題
這篇文章主要介紹了Javascript的setTimeout(0)使用閉包特性時(shí)需要注意的問(wèn)題,需要的朋友可以參考下2014-09-09
js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法
這篇文章主要介紹了js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法,通過(guò)js的window.requestAnimationFrame來(lái)解決這一問(wèn)題,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10
JS中‘hello’與new String(‘hello’)引出的問(wèn)題詳解
這篇文章主要給大家介紹了關(guān)于JS中'hello'與new String('hello')引出的問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
JavaScript 轉(zhuǎn)碼是指將 JavaScript 代碼從一種編碼方式轉(zhuǎn)換為另一種編碼方式,常見(jiàn)的轉(zhuǎn)碼方式包括 URL 編碼和 Base64 編碼,解碼是前端比較常見(jiàn)的一種操作,本文就給大家講講JavaScript轉(zhuǎn)碼方式2023-09-09
這篇文章主要介紹了 jstree單選功能的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-06-06
javascript搜索框點(diǎn)擊文字消失失焦時(shí)文本出現(xiàn)
這篇文章主要介紹了javascript實(shí)現(xiàn)搜索框點(diǎn)擊文字消失失焦時(shí)文本出現(xiàn)的效果，示例代碼如下，大家可以看看2014-09-09
swiper移動(dòng)端輪播插件（觸碰圖片之后停止輪播）
這篇文章主要為大家詳細(xì)介紹了swiper移動(dòng)端輪播插件，觸碰圖片之后停止輪播，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12