JavaScript 邏輯與(&&) 與 邏輯或(||) 的邏輯運算規則理解

標籤：rip   nan   布爾   運算子   ||   can   總結   innerhtml   end   

邏輯與(&&)

邏輯與（&&）操作可以應用於任何的操作類型，不僅僅是布爾值，
在有一個運算元不是布爾值的情況下，&&操作符就不一定返回布爾值：遵循下面規則：

1. 如果第一個運算元是對象(廣義)，則返回第二個運算元

alert(‘GeCan‘ && null)      // nullalert(‘GeCan‘ && NaN)       // NaNalert(‘GeCan‘ && 0)         // 0alert(‘GeCan‘ && false)     // falsealert(‘GeCan‘ && ‘GeCan‘)   // "GeCan"alert(‘GeCan‘ && undefined) // undefinedalert(‘0‘ && ‘GeCan‘)       // ‘GeCan‘alert(1 && ‘GeCan‘)         // ‘GeCan‘

2. 如果第二個運算元是對象，只有在第一個運算元求值為 true 的情況下才返回該對象
第一個運算元求值為 true；返回該對象
// 當第一個運算元是對象，也返回該對象(參考第一點)

alert(true && ‘GeCan‘)      // ‘GeCan‘否則直接返回第一個數(短路操作)alert(null && ‘GeCan‘)      // nullalert(NaN && ‘GeCan‘)       // NaNalert(0 && ‘GeCan‘)         // 0alert(false && ‘GeCan‘)     // falsealert(undefined && ‘GeCan‘) // undefinedalert(‘‘ && ‘GeCan‘)        // ‘‘;

注意，當第一個運算元求值為 true, 但第二個運算元未定義時，會報錯

alert(true && someUndefinedVariable) // error;someUndefinedVariable is not defined

3. 如果兩個都是對象返回第二個(與上面規則有點重複)

4.如果有一個運算元是 null, NaN，0，false 或 undefined 或 ‘‘，則返回 它們自己
第一種情況，這些操作符在第一個，參照上面第2條規則的第一點，直接返回它們自己(短路)；
第二種情況，這些操作符在第二個(第一個操作符求值為 true 之後)，也返回它們自己

alert(true && null)      // nullalert(true && NaN)       // NaNalert(true && 0)         // 0alert(true && false)     // falsealert(true && undefined) // undefinedalert(true && ‘‘)        // ‘‘

上述規則總結，
邏輯與(&&) 看左邊的值是真還是假,如果是真,返回的是右邊的值,如果是假返回的是左邊的值；
(只有 false 、0、NaN、null、undefined、Null 字元串為假, 其餘都是真)

---------------------------------------------------------------------------------------------------------------------------

邏輯或(||)

邏輯或(||) 和 邏輯與(&&) 的操作相類似只要有一個不是布爾值，||也不一定返回布爾值，遵循下面規則：

1. 第一個是對象，就返回第一個(短路)

alert(‘GeCan‘ || undefined) // "GeCan"alert(‘GeCan‘ || ‘KaiKai‘)  // "GeCan"

2. 第一個是 false, null, NaN ，0 或 undefined 或 ‘‘，則返回第二個運算元；

·第一個運算元求值結果為 false; 返回第二個運算元

alert(false || null)      // nullalert(false || NaN)       // NaNalert(false || 0)         // 0alert(false || false)     // falsealert(false || ‘GeCan‘)   // "GeCan"alert(false || undefined) // undefined

注意，當第一個運算元求值為 false，但第二個運算元未定義時，會報錯

alert(false || someUndefinedVariable); // error; someUndefinedVariable is not defined

·第一個是 null; 返回第二個運算元

alert(null || null)       // nullalert(null || NaN)        // NaNalert(null || 0)          // 0alert(null || false)      // falsealert(null || ‘GeCan‘)    // "GeCan"alert(null || undefined)  // undefined

·第一個是 NaN; 返回第二個運算元

alert(NaN || NaN)         // NaNalert(NaN || null)        // nullalert(NaN || 0)           // 0alert(NaN || false)       // falsealert(NaN || ‘GeCan‘)     // ‘GeCan‘alert(NaN || undefined)   // undefined

