邏輯運算子(Logical Operators) 常用來判斷多個條件並回傳結果，有 &&、|| 以及 ! 3種，介紹如下：

&&

&& 用來驗證兩者是否皆為真值

用法：

運算式1 && 運算式2

• 當 運算式1 可轉換為 false，回傳 運算式 1，否則回傳 運算式2
• 當 運算式1、運算式2 都是 true，則回傳 true，否則為 false

若 運算式1 為假值則回傳 運算式1

console.log(0 && 1); // 0

console.log(undefined && 1); // undefined

若 運算式1 為真值則回傳 運算式2

console.log(1 && 0); // 0

console.log(2 && 1); // 1

||

驗證兩者其中一個是否為真值

用法：

運算式1 || 運算式2

• 當 運算式1 可轉換為 true，回傳 運算式 1，否則回傳 運算式2
• 當 運算式1、運算式2 任一為 true，則回傳 true，否則為 false

若 運算式1 為真值則回傳 運算式1

console.log(1 || 0); // 1

若 運算式1 為假值則回傳 運算式2

console.log(0 || 5); // 5

console.log(undefined || 1); // 1

! 否定

邏輯運算子的否定概念

用法：

!值

• 若結果是 true 轉成 false，反之 false 轉成 true

真值轉假值，假值轉真值

console.log(!1); // false

console.log(![]); // false - 物件本為真值

console.log(!0); // true

console.log(!undefined); // ture

邏輯運算子的應用

以下為邏輯運算子的應用：

• 先預設錢有 100 元
• 當執行函式 updateMoney，則把參數帶入
• 使用 parseInt() 方法確保帶入的參數為數值，避免 1+'1' = 11 的情況發生
• 使用 || 邏輯運算子來判斷帶入的參數，避免參數為 undefined、空值
• 將原有的錢與加入的錢相加，最後輸出

const money = 100;

function updateMoney(newMoney) {
    newMoney = parseInt(newMoney) || 100;
    const wellet = money + newMoney;
    console.log(`錢包裡有 ${wellet} 元`);
}

updateMoney(undefined);
// 錢包裡有 200 元

updateMoney(100);
// 錢包裡有 200 元

updateMoney(0);
// 錢包裡有 200 元

但這個例子會有一個問題，就是當代入的參數為 數值0 時，原本要產出的結果應是 錢包裡有 100 元，但因為 || 邏輯運算子 - 前面運算式為假值則回傳後面運算式，所以此例中得出的最終結果會是 錢包裡有 200 元。

若修改這個錯誤，可以加入三元運算式來做修改

• 先使用 || 邏輯運算子來判定，若 newMondy 為真值或 newMondy 為 數值 0，皆會返回 true，否則返回 false
• 若三元運算式條件得出 true，則返回前面的值，否則返回後面

const money = 100;

function updateMoney(newMoney) {
    newMoney = parseInt(newMoney);
    newMoney = (newMoney || newMoney === 0) ? newMoney : 100;
    const wellet = money + newMoney;
    console.log(`錢包裡有 ${wellet} 元`);
}

updateMoney(undefined);
// 錢包裡有 200 元

updateMoney(50);
// 錢包裡有 150 元

updateMoney(0);
// 錢包裡有 100 元

參考文獻

六角學院 - JavaScript 核心篇

MDN - 運算式與運算子