JavaScript中的==，===和Object.is()

hiyang 發布于2019-08-23 12:00 / 1259人閱讀

概述

本文主要講解JavaScript中的三種相等運算：==，===和Object.is()。通過對比和例子，加深大家的印象，并就個別例子進行詳細說明。

預備知識

ECMAScript7規范中的ToPrimitive抽象操作

===運算符

對于x === y，該運算符的比較步驟如下：

如果x的類型和y的類型不一樣，返回false；

如果x的類型是數字，那么：

如果x是NaN，返回false；

如果y是NaN，返回false；

如果x和y是同一個數字值，返回true；

如果x是+0，y是-0，返回true；

如果x是-0，y是+0，返回true；

返回false；

返回SameValueNonNumber(x, y)的結果。

SameValueNonNumber(x, y)抽象操作比較兩個非數字并且同類型的x和y是否相等，比較步驟如下：

如果x的類型是null或者undefined，返回true；

如果x是字符串類型，

如果x和y是完全相同的字符編碼序列，返回true，否則返回false；

如果x是布爾類型，

如果x和y同為true或者false，返回true，否則返回false；

如果x是symbol類型，

如果x和y是相同的符號值，返回true，否則返回false；

如果x和y是同一個對象值，返回true，否則返回false。

需要注意的點是NaN，+0，-0：

NaN === NaN // false
+0 === -0 // true
-0 === +0 // true

這三個例子分別對應x === y比較步驟中的2.1，2.4和2.5。這三個例子的輸出結果完全就是按照規范的定義得出的結果，沒有為什么，規范就是這么定義的。至于說為什么規范要這樣定義，可能就需要去問規范的制定者了，這個就不在本文的討論范圍之內了。

Object.is()

對于Object.is(x, y)，會使用抽象操作SameValue(x, y)進行比較，該抽象操作的步驟如下：

如果x的類型和y的類型不一樣，返回false；

如果x的類型是數字，那么：

如果x和y都是NaN，返回true；

如果x是+0，y是-0，返回false；

如果x是-0，y是+0，返回false；

如果x和y是同一個數字值，返回true；

返回false；

返回SameValueNonNumber(x, y)的結果。

由此可見，===和Object.is()的區別在于對NaN和帶符號的0的處理：

NaN === NaN // false
+0 === -0 // true
-0 === +0 // true
Object.is(NaN, NaN) // true
Object.is(+0, -0) // false
Object.is(-0, +0) // false

==運算符

對于x == y，該運算符的比較步驟如下：

如果x和y的類型相同，返回x === y的結果；

如果x是null，y是undefined，返回true；

如果x是undefined，y是null，返回true；

如果x的類型是數字，y的類型是字符串，返回x == ToNumber(y)的結果；

如果x的類型是字符串，y的類型是數字，返回ToNumber(x) == y的結果；

如果x的類型是布爾類型，返回ToNumber(x) == y的結果；

如果y的類型是布爾類型，返回x == ToNumber(y)的結果；

如果x的類型是字符串、數字或者Symbol中的一種，y的類型是對象，返回x == ToPrimitive(y)的結果；

如果x的類型是對象，y的類型是字符串、數字或者Symbol中的一種，返回ToPrimitive(x) == y的結果；

返回false。

上面用到了方法ToNumber，ToNumber(x)的步驟如下：

如果x的類型是Undefined，返回NaN；

如果x的類型是Null，返回+0；

如果x的類型是布爾類型，x為true返回1，false返回+0；

如果x的類型是數字，返回x；

如果x的類型是字符串，參考字符串轉化為數字，本文不詳細介紹這塊內容；

如果x的類型是Symbol，返回NaN；

如果x的類型是對象，

讓primValue的值是ToPrimitive(x, hint Number)；

返回ToNumber(primValue)的結果；

[] == ![]

上面講了==運算符的比較步驟，下面我們講一個例子加深下印象：

[] == ![]

首先左邊的[]是一個空數組，類型是對象，右邊是![]，[]是一個真值，所以![]的結果是false：

[] == ![] // => [] == false

然后會走到x == y比較步驟的第7步，返回x == ToNumber(y)的結果，也就是：

[] == false // => [] == ToNumber(false)

由ToNumber(x)的第3步可知，ToNumber(false)返回+0：

[] == ToNumber(false) // => [] == +0

然后走到x == y比較步驟的第9步，返回ToPrimitive(x) == y的比較結果：

[] == +0 // => ToPrimitive([]) == +0

ToPrimitive([])的結果是空字符串""，原因請查看文章ECMAScript7規范中的ToPrimitive抽象操作。所以，上面等價于：

"" == +0

然后走到x == y比較步驟的第5步，返回ToNumber(x) == y的結果：

"" == +0 // => ToNumber("") == +0

由ToNumber操作的第5步可知，ToNumber("")的結果是+0，所以也就是：

+0 == +0 // true

{} == !{}

首先，左邊是{}，類型是對象，右邊是!{}，{}是真值，所以!{}是false：

