2022 年 4 月 25 日

「switch」語法

switch 語法可以取代多個 if 檢查。

它提供更具描述性的方式來比較一個值與多個變異。

語法

switch 有多個 case 區塊和一個可選的預設值。

它看起來像這樣

          switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}
        

x 的值會檢查是否與第一個 case（也就是 value1）的值嚴格相等，然後再檢查第二個（value2），以此類推。
如果找到相等的值，switch 會從對應的 case 開始執行程式碼，直到最近的 break（或直到 switch 的結尾）。
如果沒有匹配的 case，則會執行 default 程式碼（如果存在）。

範例

switch 的範例（執行中的程式碼以反白顯示）

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
    break;
  case 4:
    alert( 'Exactly!' );
    break;
  case 5:
    alert( 'Too big' );
    break;
  default:
    alert( "I don't know such values" );
}

這裡的 switch 開始將 a 與從第一個 case 變體（即 3）開始的變體進行比較。比對失敗。

然後是 4。這符合，因此執行從 case 4 開始，直到最近的 break。

如果沒有 break，則執行會繼續執行下一個 case，而不會進行任何檢查。

沒有 break 的範例

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
  case 4:
    alert( 'Exactly!' );
  case 5:
    alert( 'Too big' );
  default:
    alert( "I don't know such values" );
}

在上面的範例中，我們將看到三個 alert 的順序執行

          alert( 'Exactly!' );
alert( 'Too big' );
alert( "I don't know such values" );
        

switch 和 case 都允許任意表達式。

例如

let a = "1";
let b = 0;

switch (+a) {
  case b + 1:
    alert("this runs, because +a is 1, exactly equals b+1");
    break;

  default:
    alert("this doesn't run");
}

這裡的 +a 給出 1，這與 case 中的 b + 1 進行比較，並執行對應的程式碼。

「case」的分組

可以將共用相同程式碼的幾個 case 變體分組。

例如，如果我們希望對 case 3 和 case 5 執行相同的程式碼

let a = 3;

switch (a) {
  case 4:
    alert('Right!');
    break;

  case 3: // (*) grouped two cases
  case 5:
    alert('Wrong!');
    alert("Why don't you take a math class?");
    break;

  default:
    alert('The result is strange. Really.');
}

現在 3 和 5 都顯示相同的訊息。

「分組」案例的能力是 switch/case 在沒有 break 的情況下運作的副作用。這裡 case 3 的執行從 (*) 行開始，並經過 case 5，因為沒有 break。

類型很重要

讓我們強調，相等性檢查總是嚴格的。值必須是相同類型才能匹配。

例如，讓我們考慮程式碼

let arg = prompt("Enter a value?");
switch (arg) {
  case '0':
  case '1':
    alert( 'One or zero' );
    break;

  case '2':
    alert( 'Two' );
    break;

  case 3:
    alert( 'Never executes!' );
    break;
  default:
    alert( 'An unknown value' );
}

對於 0、1，會執行第一個 alert。
對於 2，會執行第二個 alert。
但對於 3，prompt 的結果是一個字串 "3"，它與數字 3 不完全相等 ===。因此，我們在 case 3 中得到了死程式碼！default 變體將執行。

任務

將「switch」改寫成「if」

使用 if..else 編寫程式碼，以對應以下 switch

          switch (browser) {
  case 'Edge':
    alert( "You've got the Edge!" );
    break;

  case 'Chrome':
  case 'Firefox':
  case 'Safari':
  case 'Opera':
    alert( 'Okay we support these browsers too' );
    break;

  default:
    alert( 'We hope that this page looks ok!' );
}
        

為了精確匹配 switch 的功能，if 必須使用嚴格比較 '==='。

不過，對於給定的字串，一個簡單的 '==' 也適用。

          if(browser == 'Edge') {
  alert("You've got the Edge!");
} else if (browser == 'Chrome'
 || browser == 'Firefox'
 || browser == 'Safari'
 || browser == 'Opera') {
  alert( 'Okay we support these browsers too' );
} else {
  alert( 'We hope that this page looks ok!' );
}
        

請注意：結構 browser == 'Chrome' || browser == 'Firefox' … 被拆分成多行，以提高可讀性。

但 switch 結構仍然更簡潔且更具描述性。

將「if」改寫為「switch」

使用單一 switch 陳述式改寫下列程式碼

let a = +prompt('a?', '');

if (a == 0) {
  alert( 0 );
}
if (a == 1) {
  alert( 1 );
}

if (a == 2 || a == 3) {
  alert( '2,3' );
}

前兩個檢查轉換為兩個 case。第三個檢查拆分為兩個 case

let a = +prompt('a?', '');

switch (a) {
  case 0:
    alert( 0 );
    break;

  case 1:
    alert( 1 );
    break;

  case 2:
  case 3:
    alert( '2,3' );
    break;
}

請注意：底部的 break 不是必需的。但我們加上它以確保程式碼的未來性。

未來，我們可能會想要再新增一個 case，例如 case 4。如果我們忘記在 case 3 結束前加上 break，就會產生錯誤。因此，這是一種自我保險。

教學課程地圖

留言

留言前請先閱讀…

「switch」語法

語法

範例

「case」的分組

類型很重要

任務

將「switch」改寫成「if」

將「if」改寫為「switch」

留言

章節

課程導覽