流程控制 if/else 條件判斷

認識完 JavaScript 的基本元素後，我們接下來要學習怎麼控制流程。

這裡介紹三種 JavaScript 控制流程的方式：

if / else
switch case
三元運算子

首先，讓我們先來學習如何利用 if / else 判斷式來進行流程控制。

使用 if / else 進行流程控制

JavaScript 的流程控制中常常會用到 if 判斷式，一個 if 的語法的結構，除了關鍵字 if 、小括號 ( )、和大括號 { } 外，還有以下兩個要素：

條件 (condition)：判斷式（如 number == 5）。
執行步驟 (statements)：對應結果所要執行的程式碼（如 console.log("X is 5")）。

if 可以搭配 else、else if 使用，然而在 if / else 流程控制小括號裡條件成立下，大括號的程式才會被執行；我們將透過一些範例來仔細理解這些判斷式用法。

if … 判斷式

if 就是如果的意思，如果判斷式的結果為 true，則執行大括號裡的程式碼。

以下為範例程式碼：

let number = 2;
if (number < 5) {
  console.log("Number is smaller than 5");
}

if … else … 二分法判斷式：A 或非 A

如果條件為 true（A），則印出：number is 5，否則就執行 else （非A）大括號裡的程式碼，印出 number is not 5。

以下為範例程式碼：

if (number === 5) {
  console.log("number is 5");
} else {
  console.log("number is not 5");
}

if … else if … 判斷兩種情況：A 或 B

需要判斷的條件若超過二種或以上，也可以使用 else if 來增加條件判斷。以下為範例程式碼：

if (number > 5) {
  console.log("number is bigger than 5");
} else if (number < 5) {
  console.log("number is smaller 4");
}

if … else if … else 三分法判斷式：A 或 B 或「非A非B」

使用 if else if 和 else 來組合出更多的判斷，幫助我們進行流程控制。

當 if 的結果為 false 就繼續判斷 else if，判斷的結果再為 false 就繼續判斷 else。

以下為範例程式碼：

if (number > 5) {
  console.log("number is bigger than 5");
} else if (number < 5) {
  console.log("number is smaller 4");
} else (number === 5) {
  console.log("number is equal to 5");
}

多個 else if 參雜其中的邏輯判斷式

也可以使用多個 else if 語法在 if 和 else 的中間，進行更多種情況的判斷。

以下為範例程式碼：

if (number === 5) {
  console.log("number is 5");
} else if (number === 4) {
  console.log("number is 4");
} else if (number === 3) {
  console.log("number is 3");
} else if (number === 2) {
  console.log("number is 2");
} else if (number === 1) {
  console.log("number is 1");
} else {
  console.log("number is not 1 to 5");
}

使用 switch case 進行流程控制

當 if / else 的條件太多時，我們可以使用 case 來敘述表達一連串的條件判斷與回應。在 switch case 的結構裡有以下三個要素：

變數 (variable)：用途為判斷（例如 number）。
變數的值 (value)：用途為比較變數（例如 case 右邊的 5）。
程式碼 (statements)：根據不同變數的值所要執行的程式碼（例如 console.log("number is 5 ");）。

接著，我們要特別介紹 break 這個語法，由於 switch case 不同於 if else 語法，沒有大括號限制「執行步驟 (statement)」的範圍，所以如果我們不希望繼續執行下一個 case 的判斷，我們就可以在 statement 後加上 break 來結束整個 switch case，如果沒有退出，則會往下個 case 進行判斷。

然而，如果程式都找不到適合的 case 數值，我們可以設計 default 來判斷其餘的所有狀況， default 為預設語法，其效果和 else 一樣，用來判斷不屬於以上所有可能性的數字。

以下為範例程式碼：

switch (number) {
  case 5:
    console.log("number is 5 ");
    break;
  case 4:
    console.log("number is 4 ");
    break;
  case 3:
    console.log("number is 3 ");
    break;
  case 2:
    console.log("number is 2 ");
    break;
  case 1:
    console.log("number is 1 ");
    break;
  default:
    console.log("number is not 1 to 5");
}

接下來，我們要認識一個特別的流程控制判斷式！

使用三元運算子進行流程控制

我們先來看看三元運算子的語法結構，有以下兩個要素：

條件 (condition)：問號 ?左邊的邏輯判斷式（例如 x > 2）。
程式碼 (statements)：使用冒號 : 區隔邏輯判斷式結果為 true 和 false 各要執行的程式碼。

當只有兩種相反的結果時，我們可以用問號 ? 進行二分法判斷。

例如剛剛看過的例子：

if (number > 5) {
  console.log("number is bigger than 5");
} else if (number < 5) {
  console.log("number is smaller 4");
}

可以改寫成：

let number = 3;
number > 5 ? console.log("number is bigger than 5") : console.log("number is smaller 5");
//印出 “number is smaller 4”

上面這段程式碼翻成白話文就是：如果數字大於五，就幫我印 “number is bigger than 5” ，否則，就幫我印 “number is smaller 5” 。

五行程式碼瞬間變成一行，是不是很簡潔呢？

學習如何使用判斷式進行流程控制後，我們要來學習使用迴圈來重複執行程式！