[第四週] JavaScript — 使用邏輯運算子更靈活使用 if

學習目標：邏輯運算子的使用方法及短路性質

關於學習 JavaScript 的筆記，主要源自於以下學習資源：

• [JS101] 用 JavaScript 一步步打造程式基礎
• 現代 JavaScript 教程：逻辑运算符

JavaScript 中三個邏輯運算子

為了讓一開始簡單一些，我們先從 boolean 值來了解基本的邏輯運算子。

|| （或）

• 只要其中有值為 true 即返回 true

console.log( true || true );   //true  真或真 得真
console.log( true || false );  //true  真或假 得真
console.log( false || true );  //true  假或真 得真
console.log( false || false ); //false 假或假 得假

• 多個 ||

console.log( true || true || true );   //true 
console.log( true || false || true );  //true 
console.log( false || true || true);  //true 
console.log( false || false || true ); //true 
console.log( false || false || false ); //false

&&（與）

• 每個值皆為 true 時才返回 true。

console.log( true && true );   //true   真與真 得真
console.log( true && false );  //false  真與假 得假
console.log( false && true );  //false  假與真 得假
console.log( false && false ); //false  假與假 得假

• 多個 &&

console.log( true && true && true );   //true 
console.log( true && false && true );  //false 
console.log( false && true && true );  //false  
console.log( false && false && true ); //false 

!（非）

• 將值轉換布林值後返回相反值。

console.log( !true ); //false
console.log( !false ); //true

• 與 && 、 || 搭配使用

[補充說明]！運算符中的優先級最高，因此總在 || 與 && 前執行
console.log( !false || false || false ); //true
console.log( !true && true && true ); //false
console.log( !false ); //true

應用於 if

在 if 的語句時常需要下很多的判斷的條件，造成巢狀的 if，但這樣會造成程式碼易讀性降低。因此如果可以在一個判斷式中塞入多個條件，就能避免巢狀，我們可以藉由邏輯運算子達到這個目的。

將巢狀 if 改為應用邏輯運算子

• 原程式碼

let a = 20;
if( a < 30 ){
   if( a > 10) {
      console.log("yes");
   } else {
      console.log("no");
      }
} else {
   console.log("no");
}

• 使用邏輯運算子

let a = 20;
if( a > 10 && a < 30 ){
   console.log("yes");
}else{
   console.log("no");
}

兩種方法相較起來，邏輯運算子更清晰

應用於不同型態的資料

雖然被稱作邏輯，但在 JavaScript 中邏輯運算子可以用於任意類型的值，比如數字、字串等，當然回傳的結果也是任意類型。

當操作非 boolean 的型態，會先將其轉化成 boolean 的型態再做判斷

哪些值會被轉化成 false？

• 可以使用 Boolean() 來了解
• 舉例

Boolean(null)
Boolean(undefined)
Boolean(0)
Boolean('')
Boolean(NaN)

當知道哪些值會轉化成 false 之後就可以套用前面的 Boolean 很容易的去使用邏輯運算子。

短路性質 || 、&&

|| （或）

首先要先理解 || 做了什麼事情

• 由左至右依序操作。
• 每個操作將值轉換布林值，假設結果為 true 則停止運算並返回值。
• 若每個操作都被計算過，都無 true 則回傳最後一個值。
• 尋找第一個 true，舉例：以不同型態的值操作

console.log( 1 || 0 ) //1
console.log( 0 || "0" ) //"0"
console.log( null || 1)  //1
console.log( "" || 0 || undefined ) //undefined
console.log( 10 || 4 ) //10
console.log( null || undefined || 0 ) //0

• 實務上的使用技巧，舉例：定義一個提取 Local Storage 的變數，為了要避免第一次提取時會取不到資料（null），因此使用 || 如果無資料（null）就建立空陣列

const array = JSON.parse(window.localStorage.getItem('storage')) || [];

&&（與）

首先要先理解 && 做了什麼事情

• 由左至右依序操作。
• 每個操作將值轉換布林值，假設假設結果為 false 則「停止運算」並返回值。
• 若每個操作都被計算過，都無 false 則回傳最後一個操作值。

console.log( 1 && 5 ) //5  都無 false 則回傳最後一個操作值
console.log( 0 && 5 ) //0  0 為第一個假值，第二個操作直接被忽略

• 尋找第一個 false，舉例：以不同型態的值操作

console.log( 1 && 5 ) //5  都無 false 則回傳最後一個操作值
console.log( 0 && 5 ) //0
console.log( null && 1)  //null
console.log( "" && 0 && undefined ) //""
console.log( null && undefined && 0 ) //null

• 實務上的使用技巧，舉例：代替 if 做簡單的判斷

// 當A == B，才調用stop()
// 以下兩式相等
if (A == B) stop();
(A == B) && stop();

• 補充說明：雖然可以代替，但 if 的可讀性更高，因此建議需要條件判斷時用 if ；需要運算時用 &&

重點整理

• 在 JavaScript 中有三種邏輯運算子：與 && 、或||、 非 !
• 與 && ：
  1. 全部的值皆為 true 時才回傳 true。
  2. 回傳第一個 false 如果沒有 false 就回傳最後一個值。
• 或 || ：
  1. 只要有一個 true 就回傳 true
  2. 回傳第一個 true 如果沒有 true 就回傳最後一個值。
• 非 ！：將其轉化成 Boolean 並回傳相反的 Boolean 值。

以上有錯誤的地方歡迎指正，感謝。