色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

如何正確比較JavaScript中的對象

h1654155282.3538 ? 來源:樂娛科技 ? 作者:樂娛科技 ? 2020-11-12 11:09 ? 次閱讀

比較JavaScript中的值非常簡單,只需用相等運算符即可,例如嚴格相等運算符:

但是對象卻有結構化的數據,所以比較起來比較困難。在本文中,你將學習如何正確比較JavaScript中的對象。

1.引用比較

JavaScript提供了3種方法來對值進行比較:

嚴格相等運算符=== 寬松相等運算符== Object.is()函數

當使用上述任何一種方法比較對象時,只有在比較的值引用了相同的對象實例時,比較的結果為true。這就是參照相等性。

讓我們定義對象hero1和hero2,并查看實際中的參照相等性:

hero1===hero1的計算結果為true,因為兩個操作數均指向了同一個對象實例hero1。

另一方面,hero1===hero2的計算結果為false,因為hero1和hero2是不同的對象實例。

有意思的是,hero1和hero2對象的內容是相同的:兩個對象都有一個name屬性,它的其值是‘Batman’。盡管如此,即使比較相同結構的對象,hero1===hero2的結果也是false。

當你想比較對象引用而不是它們的內容時,引用相等是很有用的。但是在更多的情況之下,你都想針對對象的實際內容進行比較:例如屬性及它們的值。

接下來看看如何通過對象的內容比較對象是否相等。

2.手動比較

按內容比較對象最直接的方法是讀取屬性并手動比較它們。

例如,讓我們編寫一個特殊的函數isHeroEqual()來比較兩個hero對象:

isHeroEqual()訪問兩個對象的屬性name并比較它們的值。

如果被比較的對象具有一些屬性,我更喜歡編寫諸如isHeroEqual()之類的比較函數。這類函數具有良好的性能:在比較中只會涉及少數幾個屬性訪問器和相等運算符。

手動比較需要手動提取屬性,對于簡單對象來說,這不是問題。但是,要對較大的對象(或結構未知的對象)進行比較,就不方便了,因為它需要大量的樣板代碼。

那么讓我們來看看對象的淺層比較能提供哪些幫助。

3.淺層比較

如果用淺層比較檢查對象,你必須獲取兩個對象的屬性列表(使用Object.keys()),然后檢查它們的屬性值是否相等。

下面的代碼是淺層比較的一種實現方式:

在函數內部,keys1和keys2是分別包含object1和object2屬性名稱的數組。

用for循環遍歷鍵,并比較object1和object2的每個屬性。

使用淺層比較,你可以輕松對有著許多屬性的對象進行相等性檢查:

shallowEqual(hero1,hero2)返回true,因為對象hero1和hero2具有相同的屬性(name和realName),并且值也相同。

另一方面,由于hero1和hero3具有不同的屬性,所以shallowEqual(hero1,hero3)將會返回false。

但是JavaScript中的對象是可以嵌套的。在這種情況下,淺層比較并不能很好地發揮作用。

下面對具有嵌套對象的對象執行淺層比較檢查:

這次,即使兩個對象hero1和hero2具有相同的內容,shallowEqual(hero1,hero2)也將會返回false。

發生這種情況是因為嵌套對象hero1.address和hero2.address是不同的對象實例。因此,淺層比較認為hero1.address和hero2.address是兩個不同的值。

解決嵌套對象的問題需要進行深層比較。

4.深層比較

深層比較與淺層比較相似,不同之處在于,當屬性中包含對象時,將對嵌套對象執行遞歸淺層比較。

看一下深層比較的實現:

第13行的areObjects&&!deepEqual(val1,val2)一旦檢查到的屬性是對象,則遞歸調用將會開始驗證嵌套對象是否也相等。

現在用deepEquality()比較具有嵌套對象的對象:

深度比較函數能夠正確地確定hero1和hero2是否具有相同的屬性和值,包括嵌套對象hero1.address和hero2.address的相等性。

