摘要

在瀏覽技術網時，無意中發現一個同行問的問題，問題如下：‘ {} == {} 或 {} > {} 輸出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會比較其內部參考地址(堆疊記憶體指標)，當且僅當它們的參考指向記憶體(堆記憶體地址)中的相同物件(區域)時才相等，即它們在堆疊記憶體中的參考地址相同，因此就會產生以上的測驗結果，

參考文獻

1. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

2. javascript高級程式設計(第3版)

標籤：JavaScript

上一篇：Vue基礎(九)：Vue路由(一)

下一篇：Vue基礎(十)：Vue路由(二)