{} == !{} // => {} == false

然后同樣會走到x == y比較步驟的第7步，返回x == ToNumber(y)的結果，也就是：

{} == false // => {} == ToNumber(false)

由ToNumber(x)的第3步可知，ToNumber(false)返回+0：

{} == ToNumber(false) // => {} == +0

然后走到x == y比較步驟的第9步，返回ToPrimitive(x) == y的比較結果：

{} == +0 // => ToPrimitive({}) == +0

ToPrimitive({})的結果是字符串"[object Object]"，原因請查看文章ECMAScript7規范中的ToPrimitive抽象操作。所以，上面等價于：

"[object Object]" == +0

然后走到x == y比較步驟的第5步，返回ToNumber(x) == y的結果：

"[object Object]" == +0 // => ToNumber("[object Object]") == +0

由ToNumber操作的第5步可知，ToNumber("[object Object]")的結果是NaN，所以也就是：

NaN == +0 // false

所以，[] == ![]的結果是true，{} == !{}的結果是false。可能有人第一次看到[] == ![]的時候，覺得這個的比較結果怎么可能是true。我覺得有時候不要感性的去認識問題，按照規定的運算步驟走一遍，結果是什么就是什么。

如何證明x == y比較步驟的第4步和第5步？

這個問題的詳細描述是當==運算符兩邊分別是數字和字符串類型的時候，如何證明是如步驟4和5描述的那般把字符串轉化成了數字，而不是把數字轉化成了字符串？

答：思路是：是否存在這樣一個例子，使得把數字轉化為字符串后的比較結果是false，字符串轉化為數字后的比較結果是true。是的，確實存在這樣的例子：

+"3.0" // 3 => 3 == 3 => true
"" + 3 // "3" => "3.0" == "3" // false
"3.0" == 3 // true，證明是把字符串轉化成了數字

總結

本文講解了JavaScript中的三種相等運算：==，===和Object.is()，希望對大家有所幫助。如果本文有什么錯誤或者不嚴謹的地方，歡迎在評論區留言。

參考資料

es7規范

云服務器 GPU云服務器 javascript中的 javaScript中的this javascript中的函數 javascript中的二維數組

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97834.html

深入理解Javascript原型關系

摘要：如下所示在規范中，已經正式把屬性添加到規范中也可以通過設置和獲取對象的原型對象對象之間的關系可以用下圖來表示但規范主要介紹了如何利用構造函數去構建原型關系。前言在軟件工程中，代碼重用的模式極為重要，因為他們可以顯著地減少軟件開發的成本。在那些主流的基于類的語言（比如Java,C++）中都是通過繼承(extend)來實現代碼復用，同時類繼承引入了一套類型規范。而JavaScript是...

ethernet 2019-08-22 14:06 評論0 收藏0
JavaScript中的Object.freeze與const之間的區別(譯)

摘要：一些開發人員特別是新手們會認為這兩個功能的工作方式是一樣的，但其實并不是。的問題使用聲明的對象僅能阻止其重新分配，但是并不能使其聲明的對象具有不可變性能夠阻止更改其屬性。因此，當具有嵌套屬性的對象時，并不能完全凍結對象。原文：The differences between Object.freeze() vs Const in JavaScript?作者：Bolaji Ayodeji...

monw3c 2019-08-23 17:52 評論0 收藏0
JavaScript：對Object對象的一些常用操作總結

摘要：一可以用作對象的復制可以用作對象的合并注意目標對象自身也會改變。對象四返回一個數組，包括對象自身的不含繼承的所有可枚舉屬性不含屬性的鍵名。該方法返回被凍結的對象。方法判斷一個對象是否被凍結。 JavaScript對Object對象的一些常用操作總結。一、Object.assign() 1.可以用作對象的復制 var obj = { a: 1 }; var copy = Object....

馬龍駒 2019-08-23 12:46 評論0 收藏0
你不知道的JavaScript中卷第一、二章

摘要：表達式沒有返回值，因此返回結果是。并不改變表達式的結果，只要讓表達式不返回值按慣例我們用來獲得這主要源自語言，當然使用或其他表達式也是可以的。不是數字的數字如果數學運算的操作數不是數字類型，就無法返回一個有效的數字，這種情況下返回值為。這里的內容是讀書筆記，僅供自己學習所用，有欠缺的地方歡迎留言提示。第一部分類型和語法第1章類型ECMAScript語言類型包括Undefin...

levy9527 2019-08-26 14:05 評論0 收藏0
重讀Javascript之Object

摘要：對象是中最常的內置對象之一。為了節省內存，使用一個共享的構造器使用更安全的引用如果不是或，拋出一個異常。使創建的一個新的對象為，就和通過表達式創建一個新對象一樣，是標準內置的構造器名設置的內部屬性為。方法返回一個該對象的字符串表示。 Object 對象是Javascript中最常的內置對象之一。除了null 和 undefined，其他的所有的都可以轉換為對象。可以把對象看成含有鍵值一...

Alex 2019-08-19 17:18 評論0 收藏0