溫故js系列（9）-相等==&嚴格相等===&代碼裏的那些判斷

前端學習：教程&開發模塊化/規範化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源彙總

歡迎提issues斧正：==========

JavaScript-判斷

代碼中，多多少少會有判斷語句。業務越複雜，邏輯就越複雜，判斷就越多

比較判斷

比較判斷是比較兩個值，返回一個布爾值，表示是否知足比較條件。JavaScript一共提供了8個比較運算符，參考我另外一篇文章：JavaScript-運算符淺析。

這裏主要說一下嚴格相等運算符和相等運算符的區別：

==相等運算符比較兩個值的時候會判斷兩個值的類型，若是不是同一類型，會強制轉換爲同一類型進行比較（類型轉換參考溫故js系列第一篇文章： 類型轉換）。

而===比較兩個值的時候先判斷兩個值的類型，若是不是同一類型，直接返回false，值類型相同再進行值的比較。

因此，從性能上來講，==會比===多走一條類型轉換的路，稍遜一點。從結果上來講，有時候類型轉換會給你帶來你不想要的比較結果。 這也就是爲何都推崇使用===的緣由。固然，==在合適的業務場景下使用也是必要的。

嚴格相等運算符===

判斷                        返回
兩個值類型不一樣                       false
兩個值都是null/undefined/true/false  true      
兩個值其中之一爲NaN                  false
兩個值都爲數值且值相等                true
兩個值都爲字符串且值相等              true
兩個值都指向同一個引用類型            true

1 === "1" // false
true === true // true
undefined === undefined // true
null === null // true
1 === 1 // true
NaN === NaN  // false
+0 === -0 // true
({} === {}) // false
[] === [] // false
(function (){} === function (){}) // false
var v1 = {};
var v2 = v1;  //兩個值引用同一個對象
v1 === v2 // true

嚴格相等運算符有一個對應的嚴格不相等運算符（!==），二者的運算結果正好相反

相等運算符==

規則： 

if 相等運算符比較相同類型的數據時，同嚴格相等運算符
else if 相等運算符比較不一樣類型的數據時：
原始類型的數據會轉換成數值類型，把字符串和布爾值都轉爲數值，再進行比較
null == undefined  返回true
一個是對象，另外一個是數字或者字符串，把對象轉成基本類型值再比較
else false

123 == 123; //true
'123' == 123; //true，'123'會轉成成數值123
false == 0; //true，false 轉成數值就是0
'a' == 'A'; //false，轉換後的編碼不同
123 == {}; //false，執行toString()或valueOf()會改變
123 == NaN; //false，只要有NaN，都是false
{} == {}; //false，比較的是他們的地址，每一個新建立對象的引用地址都不一樣

null == undefined //true
'NaN' == NaN //false
123 == NaN //false
NaN == NaN //false
false == 0 //true
true == 1 //true
true == 2 //false
undefined == 0 //false
null == 0 //false
'123' == 123 //true
'123' === 123 //false

相等運算符有一個對應的不相等運算符（!=），二者的運算結果正好相反

!!判斷

!!至關於Boolean，寫代碼時用!!轉化爲Boolean類型作判斷很是好用

!!'xzavier';   // true
!!'';          // false
!!'0';         // true
!!'1';         // true
!!'-1'         // true
!!0            // false
!!undefined    // false
!!null         // false
!!NaN          // false
!!{};          // true
!!{name:'xz'}  // true
!![];          // true
!![1,2,3];     // true
!!true;        // true

!判斷

取反運算符 ! 用於將布爾值變爲相反值，即true變成false，false變成true。對於非布爾值的數據，取反運算符會自動將其轉爲布爾值。規則是，如下六個值取反後爲true，其餘值取反後都爲false

undefined  null  false  0(包括+0和-0)  NaN  空字符串('')

!undefined    // true
!null         // true
!false        // true
!0            // true
!NaN          // true
!""           // true    
!54           // false
!'hello'      // false
![]           // false
![1,2,3]      // false
!{}           // false
!{name:'xz'}  // false

[]和{}判斷

對於[]和{}，咱們在業務代碼中確定會對其作判斷，如上

!!{};          // true
!!{name:'xz'}  // true
!![];          // true
!![1,2,3];     // true

不能用!!和!作判斷，對於數組，咱們用它的length屬性作判斷

[].length       // 0 false
[1,2,3].length  // 3 true

對象的話，能夠採用jQuery的方法$.isEmptyObject(obj)，也能夠js封裝一個方法，就模仿jQuery 寫一個

function isEmptyObject(obj) {
    var name;
    for ( name in obj ) {
        return false;
    }
    return true;
}
isEmptyObject({});  //true
isEmptyObject({name: 'xzavier'});  false

推薦一個工具庫underscore，它也有個方法isEmpty(object)

const _ = require('underscore');
_.isEmpty({});  // true

&&判斷

用在條件表達式中，規則是：

num1 && num2
true    true    true
true    false   false
false   true    false
false   false   false

用在語句中，規則是 ：

result = expression1 && expression2

若是expression1的計算結果爲false，則result爲expression1。不然result爲expression2

(1 - 1) && ( x += 1)  // 0
(2 > 1) && ( 5 + 5)   // 10
(2 + 1) && ( 5 + 5)   // 10

||判斷

用在條件表達式中，規則是：

num1 || num2
true    true     true
true    false    true
false   true     true
false   false    false

用在語句中，規則是：

若是第一個運算子的布爾值爲true，則返回第一個運算子的值，且再也不對第二個運算子求值
若是第一個運算子的布爾值爲false，則返回第二個運算子的值

||運算符通常在業務代碼中作條件表達式判斷和容錯處理，咱們在取數據時取不到的狀況下，又不能影響後面的業務代碼，就須要進行容錯。||就是一個很是好的容錯寫法，至關於提供一個備用數據。

var data = undefined || backup_data;  //請求出錯，數據爲undefined時，就去備用數據backup_data

三目判斷

規則：

condition ? expression1 : expression2;

function absN(xzavier) {
    return xzavier > 0 ? xzavier : -xzavier;
}
absN(-123);  //123
absN(123);  //123

若是第一個表達式的布爾值爲true，則返回第二個表達式的值，不然返回第三個表達式的值。

判斷暫時寫到這兒，判斷是咱們代碼生涯中時時刻刻接觸的，更多的attention在接觸研究過會更新於此...

休息一刻，約好要去打籃球了。。。