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


邏輯與(&&)

邏輯與(&&)操作可以應用於任何的操作類型,不僅僅是布爾值,

在有一個操作數不是布爾值的情況下,&&操作符就不一定返回布爾值:遵循下面規則:

1.如果第一個操作數是對象(廣義),則返回第二個操作數
1alert('GeCan' && null)      // null
2alert('GeCan' && NaN)       // NaN
3alert('GeCan' && 0)         // 0
4alert('GeCan' && false)     // false
5alert('GeCan' && 'GeCan')   // "GeCan"
6alert('GeCan' && undefined// undefined
7alert('0' && 'GeCan')       // 'GeCan'
8alert(1 && 'GeCan')         // 'GeCan'
2.如果第二個操作數是對象,只有在第一個操作數求值為 true 的情況下才返回該對象

第一個操作數求值為 true;返回該對象

---當第一個操作數是對象,也返回該對象(參考第一點)

1alert(true && 'GeCan')      // 'GeCan'

---否則直接返回第一個數(短路操作)

1alert(null && 'GeCan')      // null
2alert(NaN && 'GeCan')       // NaN
3alert(0 && 'GeCan')         // 0
4alert(false && 'GeCan')     // false
5alert(undefined && 'GeCan'// undefined
6alert('' && 'GeCan')        // '';

---注意,當第一個操作數求值為 true, 但第二個操作數未定義時,會報錯

1alert(true && someUndefinedVariable) // error;someUndefinedVariable is not defined
3.如果兩個都是對象返回第二個(與上面規則有點重復)
4.如果有一個操作數是 null, NaN,0,false 或 undefined 或 '',則返回它們自己

---第一種情況,這些操作符在第一個,參照上面第2條規則的第一點,直接返回它們自己(短路);

---第二種情況,這些操作符在第二個(第一個操作符求值為 true 之后),也返回它們自己;

1alert(true && null)      // null
2alert(true && NaN)       // NaN
3alert(true && 0)         // 0
4alert(true && false)     // false
5alert(true && undefined// undefined
6alert(true && '')        // ''

上述規則總結

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


邏輯或(||)

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

1.第一個是對象,就返回第一個(短路)
1alert('GeCan' || undefined// "GeCan"
2alert('GeCan' || 'KaiKai')  // "GeCan"
2.第一個是 false, null, NaN ,0 或 undefined 或 '',則返回第二個操作數;

---第一個操作數求值結果為 false; 返回第二個操作數

1alert(false || null)      // null
2alert(false || NaN)       // NaN
3alert(false || 0)         // 0
4alert(false || false)     // false
5alert(false || 'GeCan')   // "GeCan"
6alert(false || undefined// undefined

---注意,當第一個操作數求值為 false,但第二個操作數未定義時,會報錯

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

第一個是 null; 返回第二個操作數

1alert(null || null)       // null
2alert(null || NaN)        // NaN
3alert(null || 0)          // 0
4alert(null || false)      // false
5alert(null || 'GeCan')    // "GeCan"
6alert(null || undefined)  // undefined

第一個是 NaN; 返回第二個操作數

1alert(NaN || NaN)         // NaN
2alert(NaN || null)        // null
3alert(NaN || 0)           // 0
4alert(NaN || false)       // false
5alert(NaN || 'GeCan')     // 'GeCan'
6alert(NaN || undefined)   // undefined

第一個是 0;返回第二個操作數

1alert(0 || null)          // null
2alert(0 || NaN)           // NaN
3alert(0 || 0)             // 0
4alert(0 || false)         // false
5alert(0 || 'GeCan')       // "GeCan"
6alert(0 || undefined)     // undefined

第一個是 undefined; 返回第二個操作數

1alert(undefined || null)       // null
2alert(undefined  || NaN)       // NaN
3alert(undefined || 0)          // 0
4alert(undefined  || false)     // false
5alert(undefined  || 'GeCan')   // "GeCan"
6alert(undefined  || undefined// undefined

第一個是 ''; 返回第二個操作數

1alert('' || null)       // null
2alert(''  || NaN)       // NaN
3alert('' || 0)          // 0
4alert(''  || false)     // false
5alert(''  || 'GeCan')   // "GeCan"
6alert('' || undefined)  // undefined

上述規則總結,

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


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

邏輯與(&&)

看左邊的值是真還是假,如果是真,返回的是右邊的值,如果是假返回的是左邊的值
(只有 false 、0、NaN、null、undefined、空字符串為假, 其余都是真)

邏輯或(||)

看左邊的值是真還是假,如果是真,返回的是左邊的值,如果是假返回的是右邊的值
(只有 false 、0、NaN、null、undefined、空字符串為假, 其余都是真)


邏輯運算的應用

1.利用邏輯或(||)
例子一 操作DOM

如果變量的值 不是 false, null, NaN ,0 或 undefined 或 '',則傳入該變量;

 1function addMessage(message){
2    message = message || 'default message';
3
4    var el = document.createElement('p');
5    el.innerHTML = message;
6
7    document.body.appendChild(el);
8}
9
10addMessage(); // 操作默認參數
11addMessage('hello world'// 操作我們傳入的參數

---謹慎使用 || 填充默認值 !!!

例子二
1function Foo(value){
2    value = value || 'default value';
3    return value;
4}
5
6Foo() // 'default value' ;傳遞默認參數
7Foo('你好'// '你好'

注意:這里傳入 false, null, NaN ,0 或 undefined 或 '' 等值,都會使用第二個默認參數!!!

然而實際上只有 undefined 這一種情況才應該被認為是用戶沒有指定其值,需要使用后備的默認值。

改進版本

1function Foo(value){
2    value = value !== undefined ? value : 'defaule value';
3    return value;
4}

通過這種方式給參數設置默認值,只有在傳入 undefined,它的值才會被強制替換為默認值

1Foo(undefined)  // "defaule value"
2//以下這些值,都不會被強制替換 (安全了許多!!!) 
3Foo('')     // ''
4Foo(0)      // 0
5Foo(NaN)    // NaN
6Foo(null)   // null
7Foo(false)  // false

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

 1function Foo(value = 'default value'){
2    return value;
3}
4// 替換為默認值
5Foo(undefined)  // "default value"
6// 沒有替換;很安全
7Foo('')     // ''
8Foo(0)      // 0
9Foo(NaN)    // NaN
10Foo(null)   // null
11Foo(false)  // false
2.綜合利用 邏輯與(&&) 和 邏輯或(||)
例子一
1function whatDoesItDo(mood){
2    return mood && "I like this" || "I don't like this";
3}

當 mood 求值結果為 true, 返回 "I like this"(A來代替)

當 mood 求值結果為 false, 返回 "I dont like this"(B來代替)

當 mood 是對象,其也會顯示 A。

有點 升級版三元運算符 的感覺;

例子二
1...
2this.canSeen(imglist[i]) && this.loadImage(imglist[i]i);
3...

縮寫,相當於if true

當第一個函數返回的布爾值為true,那么調用第二個函數

1...
2if(this.canSeen(imglis[i])) {
3    this.loadImage(imglist[i], i)
4}
5...

---以上---


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM