JavaScript?對象的四種方式比較詳解
前言
比較 JavaScript 中的值非常簡單,只需用相等運(yùn)算符即可,例如嚴(yán)格相等運(yùn)算符:
'a' === 'c'; // => false 1 === 1; // => true
但是對象卻有結(jié)構(gòu)化的數(shù)據(jù),所以比較起來比較困難。在本文中,你將學(xué)習(xí)如何正確比較 JavaScript 中的對象。
1. 引用比較
JavaScript 提供了 3 種方法來對值進(jìn)行比較:
- 嚴(yán)格相等運(yùn)算符
===
- 寬松相等運(yùn)算符
==
Object.is()
函數(shù)
當(dāng)使用上述任何一種方法比較對象時(shí),只有在比較的值引用了相同的對象實(shí)例時(shí),比較的結(jié)果為 true
。這就是參照相等性。
讓我們定義對象 hero1
和 hero2
,并查看實(shí)際中的參照相等性:
const hero1 = { name: 'Batman' }; const hero2 = { name: 'Batman' }; hero1 === hero1; // => true hero1 === hero2; // => false hero1 == hero1; // => true hero1 == hero2; // => false Object.is(hero1, hero1); // => true Object.is(hero1, hero2); // => false
hero1 === hero1
的計(jì)算結(jié)果為 true
,因?yàn)閮蓚€(gè)操作數(shù)均指向了同一個(gè)對象實(shí)例 hero1
。
另一方面,hero1 === hero2
的計(jì)算結(jié)果為 false
,因?yàn)?nbsp;hero1
和 hero2
是不同的對象實(shí)例。
有意思的是,hero1
和 hero2
對象的內(nèi)容是相同的:兩個(gè)對象都有一個(gè) name
屬性,它的其值是 'Batman'
。盡管如此,即使比較相同結(jié)構(gòu)的對象,hero1 === hero2
的結(jié)果也是 false
。
當(dāng)你想比較對象引用而不是它們的內(nèi)容時(shí),引用相等是很有用的。但是在更多的情況之下,你都想針對對象的實(shí)際內(nèi)容進(jìn)行比較:例如屬性及它們的值。
接下來看看如何通過對象的內(nèi)容比較對象是否相等。
2. 手動(dòng)比較
按內(nèi)容比較對象最直接的方法是讀取屬性并手動(dòng)比較它們。
例如,讓我們編寫一個(gè)特殊的函數(shù) isHeroEqual()
來比較兩個(gè) hero 對象:
function isHeroEqual(object1, object2) { return object1.name === object2.name; } const hero1 = { name: 'Batman' }; const hero2 = { name: 'Batman' }; const hero3 = { name: 'Joker' }; isHeroEqual(hero1, hero2); // => true isHeroEqual(hero1, hero3); // => false
isHeroEqual()
訪問兩個(gè)對象的屬性 name
并比較它們的值。
如果被比較的對象具有一些屬性,我更喜歡編寫諸如 isHeroEqual()
之類的比較函數(shù)。這類函數(shù)具有良好的性能:在比較中只會(huì)涉及少數(shù)幾個(gè)屬性訪問器和相等運(yùn)算符。
手動(dòng)比較需要手動(dòng)提取屬性,對于簡單對象來說,這不是問題。但是,要對較大的對象(或結(jié)構(gòu)未知的對象)進(jìn)行比較,就不方便了,因?yàn)樗枰罅康臉影宕a。
那么讓我們來看看對象的淺層比較能提供哪些幫助。
3. 淺層比較
如果用淺層比較檢查對象,你必須獲取兩個(gè)對象的屬性列表(使用 Object.keys()
),然后檢查它們的屬性值是否相等。
下面的代碼是淺層比較的一種實(shí)現(xiàn)方式:
function shallowEqual(object1, object2) { const keys1 = Object.keys(object1); const keys2 = Object.keys(object2); if (keys1.length !== keys2.length) { return false; } for (let index = 0; index < keys1.length; index++) { const val1 = object1[keys1[index]]; const val2 = object2[keys2[index]]; if (val1 !== val2) { return false; } } return true; }
在函數(shù)內(nèi)部,keys1
和 keys2
是分別包含 object1
和 object2
屬性名稱的數(shù)組。
用 for
循環(huán)遍歷鍵,并比較 object1
和 object2
的每個(gè)屬性。
使用淺層比較,你可以輕松對有著許多屬性的對象進(jìn)行相等性檢查:
const hero1 = { name: 'Batman', realName: 'Bruce Wayne' }; const hero2 = { name: 'Batman', realName: 'Bruce Wayne' }; const hero3 = { name: 'Joker' }; shallowEqual(hero1, hero2); // => true shallowEqual(hero1, hero3); // => false
shallowEqual(hero1, hero2)
返回 true
,因?yàn)閷ο?nbsp;hero1
和 hero2
具有相同的屬性(name
和 realName
),并且值也相同。
另一方面,由于 hero1
和 hero3
具有不同的屬性,所以 shallowEqual(hero1, hero3)
將會(huì)返回 false
。
但是 JavaScript 中的對象是可以嵌套的。在這種情況下,淺層比較并不能很好地發(fā)揮作用。
下面對具有嵌套對象的對象執(zhí)行淺層比較檢查:
const hero1 = { name: 'Batman', address: { city: 'Gotham' } }; const hero2 = { name: 'Batman', address: { city: 'Gotham' } }; shallowEqual(hero1, hero2); // => false
這次,即使兩個(gè)對象 hero1
和 hero2
具有相同的內(nèi)容,shallowEqual(hero1, hero2)
也將會(huì)返回 false
。
發(fā)生這種情況是因?yàn)榍短讓ο?nbsp;hero1.address
和 hero2.address
是不同的對象實(shí)例。因此,淺層比較認(rèn)為 hero1.address
和 hero2.address
是兩個(gè)不同的值。
解決嵌套對象的問題需要進(jìn)行深層比較。
4. 深層比較
深層比較與淺層比較相似,不同之處在于,當(dāng)屬性中包含對象時(shí),將對嵌套對象執(zhí)行遞歸淺層比較。
看一下深層比較的實(shí)現(xiàn):
function deepEqual(object1, object2) { const keys1 = Object.keys(object1); const keys2 = Object.keys(object2); if (keys1.length !== keys2.length) { return false; } for (let index = 0; index < keys1.length; index++) { const val1 = object1[keys1[index]]; const val2 = object2[keys2[index]]; const areObjects = isObject(val1) && isObject(val2); if (areObjects && !deepEqual(val1, val2) || !areObjects && val1 !== val2) { return false; } } return true; } function isObject(object) { return object != null && typeof object === 'object'; }
第 13 行的 areObjects && !deepEqual(val1, val2)
一旦檢查到的屬性是對象,則遞歸調(diào)用將會(huì)開始驗(yàn)證嵌套對象是否也相等。
現(xiàn)在用 deepEquality()
比較具有嵌套對象的對象:
const hero1 = { name: 'Batman', address: { city: 'Gotham' } }; const hero2 = { name: 'Batman', address: { city: 'Gotham' } }; deepEqual(hero1, hero2); // => true
深度比較函數(shù)能夠正確地確定 hero1
和 hero2
是否具有相同的屬性和值,包括嵌套對象 hero1.address
和 hero2.address
的相等性。
為了深入比較對象,我建議使用Node內(nèi)置util
模塊的 isDeepStrictEqual(object1, object2)
5. 總結(jié)
引用相等性(使用 ===
、 ==
或 Object.is()
)用來確定操作數(shù)是否為同一個(gè)對象實(shí)例。
手動(dòng)檢查對象是否相等,需要對屬性值進(jìn)行手動(dòng)比較。盡管這類檢查需要手動(dòng)編碼來對屬性進(jìn)行比較,但由于很簡單,所以這種方法很方便。
當(dāng)被比較的對象有很多屬性或在運(yùn)行時(shí)確定對象的結(jié)構(gòu)時(shí),更好的方法是使用淺層檢查。
如果比較的對象具有嵌套對象,則應(yīng)該進(jìn)行深度比較檢查。
到此這篇關(guān)于JavaScript 對象的四種方式比較詳解的文章就介紹到這了,更多相關(guān)JavaScript 對象比較內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript使用shift方法移除素組第一個(gè)元素實(shí)例分析
這篇文章主要介紹了JavaScript使用shift方法移除素組第一個(gè)元素的用法,實(shí)例分析了javascript中shift方法的使用技巧,需要的朋友可以參考下2015-04-04滾動(dòng)條變色 隱藏滾動(dòng)條與雙擊網(wǎng)頁自動(dòng)滾屏顯示代碼
滾動(dòng)條變色 隱藏滾動(dòng)條與雙擊網(wǎng)頁自動(dòng)滾屏顯示代碼2009-12-12JavaScript實(shí)現(xiàn)統(tǒng)計(jì)文本框Textarea字?jǐn)?shù)增強(qiáng)用戶體驗(yàn)
現(xiàn)在流行的Twitter等微博客網(wǎng)站,有一個(gè)很好的用戶體驗(yàn),就是在文本框中輸入文字的時(shí)候,會(huì)自動(dòng)統(tǒng)計(jì)輸入的字符,并顯示用戶還能輸入的字符,在限制了140個(gè)字的微博客中,這樣的小提示可以很好的增強(qiáng)用戶體驗(yàn),本文也嘗試著實(shí)現(xiàn)一下2012-12-12如何通過JavaScript、css、H5實(shí)現(xiàn)簡單的tab欄切換和復(fù)用功能
tab切換在項(xiàng)目中也算是常用技術(shù),一般實(shí)現(xiàn)tab切換都用js或者jq實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于如何通過JavaScript、css、H5實(shí)現(xiàn)簡單的tab欄切換和復(fù)用功能的相關(guān)資料,需要的朋友可以參考下2022-11-11JavaScript中的finally()方法和Filter()方法詳解
finally是 JavaScript 構(gòu)造中使用的方法try-catch,Filter() 是 JavaScript 中的一種方法,可以通過處理數(shù)組輕松提供過濾后的輸出數(shù)據(jù),本文就給大家詳細(xì)的介紹一下JavaScript中的finally()方法和Filter()方法,需要的朋友可以參考下2023-08-08一篇文章帶你詳細(xì)了解JavaScript數(shù)組
本文是小編給大家特意整理的關(guān)于JavaScript數(shù)組的知識(shí),非常實(shí)用,在面試筆試題中經(jīng)常用得到,有需要的朋友可以參考下2021-09-09IE7中javascript操作CheckBox的checked=true不打勾的解決方法
在IE7下,生成的Checkbox無法正確的打上勾。 原因是 chkbox控件還沒初始化(appendChild),就開始操作它的結(jié)果2009-12-12Bootstrap Tree View簡單而優(yōu)雅的樹結(jié)構(gòu)組件實(shí)例解析
本文通過實(shí)例代碼給大家介紹了Bootstrap Tree View簡單而優(yōu)雅的樹結(jié)構(gòu)組件,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06