js判斷一個(gè)對(duì)象是否在一個(gè)對(duì)象數(shù)組中(場(chǎng)景分析)
場(chǎng)景:
有一個(gè)對(duì)象數(shù)組,如:
var arr = [{"appName":"小何","appId":"1"},{"appName":"小王","appId":"2"}]
一般來(lái)說(shuō),常見(jiàn)的場(chǎng)景有兩個(gè):
第一個(gè)是,比如鼠標(biāo)點(diǎn)擊按鈕,往數(shù)組里push()一個(gè)對(duì)象,如果數(shù)組中已經(jīng)存在了,那么就得提示不能添加。
第二個(gè)是,push()之后做去重處理,既對(duì)象數(shù)組去重。
第一個(gè)場(chǎng)景解法:如果數(shù)組中已經(jīng)存在,就不能添加
使用includes()方法,意為存在,存在返回true,不存在返回false,重點(diǎn)是要結(jié)合JSON.stringify()序列化為字符串后再判斷,以下是示例代碼:
var arr = [{"appName":"小何","appId":"1"},{"appName":"小王","appId":"2"}] var obj = {"appName":"小王","appId":"2"} //如果數(shù)組arr中不存在字符串JSON.stringify(obj),那就可以添加,反之,則不添加 if(JSON.stringify(arr).includes(JSON.stringify(obj)) === false){ console.log('不存在') arr.push(obj) }else{ console.log('已存在') }
小結(jié):
es6新增的includes()方法很強(qiáng)大,字符串,數(shù)組,對(duì)象均可使用,返回一個(gè)布爾值,比之前常用的indexof()語(yǔ)義化更強(qiáng),且includes()的性能不錯(cuò)!
第二個(gè)場(chǎng)景解法: 對(duì)象數(shù)組去重
我理解的對(duì)象數(shù)組去重是這樣的:
就是他們的屬性和值都得一樣,且他們的長(zhǎng)度也是一樣的。
也就是說(shuō),key和value都得一樣才行,而且不能多不能少。
試著手寫(xiě)了一下,嵌套了好幾層循環(huán),性能不好,直接一步到位,以下是我的最優(yōu)解:
lodash是前端常用的JS方法庫(kù),就是將很多方法封裝起來(lái),方便使用。
使用lodash的
_.uniqWith()方法,結(jié)合_.isEqual比較函數(shù),即可較為完美的解決問(wèn)題。
需要注意的是,_.isEqual()方法也是非常強(qiáng)大的,作用是比較兩個(gè)對(duì)象是否相等,這個(gè)方法非常實(shí)用,我經(jīng)常用它,他是深層遞歸的,推薦。
代碼示例:
var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }]; _.uniqWith(objects, _.isEqual); // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]
到此這篇關(guān)于js判斷一個(gè)對(duì)象是否在一個(gè)對(duì)象數(shù)組中的文章就介紹到這了,更多相關(guān)js判斷一個(gè)對(duì)象在一個(gè)對(duì)象數(shù)組中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
深入理解JavaScript系列(1) 編寫(xiě)高質(zhì)量JavaScript代碼的基本要點(diǎn)
才華橫溢的Stoyan Stefanov,在他寫(xiě)的由O’Reilly初版的新書(shū)《JavaScript Patterns》(JavaScript模式)中,我想要是為我們的讀者貢獻(xiàn)其摘要,那會(huì)是件很美妙的事情2012-01-01SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法
這篇文章主要介紹了SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法,較為詳細(xì)的分析了SWFUpload組件實(shí)現(xiàn)多文件上傳的原理、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-05-05微信小程序使用template標(biāo)簽實(shí)現(xiàn)五星評(píng)分功能
這篇文章主要為大家詳細(xì)介紹了微信小程序使用template標(biāo)簽實(shí)現(xiàn)五星評(píng)分功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11微信小程序?qū)W習(xí)筆記之本地?cái)?shù)據(jù)緩存功能詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之本地?cái)?shù)據(jù)緩存功能,結(jié)合實(shí)例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage針對(duì)數(shù)據(jù)緩存的存取、刪除等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03JS HTML5 音樂(lè)天氣播放器(Ajax獲取天氣信息)
寫(xiě)個(gè)播放器應(yīng)付復(fù)習(xí),因?yàn)锳jax涉及到跨域獲取天氣信息,有兩個(gè)版本,一個(gè)是直接跨域,IE10支持,其他的瀏覽器要改配置2013-05-05一個(gè)XML格式數(shù)據(jù)轉(zhuǎn)換為圖表的例子
這個(gè)例子使用的是轉(zhuǎn)換為VML的語(yǔ)法,換成其他如SVG的語(yǔ)法,就可以轉(zhuǎn)換成為SVG圖形,單元數(shù)量可以任意加。2010-02-02JavaScript時(shí)間操作之年月日星期級(jí)聯(lián)操作
這篇文章主要介紹了JavaScript時(shí)間操作之級(jí)聯(lián)日期選擇操作,涉及到年、月、日、星期,感興趣的小伙伴們可以參考一下2016-01-01使用js實(shí)現(xiàn)數(shù)據(jù)格式化
這篇文章主要介紹了使用javascript實(shí)現(xiàn)數(shù)據(jù)格式化為字符串,非常的實(shí)用,這里推薦給有相同需求的小伙伴。2014-12-12原生JavaScript實(shí)現(xiàn)進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02