iT邦幫忙

2025 iThome 鐵人賽

DAY 18
0
Modern Web

30天絕望倒數JavaScript系列 第 18

JavaScript Switch Statement

  • 分享至 

  • xImage
  •  

介紹

在 JavaScript 中,switch 陳述句用來根據 不同的值 執行 不同的程式區塊。
它是一種比 if...else if...else 更清晰的多條件判斷方式。

語法

switch (expression) {
  case value1:
    // 如果 expression === value1,執行這段程式碼
    break;

  case value2:
    // 如果 expression === value2,執行這段程式碼
    break;

  default:
    // 如果以上條件都不符合,執行這段程式碼
}

關鍵點

  1. switch 會比對 expression 與每個 case 的值 (使用嚴格比較 ===)。
  2. break 用來 跳出 switch,否則會繼續執行下一個 case(稱為 fall-through)。
  3. default 是可選的,當沒有符合的條件時會執行

範例 1:星期判斷

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "星期一";
    break;
  case 2:
    dayName = "星期二";
    break;
  case 3:
    dayName = "星期三";
    break;
  case 4:
    dayName = "星期四";
    break;
  case 5:
    dayName = "星期五";
    break;
  case 6:
    dayName = "星期六";
    break;
  case 7:
    dayName = "星期日";
    break;
  default:
    dayName = "未知的日子";
}

console.log(dayName); // 輸出:星期三

範例 2:Fall-through 行為

let fruit = "apple";

switch (fruit) {
  case "apple":
  case "banana":
    console.log("這是一個水果");
    break;

  case "carrot":
    console.log("這是一個蔬菜");
    break;

  default:
    console.log("未知的食物");
}

在這個例子中,如果 fruit 是 "apple" 或 "banana",結果都會輸出 這是一個水果。

範例 3:沒有 break 的結果

let score = 2;

switch (score) {
  case 1:
    console.log("一分");
  case 2:
    console.log("兩分");
  case 3:
    console.log("三分");
  default:
    console.log("結束");
}

輸出結果:
兩分
三分
結束
因為沒有 break,程式會從符合的 case 開始,一路執行到底。

結論

  • switch 適合處理多個 固定值的比對。
  • 建議每個 case 使用 break,避免意外 fall-through。
  • 若情境複雜或條件非等值比對,建議使用 if...else if...else。

上一篇
JavaScript 條件 (三元) 運算子
系列文
30天絕望倒數JavaScript18
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言