0%

JS 邏輯運算子

3 分鐘閱讀時間
此篇透過邏輯運算子切入學習真值（truthy）、假值（falsy）。

此篇透過邏輯運算子切入學習真值（truthy）、假值（falsy）。

邏輯運算子 (Logical Operators)

三種常見邏輯運算子介紹

最常見用途為 if 判斷式並搭配 比較運算子 一起使用，透過 邏輯運算子 回傳運算結果為 true 或 false。

|| 邏輯運算子 OR

Logical OR：其中一側為 true 就會回傳 true，兩個皆為 false 才會回傳 false。

1
2
3
if (3 === 3 || 1 == '2') {
  console.log('true');
}

&& 邏輯運算子 AND

Logical AND：其中一側為 false 就會回傳 false，兩個皆為 true 才會回傳 true。

1
2
3
if (3 === 3 && 2 == '2') {
  console.log('true');
}

! 邏輯運算子 NOT

Logical NOT：將布林值反向。

將非布林變數自動轉型為布林值的特性，衍伸出另一種用法 !! 將型別轉型為布林 達到和 Boolean(變數) 相同效果。

1
2
3
console.log(!true); // false
console.log(!!'');  // false
console.log(!!'a'); // true

型別轉換過程解析

邏輯運算子 tips

  1. JS 中邏輯運算子僅支援符號寫法，不支援英文寫法。
  2. 依照權重高低，有優先順序。（運算子優先順序 operator precedence）

真值（truthy）、假值（falsy）

JS 將轉換為布林型別後為 true 的值稱為 真值（truthy)，false 的值稱為 假值 (falsy)。

類型定義

  • 假值：
    • false
    • null
    • NaN
    • 0、-0
    • 空字串 (“” 或 ‘’ 或 ``)
    • undefined
  • 真值：
    • 除了上述假值類型以外的值都是真值。

常見用法：判斷是否有值

在函數前方做資料判斷是否為空的防呆機制，判斷是否為我們預期的資料型別，不是的話 retuen 回去讓程式不再往下執行。

1
2
3
4
5
6
7
8
9
10
11
function isAdult(age) { 
  // 判斷是否為假值
  if (!age) {
    return '資料錯誤';
  }
  return age >= 18 ? '已成年' : '未成年';
}

isAdult(null); // 資料錯誤
isAdult(18);   // 已成年
isAdult(17);   // 未成年

運算子並非只能回傳 true、false，在 javascript 中邏輯運算子也能回傳非布林的值。（有興趣可以參考這篇短路求值介紹，其中有示範操作非布林的值的方法）

真值表：依照嚴格程度排序不同的比較子（紅色最嚴格、灰色最寬鬆）
src: https://thomas-yang.me/projects/oh-my-dear-js/

conclusion

1.運算子優先順序 operator precedence

理解優先順序 ! > && > || > ?? 邏輯運算子用起來沒煩惱。

1
2
console.log(true || false && false)    // true → (true || false)
console.log((true || false) && false)  // false → (true && false)

2.括號內會強制轉型

if 判斷式會將 括號 內變數 強制轉型 成布林值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if (1) {
  console.log('true') // true
}

if ('1') {
  console.log('true') // true
}

if ('0') {
  console.log('true') // true
}

if (!0) {
  console.log('true') // true
}

reference