從入門到入土JS知識（一）：關係操作符和相等操作符
摘要
在瀏覽技術網時，無意中發現一個同行問的問題，問題如下：‘{} == {} 輸出false，為什麼{} >= {}輸出true ？’。很有趣的問題，對啊為什麼會這樣呢，百思不得其解。為了理清這問題中的解題關鍵，我翻閱了JS紅寶石書以及溫習了MDN網站中對關係運算符合相等運算子的知識點，終於是解開了問題的迷霧，看到了廬山真相。
JS操作符知識回顧
關係運算符
比較兩個運算元的值，關係操作符會先將運算元轉為
原始值，使它們型別相同，再進行比較運算。
關係操作符的比較規則
小於、大於、小於等於和大於等於等關係操作符進行比較操作時，與ECMAScript的其他操作符一樣，當關系操作符的運算元使用了非數值時，也要進行資料轉換或完成某些奇怪的操作。其中這些奇怪的操作需要遵守以下對應的規則:
-
如果兩個運算元是數值，則執行數值比較。
-
如果兩個運算元是字串，則比較兩個字串對應的字串編碼值。
-
如果一個運算元是數值，則將另一個運算元轉換為數值，然後執行數值比較。
-
如果一個運算元是布林值，則先將其轉換為數值，然後再執行比較。
-
如果一個運算元是物件，則呼叫這個物件的valueOf()方法，用得到的結果按照前面的規則執行比較。如果物件沒有valueOf()方法，則呼叫toString()方法，並用得到的結果根據前面的規則執行比較。
-
任何運算元與NaN進行關係比較，結構都是false。
關係比較例項分析
為了探究物件運算元的關係比較，這裡就省去了普通運算元的比較例項分析。感興趣的小夥伴可以查閱mdn中的定義與例項分析，以下將由單一性到多元性的例項去剖析關係操作符在物件中的規則機制。
單一物件—{} || [] || function(){}
普通物件{}、陣列物件[]、函式物件function(){}都是物件，單一性物件的關係操作符執行機制是一致的(單一性物件測試，需要測試陣列物件、函式物件時，可以把普通物件置換成對應測試物件即可)，因此此處僅展示普通物件的關係比較例子。
console.log("{} > {}", {} > {}); // 輸出：false console.log("{} < {}", {} < {}); // 輸出：false console.log("{} >= {}", {} >= {}); // 輸出：true console.log("{} <= {}", {} <= {}); // 輸出：true
單一性測試結果
單一性測試分析
遵循關係操作符的比較規則，當運算元是物件時，呼叫物件的valueOf()方法獲取原始值進行比較，或者呼叫toString()方法獲取物件字串再進行比較。我們分別列印物件的valueOf()、toString()獲取到的值，如下圖所示：
因為{}的valueOf()方法返回值是物件本身(預設情況下，如果物件沒有原始值，則valueOf將返回物件本身)，因此我們可以比較{}物件的toString()方法返回的字串大小，而單一性物件關係比較時，返回字串一致，所以就產生了以上的測試結果。
多元物件—{} && [] && function(){}
普通物件{}、陣列物件[]、函式物件function(){}都是物件，多元性物件的關係操作符執行機制是一致的(多元性物件測試，需要測試其餘關係操作符時，可以把大於操作符置換成對應的關係比較符)，因此此處僅展示多元性物件大於操作符的比較例子。
console.log('{} > []', {} > []); // 輸出：true
console.log('{} > function(){}', {} > function(){}); // 輸出：false
console.log('[] > function(){}', [] > function(){}); // 輸出：false
console.log('[] > {}', [] > {}); // 輸出：false
console.log('function(){} > {}', function(){} > {}); // 輸出：true
多元性測試結果
多元性測試分析
任然遵循關係操作符的比較規則，分別比較普通物件{}、陣列物件[]、函式物件function(){}的valueOf()方法或者toString()方法，我們分別列印三個物件的方法值如下：
由列印的方法值可以瞭解到，三類物件的valueOf()方法都是返回自身物件原始值，因此我們可以根據toString()方法獲取到的字串進行字串關係比較，而字串比較是使用基於標準字典的Unicode值來進行比較的，我們分別對普通物件、陣列物件、函式物件的toString()方法返回的字串進行Unicode轉碼，Unicode分別如下圖所示：
根據Unicode的大小可知，函式物件>普通物件>陣列物件，所以產生了以上的測試結果。
相等運算子
判斷兩個運算元是否相等，相對於相等比較，ECMScript的解決方案提供了兩組操作符(解決早期物件相等比較將物件轉換成相似型別的合理性問題): 相等和不相等————先轉換再比較，全等和不全等————僅比較而不轉換。
相等和不想等
相等和不相等操作符都會先轉換運算元(強制轉換運算元),然後再比較兩個運算元轉換後的相等性。在比較兩個運算元的大小時，相等和不相等需要遵守以下對應的規則:
-
如果有一個運算元是布林值，則在比較相等性之前先將其轉換為數值(false轉換為0，true轉換為1)。
-
如果一個運算元是字串，另一個運算元是數值，在比較相等性之前先將字串轉換為數值。
-
如果一個運算元是物件，另一個運算元不是，則呼叫物件的valueOf()方法，再進行相等性比較。
-
如果兩個運算元都是物件，則比較它們是不是同一個物件。如果兩個運算元都是指向同一個物件，則返回true，否則返回false。
-
null和undefined是相等的，且不能將null和undefined轉換為其他值。
-
如果有一個運算元是NaN，相等操作符返回false，不相等操作符返回true(NaN不等於NaN)。
相等比較例項分析
相等比較和不相等比較，例項分析中依舊是分為單一性物件比較和多元性物件比較，由於單一和多元的執行機制完全參照相等比較的規則，所以下面將統一分析兩類物件比較。
console.log('================單一性物件比較==============');
console.log("{} == {}", {} == {}); // 輸出：false
console.log('{} != {}', {} != {}); // 輸出：true
console.log('function(){} == function(){}', function(){} == function(){} ); // 輸出：false
console.log('function(){} != function(){}', function(){} != function(){} ); // 輸出：true
console.log('[] == []', [] == [] ); // 輸出：false
console.log('[] != []', [] != [] ); // 輸出：true
console.log('================多元性物件比較==============');
console.log('{} == []', {} == []); // 輸出：false
console.log('{} != []', {} != []); // 輸出：true
console.log('{} == function(){}', {} == function(){}); // 輸出：false
console.log('{} != function(){}', {} != function(){}); // 輸出：true
console.log('[] == function(){}', [] == function(){}); // 輸出：false
console.log('[] != function(){}', [] != function(){}); // 輸出：true
相等測試結果
相等測試分析
陣列和函式也是物件，遵循這相等比較的規則，兩個運算元都是物件時，比較兩個物件是不是同一個物件？對啊，難道{}和{}不是同一個物件嗎？所以這裡的是不是究竟是個什麼含義呢？如果深知javascript記憶體管理的，就會知曉當建立一個變數物件時，javascript記憶體會為這個變數物件建立一個堆記憶體地址來儲存該變數物件，同時也會建立一個指向堆記憶體地址的棧記憶體指標(類比了下C中的指標)。javascript的變數物件的記憶體管理機制如下圖所示：
根據javascript的記憶體管理機制，如果兩運算元為物件型別，JavaScript會比較其內部引用地址，僅當他們在記憶體中引用不同物件時不相等；這樣就會產生以上的測試結果。
全等和不全等
只有在兩個運算元未經轉換就相等的情況下就返回true。需要注意的是，在相等操作中
null == undefined返回true，那是因為它們是類似的值，但是在全等操作中null === undefined返回false，那是因為它們是不同型別的值。
全等比較例項分析
全等比較和不全等比較基本上和相等比較差不多，區別在於全等比較不轉換型別，直接比較且是嚴格的比較。比較依舊是分為單一性物件和多元性物件例項，全等比較例項如下。
console.log('================單一性物件比較==============');
console.log("{} === {}", {} === {}); // 輸出：false
console.log('{} !== {}', {} !== {}); // 輸出：true
console.log('function(){} === function(){}', function(){} === function(){} );// 輸出：false
console.log('function(){} !== function(){}', function(){} !== function(){} ); // 輸出：true
console.log('[] === []', [] === [] ); // 輸出：false
console.log('[] !== []', [] !== [] ); // 輸出：true
console.log('================多元性物件比較==============');
console.log('{} === []', {} === []); // 輸出：false
console.log('{} !== []', {} !== []); // 輸出：true
console.log('{} === function(){}', {} === function(){}); // 輸出：false
console.log('{} !== function(){}', {} !== function(){}); // 輸出：true
console.log('[] === function(){}', [] === function(){}); // 輸出：false
console.log('[] !== function(){}', [] !== function(){}); // 輸出：true
全等測試結果
全等測試分析
全等比較不轉換而直接比較，那麼{}、[]、function(){}三者物件是不同型別的值，所以它們不全等；但是為什麼{}和{}也不全等呢？對啊，Why？那是因為上一部分說到的javascript的記憶體管理機制的原因所在，當兩個運算元都是物件，javascript會比較其內部引用地址(棧記憶體指標)，當且僅當它們的引用指向記憶體(堆記憶體地址)中的相同物件(區域)時才相等，即它們在棧記憶體中的引用地址相同。因此就會產生以上的測試結果。