JavaScript switch 語句基礎與進階用法

JavaScript switch 語句

---

switch 語句用於基於不同的條件來執行不同的動作

---

請使用 switch 語句來選擇要執行的多個代碼塊之一。

語法

switch(n){
    case 1:
        執行代碼塊 1
        break;
    case 2:
        執行代碼塊 2
        break;
    default:
        與case 1和case 2 不同時執行的代碼
}

工作原理：首先設置表達式 n（通常是一個變量）。隨後表達式的值會與結構中的每個 case 的值做比較。如果存在匹配，則與該 case 關聯的代碼塊會被執行。請使用 break 來阻止代碼自動地向下一個 case 運行。

基礎用法：

switch 語句是 if 語句的兄弟語句。

開發者可以用 switch 語句爲表達式提供一系列的情況（case）。

switch 語句的語法：

switch (expression)
  case value: statement;
    break;
  case value: statement;
    break;
  case value: statement;
    break;
  case value: statement;
    break;
...
  case value: statement;
    break;
  default: statement;

每個情況（case）都是表示“如果 expression 等於 value，就執行 statement”。

關鍵字 break 會使代碼跳出 switch 語句。如果沒有關鍵字 break，代碼執行就會繼續進入下一個 case。

關鍵字 default 說明了表達式的結果不等於任何一種情況時的操作（事實上，它相對於 else 從句）。

switch 語句主要是爲避免讓開發者編寫下面的代碼：

if (i == 20)
  alert("20");
else if (i == 30)
  alert("30");
else if (i == 40)
  alert("40");
else
  alert("other");

等價的 switch 語句是這樣的：

switch (i) {
  case 20: alert("20");
    break;
  case 30: alert("30");
    break;
  case 40: alert("40");
    break;
  default: alert("other");
}

實例

顯示今天的星期名稱。請注意 Sunday=0, Monday=1, Tuesday=2, 等等：

var d=new Date().getDay(); 
switch (d) 
{ 
  case 0:x="今天是星期日"; 
  break; 
  case 1:x="今天是星期一"; 
  break; 
  case 2:x="今天是星期二"; 
  break; 
  case 3:x="今天是星期三"; 
  break; 
  case 4:x="今天是星期四"; 
  break; 
  case 5:x="今天是星期五"; 
  break; 
  case 6:x="今天是星期六"; 
  break; 
}

x 的運行結果：今天是星期一

default 關鍵詞

請使用 default 關鍵詞來規定匹配不存在時做的事情：

實例

如果今天不是星期六或星期日，則會輸出默認的消息：

var d=new Date().getDay();
switch (d)
{
    case 6:x="今天是星期六";
    break;
    case 0:x="今天是星期日";
    break;
    default:
    x="期待週末";
}

x 的運行結果：期待週末

進階用法：

在兩種情況相同時，switch 語句的使用。當兩種情況相同時，可以只在第二種情況中寫要執行的代碼，案例如下：

//測試 switch語句，當 兩種情況相同時，比如下面的10或者11，都會走 alert("10或者11") 這裏        
switch (number) {
    case 1:
        alert(1);
        break;
    case 10:
    case 11:
        alert("10或者11"); //number = 10 或者 = 11執行相同的操作
        break;
    default:
        alert("既不是1，10，11");
}

以上方法雖然能夠完成測試代碼，但明顯不是我們想要的效果，因此和要說的進階用法並沒有什麼關係。

那麼重頭戲來了（敲黑板！）

首先，以上的內容來自菜鳥教程 對switch語句的介紹，而Mozilla開發者網絡|MDN  中的介紹是這樣的：

switch 語句評估一個表達式，將表達式的值與case子句匹配，並執行與該情況相關聯的語句。

根據上面的描述我們可以得知case的值除了簡單值之外，還可以是各種表達式，switch (n){...}中的n會和case中的表達式的結果值進行比較（"==="），由此，我們可以這樣：

var n = 7;
switch (true) {
    case n < 0:
        //當n值小於0時
        console.log("n<0");
        break;
    case n < 5:
        //當n值小於5時
        console.log("0<n<5");
        break;
    case n < 10:
        //當n值小於10時
        console.log("5<n<10");
        break;
    default:
        // 當以上條件都不匹配時
        console.log("n>10");
}

所以，只要你想得到的，只要符合規則，都能用switch實現！