@manxisuo的《通過一張簡單的圖,讓你徹底地、永久地搞懂JS的==
運算》一文中詳細的闡述了JavaScript中的==
運算子。其實在JavaScript中還有一個另外一個運算子===
。那麼這兩者有何不一樣呢?這篇文章就一起來看看JavaScript中==
和===
有何不同。
關係表示式
==
和===
都是JavaScript中的關係表示式運算子,與對應的還有!=
和!==
。
==
和===
運算子主要用於比較兩個值是否相等。當然它們對相等的定義不盡相同。兩個運算子允許任意型別的運算元,如果運算元相等則返回true
,否則返回false
。
==和===定義
==
和===
雖然都是關係表示式運算子,但它們的定義是有所不同的:
==
:稱作相等運算子(Equality Operator),它用來檢測兩個操作是否相等,這裡的相等的定義非常寬鬆,可以允許型別的轉換===
:稱作嚴格相等運算子(Strict Equality),也被稱之為恆等運算子(Identity Operator)或全等運算子,它用來檢測兩個運算元是否嚴格相等
== 和 ===運算規則
JavaScript中==
和===
運算子,它們的運算都具有自己的運算規則。
==運算規則
==
運算子對於兩個數比較並不嚴格。如果兩個運算元不是同一型別,那麼相等運算子會嘗試進行一些型別轉換,然後進行比較。
在轉換不同的資料型別時,其會遵循下列基本原則:
如果兩個運算元的型別相同,則會按照嚴格相等的比較規則一樣,如果嚴格相等,那麼比較結果為相等。如果它們不嚴格相等,則比較結果為不相等。
如果兩個運算元的型別不同,==
相等操作符也可能會認為它們相等。檢測相等將會遵守下面的規則和型別轉換:
如果一個值是null
, 另一個是undefined
,則它們是相等:
1 |
null == undefined; // => true |
如果一個值是數字,另一個是字串,先將字串轉換為數值,然後使用轉換後的值進行比較:
1 |
1 == '1'; // => true |
如果其中一個值是true
,則將其轉換為1
再進行比較。如果其中一個值是false
,則將其轉換為0
再進行比較:
1 2 3 4 5 6 |
true == 0; // => false false == 1; // => false true == 1; // => true false == 0; // => true true == '1'; // => true false == '0';// => true |
如果一個值是物件,另一個值是數字或字串,將會先使用toString()
和valueOf()
將物件轉換為原始值,然後再進行比較。
兩個運算元在進行比較時則要遵循下列規則:
null
和undefined
是相等的- 要比較相等性之前,不能將
null
和undefined
轉換成其他任何值 - 如果有一個操作是
NaN
,則相等操作符返回false
,而不相等操作符返回true
。重要提示: 即使兩個運算元都是NaN
,相等操作符也返回false
,因為按照規則 ,NaN
不等於NaN
- 如果兩個運算元都是物件,則比較它們是不是同一個物件。如果兩個運算元都指向同一個物件,則相等操作符返回
true
,否則返回false
來看一下物件的比較:
1 2 3 4 5 6 7 8 9 10 11 12 |
var a = [1,2,3]; var b = [1,2,3]; var c = { x: 1, y: 2 }; var d = { x: 1, y: 2 }; var e = "text"; var f = "te" + "xt"; a == b // =>false c == d // =>false e == f // =>true |
對於兩個運算元var1==var2
,下圖能表達的很清楚:
圖中綠色的方框表示返回的值為true
,其它的表示返回的值為false
。同樣可以使用另一張圖來表述:
圖中橙色的方框表示返回的值為true
,其它的表示返回的值為false
。
===運算規則
嚴格相等運算子===
首先要計算其運算元的值,然後比較這兩個值,比較過程沒有任何型別轉換。其運算規則遵循下面的規則:
如果兩個值型別不相同,則它們不相等
1 |
true === '1'; // => false |
其中運算元true
是布林值,而'1'
是字串值。
如果兩個者都是null
或者都是undefined
,則它們相等:
1 2 3 |
null === null; // => true undefined === undefined; // => true null === undefined; // =>false |
如果兩個值都是布林值true
或false
,則它們相等:
1 2 3 4 5 6 |
true === true; // =>true false === false; // =>true true === 1; // =>false true === '1'; // =>false false === 0; // =>false false === '0'; // =>false |
如果其中一個值是NaN
,或者兩個值都是NaN
,則它們不相等。NaN
和其他任何值都是不相等的,包括它本身。通過x !== x
來判斷x
是否為NaN
,只有在x
為NaN
的時候,這個表示式的值才為true
。
如果兩個值為數字且數值相等,則它們相等。如果一個值為0
,另一個值為-0
,則它們同樣的相等。
如果兩個值為字串,且所含的對應位上的16
位數完全相等,則它們相等。如果它們的長度或內容不同,則它們不等。兩個字串可能含義完全一樣且所顯示出的字元也一樣,但且有不同編碼的16
位值。JavaScript並不對Unicode進行標準化的轉換,因此像這樣的字串通過===
和==
運算子的比較結果也不相等。在JavaScript中字串的比較提供了一個String.localeCompare()
方法。
如果兩個引用值指向同一個物件,陣列或函式,則它們是相等的。如果指向不同的物件,則它們是不等的,儘管兩個物件具有完全一樣的屬性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var a = [1,2,3]; var b = [1,2,3]; var c = a; var ab_eq = (a === b); // false (even though a and b are the same type) var ac_eq = (a === c); // true var a = { x: 1, y: 2 }; var b = { x: 1, y: 2 }; var c = a; var ab_eq = (a === b); // false (even though a and b are the same type) var ac_eq = (a === c); // true var a = { }; var b = { }; var c = a; var ab_eq = (a === b); // false (even though a and b are the same type) var ac_eq = (a === c); // true |
同樣對於var1 === var2
也可以用圖來表達:
上圖中綠色的方框表示返回的值為true
,白色的方框表示返回的值為false
。除了上圖之外,下面這張圖也表達的是同樣的意思:
上圖中橙色的方框表示返回的值為true
,白色的方框表示返回的值為false
。
在JavaScript中比較運算子不僅僅是==
和===
。還有其它的比較運算子,比如<=
、>=
。綜合起來,也可以使用一張圖表述:
- 紅色:
===
- 橙色:
==
- 黃色:
<=
和>=
同時成立,==
不成立 - 藍色:只有
>=
- 綠色:只有
<=
有關於JavaScript中==
和===
更多的討論,可以點選這裡和這裡。
!= 和 !==
在JavaScript中還有兩個運算子和==
、===
類似,它們是!=
和!===
。在JavaScript中,!=
和!==
運算子的檢測是==
和===
運算子的求反。如果兩個值通過==
的比較結果為true
,那麼通過!=
的比較結果則為false
。如果兩個值通過===
的比較結果為true
,那麼通過!==
的比較結果則為false
。
總結
這篇文章簡單的總結了JavaScript中的==
和===
運算子的規則,以前這兩個運算子中不同之處。簡單的只需要記住==
表示兩個運算元相同,===
表示來格相等(恆等或全等),!=
稱為不相等,!==
表示不嚴格相等。