JS-3: 流程控制全解析

條件語句

• if、else if、else 。
• 用於根據條件執行代碼區塊。

語法：

if (condition) {
    // 當條件為 true 執行
} else if (anotherCondition) {
    // 當另一條件為 true 執行
} else {
    // 當以上條件均不成立時執行
}

let score = 85;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else {
  console.log("Grade: D or below");
}
// 輸出: Grade: B

有時候我們為了更簡潔的寫出條件判斷，我們可以使用三元運算子

特點：

• 適合簡單條件。
• 如果條件複雜，建議使用 if-else。

語法:

condition ? expr1 : expr2;  //條件為真執行 expr1，否則就執行expr2

let age = 20;
let message = age >= 18 ? "You are an adult." : "You are a minor.";
console.log(message); // "You are an adult."

• 三元運算子雖然在某些狀況比較簡潔，但確實有時反而會導致程式碼比較難閱讀。最好視情況，在適合的情況使用。

switch 語句

• 用於多條件選擇。

語法:

switch (expression) {
    case value1:
        // 當 expression === value1 執行
        break;
    case value2:
        // 當 expression === value2 執行
        break;
    default:
        // 當沒有匹配時執行
}

• 記得一定要添加 break，不然程式碼會繼續執行下一個 case 語句的程式碼區塊，導致意外的結果。

let day = 3;
switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  default:
    console.log("Unknown day");
}
// 輸出: Wednesday

迴圈

• for 迴圈：用於固定次數的迴圈。

  for (initialization; condition; increment) {
      // 程式碼
  }

• • 語法:
• while 迴圈：用於條件成立時持續執行。

  while (condition) {
      // 程式碼
  }

• • 語法:
• do...while 迴圈：迴圈至少執行一次再檢查條件。

  do {
      //  程式碼
  } while (condition);

• • 語法:

下圖由左至右分別為for 迴圈、while 迴圈、do...while 迴圈的程式碼執行流程圖，請讀者一定要清楚這些迴圈的運作方式。

範例:

// for 迴圈
for (let i = 0; i < 5; i++) {
  console.log("Iteration:", i);
}
// 輸出: Iteration: 0 到 Iteration: 4

// while 迴圈
let count = 0;
while (count < 3) {
  console.log("Count is:", count);
  count++;
}
// 輸出: Count is: 0 到 Count is: 2

// do...while 迴圈
let x = 0;
do {
  console.log("x is:", x);
  x++;
} while (x < 3);
// 輸出: x is: 0 到 x is: 2

• 若不謹慎控制更新運算式的變數條件，則有可能造成無限迴圈，請讀者注意。