為了深入比較對象,我建議使用Node內置util模塊的isDeepStrictEqual(object1,object2)(

https://nodejs.org/api/util.html#

util_util_isdeepstrictequal_val1_val2)或lodash庫的_.isEqual(object1,object2)(

https://lodash.com/docs/4.17.15#isEqual)。

5.總結

引用相等性(使用===、==或Object.is())用來確定操作數是否為同一個對象實例。

手動檢查對象是否相等,需要對屬性值進行手動比較。盡管這類檢查需要手動編碼來對屬性進行比較,但由于很簡單,所以這種方法很方便。

當被比較的對象有很多屬性或在運行時確定對象的結構時,更好的方法是使用淺層檢查。

如果比較的對象具有嵌套對象,則應該進行深度比較檢查。
責任編輯人:CC

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 對象
    +關注

    關注

    1

    文章

    38

    瀏覽量

    17405
  • javascript
    +關注

    關注

    0

    文章

    519

    瀏覽量

    53889
收藏 人收藏

    評論

    相關推薦

    JavaScript教程

    JavaScript教程:JavaScript是由Netscape公司開發并隨Navigator導航者一起發布的、介于Java與HTML之間、基于對象事件驅動的編程語言,正日益受到全球的關注。因它
    發表于 10-21 09:17

    JavaScript權威指南 pdf 下載

    移植的DHTML動畫等常見任務。本書還包括詳細的參考手冊,涵蓋了JavaScript的核心API、遺留的客戶端API和W3C標準DOM API,記述了這些API的每一個JavaScript
    發表于 12-08 10:46

    JavaScript的六種錯誤類型

    以上的JavaScript已經不再拋出該錯誤,但依然可以通過new關鍵字來自定義該類型的錯誤提示。以上的6種派生錯誤,連同原始的Error對象,都是構造函數。開發者可以使用它們,認為生成錯誤
    發表于 09-22 15:28

    JavaScript的Object

    對,其中值可以是數據或者函數。2. 對象的屬性在 JavaScript 對象的屬性分為兩種類型:數據屬性和訪問?屬性。2.1 數據屬性1. 數據屬性:包含的是?個數據值的位置,在這
    發表于 09-18 09:05

    JavaScript的this是什么?

    this 是什么?this 是 JavaScript 的?個關鍵字,MDN 這樣解釋:this 是指當前執行代碼的環境對象。根據語義,我這里把它理解為 ”引用指針“ 。this 的?法?在大樹云
    發表于 09-18 09:05

    JavaScript 【1】 基礎數據類型

    字符串字符串是存儲字符(比如 "Bill Gates")的變量。 字符串可以是引號的任意文本。您可以使用單引號或雙引號 JavaScript 數字JavaScript 只有一種
    發表于 07-17 10:32

    JavaScript 【2】對象

    三、JavaScript 對象JavaScript 對象JavaScript,幾乎所有的事
    發表于 07-17 10:33

    JavaScript【8】JSON

    九、JSONJSON語法是JavaScript語法的一個子集,包含有:(1)數據在鍵值對。(2)數據由逗號分隔。(3)大括號保存對象。(4)括號保存數組。JSON數據的格式是:鍵:
    發表于 07-17 10:45

    JavaScript十個內置對象列表及其程序詳解

    js必備的內置對象,內置對象是ECMAscript標準以及定義好的,由瀏覽器廠商已經實現的標準對象 內置對象中封裝了專門的數據和操作數據常用的API
    發表于 11-25 10:36 ?1552次閱讀

    javascript原型是什么_javascript常用框架介紹

    JavaScript 是面向對象的腳本語言,長期以來用作 Web 瀏覽器應用程序的客戶端腳本接口。JavaScript 讓 Web 開發人員能以編程方式處理 Web 頁面上的對象,并提
    發表于 12-04 17:07 ?2967次閱讀
    <b class='flag-5'>javascript</b>原型是什么_<b class='flag-5'>javascript</b>常用框架介紹

    JavaScript創建對象的方式

    JavaScript中有幾種創建對象的方式,本文將一一介紹,工廠模式、構造函數模式、原型模式、動態原型模式、組合使用構造函數模式和原型模式。
    的頭像 發表于 02-22 09:32 ?3817次閱讀
    <b class='flag-5'>JavaScript</b>創建<b class='flag-5'>對象</b>的方式

    使用JavaScript創建對象的方法和案例

    Javascript的一切幾乎都是對象,無論是數組還是函數。本文將教你使用JavaScript創建對象的三種方法。
    的頭像 發表于 07-06 09:41 ?2949次閱讀

    JavaScript動態的創建QML對象

    在實際QML應用開發,我們可以在JavaScript動態的創建QML對象。這樣做可以延遲對象的實例化,當我們在需要創建
    的頭像 發表于 09-01 10:42 ?1580次閱讀

    javascript指什么

    JavaScript是一種高級編程語言,通常用于為網頁添加交互功能。它是一種面向對象的語言,旨在通過編寫代碼來控制網頁的行為,使用戶能夠與網頁進行動態交互。JavaScript能夠與HTML和CSS
    的頭像 發表于 12-03 11:11 ?896次閱讀

    javascript的內置對象有哪些

    JavaScript是一門廣泛應用于Web開發的腳本語言,它有很多內置對象,用于處理不同的數據類型、執行不同的操作和提供各種功能。在這篇文章,我將詳盡介紹JavaScript的內置
    的頭像 發表于 12-03 11:39 ?1392次閱讀
    主站蜘蛛池模板: 黄色xxxxxx| 黑色丝袜在线观看| 麻豆精品无码久久久久久久久| 岳扒开让我添| 日本美女色| 久亚洲AV无码专区A片| 国产激情视频在线| 99久久99| 中文字幕成人免费高清在线| 色婷婷激情AV精品影院| 久久久久琪琪精品色| 国产精品久久久久久人妻精品蜜桃 | 亚洲精品一本之道高清乱码| 日本女人下面毛茸茸| 妈妈的职业3完整版在线播放 | 日本高清二区| 久草青青在线| 国产精品单位女同事在线| 办公室里呻吟的丰满老师电影| 一本色道久久88综合日韩精品| 偷窥 亚洲 色 国产 日韩| 色 花 堂 永久 网站| 色WWW永久免费视频首页| 欧美白妞大战非洲大炮| 年轻的老师5理伦片| 美女张开腿让我了一夜| 刘梓晨啪啪啪| 凌馨baby| 欧美写真视频一区| 秋霞鲁丝片Av无码| 挺弄抽插喷射HH| 亚洲精品无码成人AAA片| 一本色道久久综合亚洲精品| 在线观看精品视频看看播放| 自慰弄湿白丝袜| 99视频精品全部免费 在线| chinese东北夫妻video| 纯肉高H种马艳遇风流多| 国产成人久久AV免费看澳门| 国产亚洲国际精品福利| 绿巨人www在线观看|