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都得一樣才行,而且不能多不能少。
試著手寫了一下,嵌套了好幾層循環(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)文章
js實(shí)現(xiàn)支付倒計(jì)時(shí)返回首頁(yè)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)支付倒計(jì)時(shí)返回首頁(yè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
異步動(dòng)態(tài)加載JS并運(yùn)行(示例代碼)
這篇文章主要是對(duì)異步動(dòng)態(tài)加載JS并運(yùn)行的示例代碼進(jìn)行了介紹。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
微信小程序?qū)崿F(xiàn)獲取自己所處位置的經(jīng)緯度坐標(biāo)功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)獲取自己所處位置的經(jīng)緯度坐標(biāo)功能,涉及微信小程序地圖功能獲取經(jīng)緯度信息的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
JS實(shí)現(xiàn)程序暫停與繼續(xù)功能代碼解讀
程序暫停與繼續(xù)的實(shí)現(xiàn)方法有很多,在本文為大家介紹下js中是如果做到的,并對(duì)具體的功能代碼進(jìn)行注釋說(shuō)明,感興趣的朋友不要錯(cuò)過(guò)2013-10-10
用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例
這篇文章主要介紹了用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
js位運(yùn)算在實(shí)際中使用的實(shí)例教程
我們可能很少在編程中用位運(yùn)算,如果沒(méi)深入學(xué)習(xí),可能也很難理解,下面這篇文章主要給大家介紹了關(guān)于js位運(yùn)算在實(shí)際中使用的相關(guān)資料,需要的朋友可以參考下2022-03-03

