你好！今天想和你聊聊JavaScript中的switch語句，這個在條件判斷中非常實用的工具。它比多個if-else語句更清晰簡潔，特別適合處理多個精確匹配的情況。

基本語法

switch (expression) {
  case value1:
    // 代碼塊1
    break;
  case value2:
    // 代碼塊2
    break;
  // ...
  default:
    // 默認代碼塊
}

工作原理

  1. 首先計算expression的值
  2. 從上到下依次與每個case的值進行嚴格相等比較（===）
  3. 找到匹配的case後執行對應的代碼塊
  4. 如果沒有匹配的case，則執行default（如果存在）
  5. break語句用於跳出switch，防止"穿透"（fall-through）

代碼示例

示例1：根據星期幾顯示中文名稱

// 獲取今天是星期幾（0=星期日，1=星期一，...，6=星期六）
const day = new Date().getDay();
let dayName;

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

console.log(`今天是${dayName}`);

示例2：多個case共享相同代碼塊

const day = new Date().getDay();
let message;

switch (day) {
  case 5: // 星期五
  case 6: // 星期六
    message = "週末快到了！";
    break;
  case 0: // 星期日
    message = "今天是週末，好好休息吧！";
    break;
  default:
    message = "期待週末！";
}

console.log(message);

示例3：隨機選擇示例（使用輔助函數）

// 生成指定範圍內的隨機整數
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 隨機選擇一個圖像名稱
const selectedIndex = getRandomInt(1, 3);
let portrait = '';

switch (selectedIndex) {
  case 1:
    portrait = 'GoldAlt';
    break;
  case 2:
    portrait = 'GoldAlt2';
    break;
  case 3:
    portrait = 'GoldAlt3';
    break;
  default:
    portrait = 'DefaultImage';
}

console.log(`選擇的圖片: ${portrait}`);

重要注意事項

  1. break是關鍵：每個case後通常需要break，否則會"穿透"執行後續case的代碼
  2. 穿透(fall-through)的使用：有時需要故意省略break來實現多個case共享代碼，但要確保有明確註釋
  3. 嚴格比較：switch使用嚴格相等比較（===），所以類型必須匹配
  4. default是可選但推薦：建議總是包含default處理未預期的情況
  5. default位置：default可以放在switch的任何位置，但通常放在最後

常見錯誤

// 錯誤示例：試圖在case後使用條件表達式
switch (x) {
  case (x > 5): // 這是錯誤的！
    console.log("x大於5");
    break;
}

// 正確做法：使用switch(true)或if-else
switch (true) {
  case (x > 5):
    console.log("x大於5");
    break;
  // ...
}

為什麼使用switch？

  • 代碼更清晰：當有多個條件匹配時，比if-else鏈更易讀
  • 邏輯更明確：明確表達了"根據值選擇執行路徑"的意圖
  • 適合枚舉值：當需要處理一組預定義的值時特別有用