[第四週] JavaScript — 根據不同條件執行不同操作 if 、?、switch

學習目標：了解 if 、?、switch 的用法

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

• [JS101] 用 JavaScript 一步步打造程式基礎
• 現代 JavaScript 教程：条件运算符：if 和 ‘?’
• 現代 JavaScript 教程：”switch” 语句

根據不同的條件執行不同的操作，以前國小作業造句這題就很簡單的說明了條件判斷的用法「如果…. 就….」，而在程式中的條件更為簡單一些，只有兩種結果「是」或「否」。如果「是」就….；如果「不是」就…。

JavaScript 中的條件運算

一共有三種： if 、?、switch，而最常使用到是 if ，原因在於可以執行更複雜的動作，且可讀性較高，所以是當中最重要的。其他兩種的使用情境為：如果執行的動作簡單並且不需要多種條件判斷時，可以使用 ?；如果條件是固定的並且有多種結果時，可以使用 switch。

if 判斷

• 寫法

if( 執行條件 ) { 回傳 true 執行此區塊代碼 }

• 括號裡的是執行條件，可以使用「相等性檢查」來或「布林轉換檢查」。

相等性檢查

• 相等時回傳 true；不相等時回傳 false
• 可以運用「相等性運算子（equality）」及「比較運算子（comparison）」來做檢查。 # [第三週]JavaScript — Operator 運算子
• 舉例

//相等性運算子（equality）
var thisYear = 2020
if( thisYear === 2020) {
   console.log("今年是 2020 年")
}
//比較運算子（comparison）
if( 20 < 100 ){
   console.log("20 小於 100")
}
[補充說明]
在使用相等性運算子做檢查時，建議使用嚴格相等性檢查，才不會造成型別不同卻回傳 true 的情況

布林轉換檢查

• 會將執行條件會使用「函式表示式（Expression）」並將得到的值轉換為布林值 true、false。
• 資料型別轉換規則：
  1. 數字 0、空字串符 ""、null、undefine 和 NaN 都會被轉換成 false。
  2.其他的值都會轉換成 true。
• 舉例

if (0) { …. } // 0 是 false，不執行。
if (1) { …. } // 1 是 true，執行。

• 情況一、將相等性檢查放入 variable 中，將 variable 放入 if 中判斷

let year = prompt("今年是西元幾年？",""); // user 回傳值。
let ans = ( year == 2020 ); //將相等性檢查放入 variable。
if( ans ){ //將 variable 放入 if 中判斷。
alert("你答對了！今年是 2020 年。");
}

設定「條件不成立」時的操作if( … ){}else( … ){}

• 舉例

if( a + b > 100 ) {
console.log("總和超過 100!");
}else {
console.log("總和不足 100!");
}

有時候會需要設定多個條件 if( … ){}else if( … ){}else{}

• 舉例

let year = prompt("今年是西元幾年？","") ;
if( year < 2020 ){ //檢查第一個條件 true 運行；false 跳到下一個條件
   alert(“時間再更晚”);
}else if ( year > 2020 ){ //檢查第二個條件 true 運行；false 跳到下一個條件
   alert("時間再更早");
}else{ //所有條件都不符合時執行
   alert("你答對了！今年是 2020 年。");
}

可以設定很多個 else if，結尾的 else 不是必須。

條件運算子 ？

• 也被稱為三元運算子（Ternary）。
• 如果執行的動作簡單並且不需要多種條件判斷使用。
• 寫法

 condition ? value1 : value2;
// 計算結果為 true 返回 value1 否則返回 value2。

• 舉例

var cont = 10
var prompt = cont <= 0 ? "已無存貨" : "尚有存貨"

注意！不要用 條件運算子 代替 if

原因有以下幾點

1. 條件運算子不易閱讀。
2. 條件運算子只能回傳純值， if 可以進行更複雜的執行。

switch 語句

• 條件是固定的並且有多種結果時可以使用
• 寫法

switch(值) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  [default]:
    ...
    [break]
}

• 至少會有一個 case 。
• 每個 case 後面需要加上 break 才不會進入到下一個 case 當中。
• 可以設定 default ，同 if 的 else 。
• 舉例

var date = 1;
switch(date) {
   case 1:
      console.log('星期一');
      break;
   case 2:
      console.log('星期二');
      break;
   case 3:
      console.log('星期三');
      break;
   default:
      console.log('假日');
}