JavaScript switch 語法

switch (expression) {
  case value_1:
    statements_1
    [break;]
  case value_2:
    statements_2
    [break;]
    ...
  default:
    statements_def
    [break;]
}

JavaScript 遇到 switch 語句會先執行指定的 expression 語句，然後用執行 expression 得到的值，去跟所有 case 的值做比較，如果相等就執行這個 case 區塊的程式碼，都不相等則執行 default 區塊的程式碼。

舉一個例子：

switch (fruitType) {
    case 'Oranges':
        alert('Oranges');
        break;
    case 'Apples':
        alert('Apples');
        break;
    case 'Bananas':
        alert('Bananas');
        break;
    case 'Cherries':
        alert('Cherries');
        break;
    case 'Mangoes':
        alert('Mangoes');
        break;
    case 'Papayas':
        alert('Papayas');
        break;
    default:
        alert('沒有符合的條件');
}

在上面的例子中，如果 fruitType 變數的值是 Apples，則會執行 case 'Apples' 區塊的程式碼；如果 fruitType 變數的值是 Mangoes，則會執行 case 'Mangoes' 區塊的程式碼；如果 fruitType 的值都不在指定的 case 裡面，則執行 default 區塊的程式碼。

你也可以省略 default 區塊，表示如果找不到相符的 case，則跳過整個 switch 區塊什麼不執行。

break 關鍵字

在上面你有看到我們用了 break，那 break 的用途是什麼呢？當 JavaScript 執行到 break 這個關鍵字的時後，就會直接跳出整個 switch 區塊，繼續往下執行。

而如果沒有 break 則程式會從符合的 case 區塊開始，一路往下執行到遇到 break 為止！

例如上面的例子，我們拿掉 Apples 和 Bananas 區塊裡面的 break，則如果 fruitType 是 Apples 的時候，會同時執行 Apples, Bananas 和 Cherries 區塊，直到碰到 Cherries 區塊中的 break 為止才會跳出整個 switch 區塊：

switch (fruitType) {
    case 'Oranges':
        alert('Oranges');
        break;
    case 'Apples':
        alert('Apples');
    case 'Bananas':
        alert('Bananas');
    case 'Cherries':
        alert('Cherries');
        break;
    case 'Mangoes':
        alert('Mangoes');
        break;
    case 'Papayas':
        alert('Papayas');
        break;
    default:
        alert('沒有符合的條件');
}

這種行為我們稱做 Fall-Through。我們可以利用這個特性，撰寫像是這類程式碼：

switch (new Date().getDay()) {
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        alert('工作天 :(');
        break;
    case 6:
    case 0:
        alert('週末 :)');
}