JS 中的邏輯運算子

要吃早餐發表於2018-06-25
JS

邏輯運算子通常用於Boolean型值。不過 &&和||運算子實際上返回一個指定運算元的值，因此也可用於非布林型，返回一個非布林型值。\

描述

運算子 示例 說明
邏輯與( && ) expr1 && expr2 如果 expr1 能轉化為 false則返回 expr1, 否則返回 expr2。與布林值一起使用時，兩個運算元都返回 true，則返回 true，否則返回 false
邏輯或( || ) expr1 || expr2 如果 expr1 能轉化為 true則返回 expr1, 否則返回 expr2。與布林值一起使用時，有一個運算元返回 true，則返回 true，兩個運算元都返回false則返回 false
邏輯非( ! ) !expr 如果 expr能轉為 true 則返回 false。如果expr能轉為 false 則返回 true
如果一個值可以被轉換為 `true` ,那麼這個值就是所謂的 truthy, 如果可以被轉換為 `false`，那麼這個值就是所謂的 falsy。\ 能夠轉換為 false 的表示式有：
  • null
  • NaN
  • 0
  • 空字串''
  • undefined

短路計算
由於邏輯表示式的運算順序是從左到右，也可以用一下規則進行"短路"計算：

  • false && (anything)短路計算的結果為 假。
  • true || (anything)短路計算的結果為 真。

下面示例中程式碼中的兩個函式是相等的。

function aa () {
    doSoming() || doElseSoming();
    
    doSoming() && doElseSoming();
}
function bb () {
    let orFlag = doSoming();
    if (!orFlag) {
        doElseSoming();
    }
    
    let andFlag = doSoming();
    if (andFlag) {
        doElseSoming();
    }
}
複製程式碼

由於運算子優先順序的存在，下面的表示式的結果就不一樣了。小括號括起來的部分變為了獨立的表示式。

false && true || true     // 結果為 true
false && (true || true)   // 結果為 false
複製程式碼

邏輯與( && )
下面的程式碼是 && 運算子的示例

a1 = true && true      // true
a2 = true && false     // false
a3 = false && true     // false
a4 = false && (3==4)   // false
a5 = "cat" && "Dog"    // Dog
a6 = false && "cat"    // false
a7 = "cat" && false    // false
複製程式碼

邏輯或( || )
下面的程式碼是||運算子的示例

a1 = true || true     // true
a2 = true || false    // true
a3 = false || true    // true
a4 = false || (3==4)  // false
a5 = "cat" || "dog"   // cat
a6 = false || "cat"   // cat
a7 = "cat" || false   // cat
複製程式碼

邏輯非( ! )
下面的程式碼是!運算子的示例

n1 = !true     // false
n2 = !false    // true
n3 = !"cat"    // false
複製程式碼

轉換規則
將 && 轉換為 ||

aa && bb 
// 等於
!(!aa || !bb);
複製程式碼

將 || 轉換為 &&

aa || bb
// 等於
!(!aa && !bb)
複製程式碼

刪除巢狀的小括號
刪除巢狀的 &&

aa || (bb && cc)
// 等於
aa || bb && cc
複製程式碼

刪除巢狀的 ||

aa && (bb || cc)
// 等於
!(!aa || !bb && !cc);
複製程式碼

詳情參考 MDN

相關文章