1. 程式人生 > >JavaScript switch 語句基礎與進階用法

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實現!