JavaScript 邏輯與(&&) 與 邏輯或(||) 的邏輯運算規則理解
邏輯與(&&)
邏輯與(&&)操作可以應用於任何的操作類型,不僅僅是布爾值,
在有一個操作數不是布爾值的情況下,&&操作符就不一定返回布爾值:遵循下面規則:
1. 如果第一個操作數是對象(廣義),則返回第二個操作數
alert(‘GeCan‘ && null) // null alert(‘GeCan‘ && NaN) // NaN alert(‘GeCan‘ && 0) // 0 alert(‘GeCan‘ && false) // false alert(‘GeCan‘ && ‘GeCan‘) //"GeCan" alert(‘GeCan‘ && undefined) // undefined alert(‘0‘ && ‘GeCan‘) // ‘GeCan‘ alert(1 && ‘GeCan‘) // ‘GeCan‘
2. 如果第二個操作數是對象,只有在第一個操作數求值為 true 的情況下才返回該對象
第一個操作數求值為 true;返回該對象
// 當第一個操作數是對象,也返回該對象(參考第一點)
alert(true && ‘GeCan‘) // ‘GeCan‘ 否則直接返回第一個數(短路操作) alert(null && ‘GeCan‘) // null alert(NaN && ‘GeCan‘) // NaN alert(0 && ‘GeCan‘) // 0 alert(false && ‘GeCan‘) // false alert(undefined && ‘GeCan‘) // undefined alert(‘‘ && ‘GeCan‘) // ‘‘;
註意,當第一個操作數求值為 true, 但第二個操作數未定義時,會報錯
alert(true && someUndefinedVariable) //error;someUndefinedVariable is not defined
3. 如果兩個都是對象返回第二個(與上面規則有點重復)
4.如果有一個操作數是 null, NaN,0,false 或 undefined 或 ‘‘,則返回 它們自己
第一種情況,這些操作符在第一個,參照上面第2條規則的第一點,直接返回它們自己(短路);
第二種情況,這些操作符在第二個(第一個操作符求值為 true 之後),也返回它們自己
alert(true && null) // null alert(true && NaN) // NaN alert(true && 0) // 0 alert(true && false) // false alert(true && undefined) // undefined alert(true && ‘‘) // ‘‘
上述規則總結,
邏輯與(&&) 看左邊的值是真還是假,如果是真,返回的是右邊的值,如果是假返回的是左邊的值;
(只有 false 、0、NaN、null、undefined、空字符串為假, 其余都是真)
---------------------------------------------------------------------------------------------------------------------------
邏輯或(||)
邏輯或(||) 和 邏輯與(&&) 的操作相類似只要有一個不是布爾值,||也不一定返回布爾值,遵循下面規則:
1. 第一個是對象,就返回第一個(短路)
alert(‘GeCan‘ || undefined) // "GeCan" alert(‘GeCan‘ || ‘KaiKai‘) // "GeCan"
2. 第一個是 false, null, NaN ,0 或 undefined 或 ‘‘,則返回第二個操作數;
·第一個操作數求值結果為 false; 返回第二個操作數
alert(false || null) // null alert(false || NaN) // NaN alert(false || 0) // 0 alert(false || false) // false alert(false || ‘GeCan‘) // "GeCan" alert(false || undefined) // undefined
註意,當第一個操作數求值為 false,但第二個操作數未定義時,會報錯
alert(false || someUndefinedVariable); // error; someUndefinedVariable is not defined
·第一個是 null; 返回第二個操作數
alert(null || null) // null alert(null || NaN) // NaN alert(null || 0) // 0 alert(null || false) // false alert(null || ‘GeCan‘) // "GeCan" alert(null || undefined) // undefined
·第一個是 NaN; 返回第二個操作數
alert(NaN || NaN) // NaN alert(NaN || null) // null alert(NaN || 0) // 0 alert(NaN || false) // false alert(NaN || ‘GeCan‘) // ‘GeCan‘ alert(NaN || undefined) // undefined
·第一個是 0;返回第二個操作數
alert(0 || null) // null alert(0 || NaN) // NaN alert(0 || 0) // 0 alert(0 || false) // false alert(0 || ‘GeCan‘) // "GeCan" alert(0 || undefined) // undefined
·第一個是 undefined; 返回第二個操作數
alert(undefined || null) // null alert(undefined || NaN) // NaN alert(undefined || 0) // 0 alert(undefined || false) // false alert(undefined || ‘GeCan‘) // "GeCan" alert(undefined || undefined) // undefined
·第一個是 ‘‘; 返回第二個操作數
alert(‘‘ || null) // null alert(‘‘ || NaN) // NaN alert(‘‘ || 0) // 0 alert(‘‘ || false) // false alert(‘‘ || ‘GeCan‘) // "GeCan" alert(‘‘ || undefined) // undefined
上述規則總結,
邏輯或(||) 首先看左邊的值是真還是假,如果是真,返回的是左邊的值,如果是假返回的是右邊的值
(只有 false 、0、NaN、null、undefined、空字符串為假, 其余都是真)
----------------------------------------------------------------------------------------------------------------------------
因此關於 邏輯與(&&) 與 邏輯或(||) 只要記住下面兩條規則就夠了:
邏輯與(&&)
看左邊的值是真還是假,如果是真,返回的是右邊的值,如果是假返回的是左邊的值;
(只有 false 、0、NaN、null、undefined、空字符串為假, 其余都是真)
邏輯或(||)
看左邊的值是真還是假,如果是真,返回的是左邊的值,如果是假返回的是右邊的值
(只有 false 、0、NaN、null、undefined、空字符串為假, 其余都是真)
---------------------------------------------------------------------------------------------------------------------------
邏輯運算的應用
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) // 0 Foo(NaN) // NaN Foo(null) // null Foo(false) // false
補充 ES6 可以這樣給參數設默認值
function Foo(value = ‘default value‘){ return value; } // 替換為默認值 Foo(undefined) // "default value" // 沒有替換;很安全 Foo(‘‘) // ‘‘ Foo(0) // 0 Foo(NaN) // NaN Foo(null) // null Foo(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 邏輯與(&&) 與 邏輯或(||) 的邏輯運算規則理解