JavaScript Object and compare with == and ===

Basic JS

JavaScript

發佈日期: 2016-08-17

更新日期: 2024-02-14

文章字數: 924

閱讀時間: 3 分

閱讀次數:

在JavaScript的世界裡面應該用===來比對真實的值是否相等，而非使用==。

前言

會想寫這篇是因從去年看了兩本JavaScript必讀聖經後，在昨天又購入了JavaScript深入精要第三本聖經，第一章開宗明義地讓我了解了這些觀念，這些以前一直讓我感到困惑或是不甚理解的地方(此文章原撰寫在2014/1/4)。

== and ===

這邊參考JavaScript tutorial:
Comparison operators

==

The == operator will compare for equality after doing any necessary type conversions.

寬鬆的相等性(lenient equality)，會先嘗試轉換不同型(type)的值，然後再以嚴格相等性的方式來比較它們。

===

The === operator will not do the conversion, so if two values are not the same type === will simply return false

嚴格的相等性(strict equality)，只考量具有同樣型別的值是否相等。

compare

這邊簡單來看JS個別的判斷後就可以知道差異了

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

' \t\r\n ' == 0     // true

簡單來講 === 會測試兩個 values 的類型 (object type)，而==則是會將兩邊轉型成可以判斷的判別式後才進行比對，這會導致我們真的在做比對時容易有誤差。而我們長久以來有部分開發習慣可能是利用這個誤差來做一些判斷如:

if(testObject){
    // do something if testObject != null
}

這邊就是用 testObject != null 這樣的判斷來進行。但常見的陷阱卻有下面這些:

NaN

NaN == NaN;        // false

boolean

2 == true;        // 2 === 1, false
2 == false;        // 2 === 0, false

1 == true;        // 1 === 1, true
0 == false;        // 0 === 0, true

'' == false;    // 0 === 0, true
'1' == true ;    // 1 === 1, true
'0' == false;    // 0 === 0, true
'test' == true    // NaN === 1, false

object

{} =='[object Objec]';    // true
['123'] == 123;            // true
[] == 0;                // true

看完上面的反例相信你已經吐血了，簡單來講==根本沒有令人信服的案例。有的只是因為轉型帶來比較簡化的判斷而已。

結論

曾經有一派宣稱如果==能滿足需求，則使用===較為麻煩與不必要。但在某些情況你實在無法去思考到底寫這段判別式的人如果用==是已經預測到他會轉型還是根本沒料想到這樣會發生問題。當在用了比較嚴格的XXLint(ESLint, jsLint, jshint and etc…)工具後習慣用===則是大家的通識。