JavaScript 邏輯運算子


邏輯運算子 (Logical Operators)

邏輯運算子用來做布林值 (boolean) 的運算，運算結果傳回 true 或 false。

運算子 語法 說明
&& a && b 如果 a 和 b 都是 true，就會傳回 true， 否則傳回 false
|| a || b 如果 a 或 b 是 true，就會傳回 true，否則傳回 false
! ! a 如果 a 是 true，就傳回 false，否則傳回 true

在真假判斷式中，所有東西都可以轉換為布林值，而除了以下運算元可以被轉換為 false，其他的值都是 true。

  • Undefined

  • Null

  • +0, -0, or NaN

  • 空字串 "" 或 ''

1
2
3
4
5
Boolean(false)      // false
Boolean("false")    // true
Boolean("0")        // true
Boolean("")         // false
Boolean("''")       // true

但 && 和 || 還有比較特別的地方，如果運算元的值不是布林值，實際上會傳回其中一個運算元的值。

運算子 語法 說明
&& a && b 假如 a 可以被轉換成 true 的話，則回傳第二個數值，否則回傳第一個數值。
|| a || b 假如 a 可以被轉換成 true 的話，則回傳第一個數值，否則回傳第二個數值。

範例


Logical AND (&&)

1
2
3
4
5
6
7
8
9
a1 = true  && true       // t && t returns true
a2 = true  && false      // t && f returns false
a3 = false && true       // f && t returns false
a4 = false && (3 == 4)   // f && f returns false
a5 = 'Cat' && 'Dog'      // t && t returns "Dog"
a6 = false && 'Cat'      // f && t returns false
a7 = 'Cat' && false      // t && f returns false
a8 = ''    && false      // f && f returns ""
a9 = false && ''         // f && f returns false

Logical OR (||)

1
2
3
4
5
6
7
8
9
10
o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 == 4)   // f || f returns false
o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
o6 = false || 'Cat'      // f || t returns "Cat"
o7 = 'Cat' || false      // t || f returns "Cat"
o8 = ''    || false      // f || f returns false
o9 = false || ''         // f || f returns ""
o10 = false || varObject // f || object returns varObject

Logical NOT (!)

1
2
3
4
n1 = !true               // !t returns false
n2 = !false              // !f returns true
n3 = !''                 // !f returns true
n4 = !'Cat'              // !t returns false

Double NOT (!!)

1
2
3
4
5
6
n1 = !!true                   // !!truthy returns true
n2 = !!{}                     // !!truthy returns true: any object is truthy...
n3 = !!(new Boolean(false))   // ...even Boolean objects with a false .valueOf()!
n4 = !!false                  // !!falsy returns false
n5 = !!""                     // !!falsy returns false
n6 = !!Boolean(false)         // !!falsy returns false

參考文獻

  1. https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_operators

  2. https://ithelp.ithome.com.tw/articles/10191343

  3. https://www.fooish.com/javascript/operator.html