·第一個是 0；返回第二個運算元

alert(0 || null)          // nullalert(0 || NaN)           // NaNalert(0 || 0)             // 0alert(0 || false)         // falsealert(0 || ‘GeCan‘)       // "GeCan"alert(0 || undefined)     // undefined

·第一個是 undefined; 返回第二個運算元

alert(undefined || null)       // nullalert(undefined  || NaN)       // NaNalert(undefined || 0)          // 0alert(undefined  || false)     // falsealert(undefined  || ‘GeCan‘)   // "GeCan"alert(undefined  || undefined) // undefined

·第一個是 ‘‘; 返回第二個運算元

alert(‘‘ || null)       // nullalert(‘‘  || NaN)       // NaNalert(‘‘ || 0)          // 0alert(‘‘  || false)     // falsealert(‘‘  || ‘GeCan‘)   // "GeCan"alert(‘‘ || undefined)  // undefined

上述規則總結，

邏輯或(||) 首先看左邊的值是真還是假,如果是真,返回的是左邊的值,如果是假返回的是右邊的值
(只有 false 、0、NaN、null、undefined、Null 字元串為假, 其餘都是真)
----------------------------------------------------------------------------------------------------------------------------

因此關於 邏輯與(&&) 與 邏輯或(||) 只要記住下面兩條規則就夠了：

邏輯與(&&)
看左邊的值是真還是假,如果是真,返回的是右邊的值,如果是假返回的是左邊的值；
(只有 false 、0、NaN、null、undefined、Null 字元串為假, 其餘都是真)

邏輯或(||)
看左邊的值是真還是假,如果是真,返回的是左邊的值,如果是假返回的是右邊的值
(只有 false 、0、NaN、null、undefined、Null 字元串為假, 其餘都是真)

---------------------------------------------------------------------------------------------------------------------------

邏輯運算的應用

1. 利用邏輯或(||)
// 例子一 操作DOM
如果變數的值 不是 false, null, NaN ，0 或 undefined 或 ‘‘，則傳入該變數；

function addMessage(message){    message = message || ‘default message‘;    var el = document.createElement(‘p‘);    el.innerHTML = message;    document.body.appendChild(el);}addMessage(); // 操作預設參數addMessage(‘hello world‘) // 操作我們傳入的參數

 

請注意 謹慎使用 || 填充預設值 ！！！
// 例子二

function Foo(value){    value = value || ‘default value‘;    return value;}Foo() // ‘default value‘ ；傳遞預設參數Foo(‘你好‘) // ‘你好‘

注意：這裡傳入 false, null, NaN ，0 或 undefined 或 ‘‘ 等值，都會使用第二個預設參數！！！
          然而實際上只有 undefined 這一種情況才應該被認為是使用者沒有指定其值，需要使用後備的預設值。

改進版本

function Foo(value){    value = value !== undefined ? value : ‘defaule value‘;    return value;}

通過這種方式給參數設定預設值，只有在傳入 undefined，它的值才會被強制替換為預設值

Foo(undefined)  // "defaule value"

以下這些值，都不會被強制替換 (安全了許多！！！)

Foo(‘‘)     // ‘‘Foo(0)      // 0Foo(NaN)    // NaNFoo(null)   // nullFoo(false)  // false

補充 ES6 可以這樣給參數設預設值

function Foo(value = ‘default value‘){    return value;}// 替換為預設值Foo(undefined)  // "default value"// 沒有替換；很安全Foo(‘‘)     // ‘‘Foo(0)      // 0Foo(NaN)    // NaNFoo(null)   // nullFoo(false)  // false

2. 綜合利用 邏輯與(&&) 和 邏輯或(||)

function whatDoesItDo(mood){    return mood && "I like this" || "I don‘t like this";}

當 mood 求值結果為 true, 返回 "I like this"（A來代替）
當 mood 求值結果為 false, 返回 "I dont like this"（B來代替）

當 mood 是對象(廣義)，其也會顯示 A。

有點 升級版三元運算子 的感覺；

以上。

 

JavaScript 邏輯與(&&) 與 邏輯或(||) 的邏輯運算規則理解