JavaScript中的switch語句

知否發表於2020-07-21
JavaScript

JavaScript語言中的條件語句，除了if 語句，還有switch 語句。switch 常用於根據不同的條件執行不同的操作。雖然它和 if 語句都是用來判斷條件的語句，但是它們之間還是有不同。

switch的語法

語法如下所示：

switch(expression) {
    case 變數x:
    // 語句1程式碼塊
    case 變數y:
    // 語句2程式碼塊
    case 變數z:
    // 語句3程式碼塊
    break;
    default:
    // 程式碼塊
}

語法解釋：表示式值計算一次，然後我們依次將表示式的值與每一種 case 情況的值進行比較，如果匹配，就會執行與 case 對應的相關程式碼塊。

執行原理：變數 expression 的值與 case 的值進行比較，比如變數 expression 等於 case 變數 x，我們就執行語句1的程式碼塊，如果變數 expression 等於 case 變數 y 就執行語句2的程式碼塊，依次類推，如果都不符合就執行 default 語句程式碼塊。break 語言用於結束當前執行的語句，default 表示預設的，在沒有符合選項的時候預設選擇。

示例：

使用 switch 語句來看判斷今天是星期幾，並輸出對應時間。例如在一個 HTML 檔案中，寫入下列程式碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_俠課島(9xkd.com)</title>
</head>
<body>
  <div>
    <p id="date"></p>
  </div>
  <script>
    var day;
    var d = new Date().getDay();  
    switch(d) {
        case 0:
          day = "星期天";
          break;
        case 1:
          day = "星期一";
          break;
        case 2:
          day = "星期二";
          break;
        case 3:
          day = "星期三";
          break;
        case 4:
          day = "星期四";
          break;
        case 5:
          day = "星期五";
          break;
        case 6:
          day = "星期六";
          break;
        case 7:
          day = "星期天";
          break;
    }
    document.getElementById("date").innerHTML = day;
    </script>
  </body>    
</html>

在瀏覽器中開啟這個HTML檔案，頁面會顯示：

星期二

我們來分析一下 <script> 標籤中的 JavaScript 程式碼，變數 d 是我們獲取到的當天的星期天數（我寫這個文章的時候是星期二），getDay() 方法會返回與星期相對應的數字，例如星期一返回1、星期二返回2，以此類推。

然後我們將這個變數 d 作為switch 語句的表示式值，將它與 case 後面的值匹配，如果表示式等於某個 case 後面的值，則執行響應的程式碼。例如上述程式碼中，變數 d 的值為2，那麼就會匹配到 case 2，所對應的程式碼就是day = "星期二";，所以輸出結果為星期二。後面還有一個break 語句，這個語句的作用就是跳出 switch 語句，避免同時執行多個case。

default 關鍵詞

default 關鍵詞規定 case 匹配不存在時所做的事情。

示例：

例如我們看下面這段程式碼：

var level = "P";
switch(level){
    case "A":
        console.log("第一類");
        break;
    case "B":
        console.log("第二類");
        break;
    case "C":
        console.log("第三類");
        break;
    case "D":
        console.log("第四類");
        break;
    default:
        console.log("其他");
}

輸出：

其他

上述程式碼中，如果 level 的值不滿足任何 case 的值，則會匹配到 default。程式碼中 level 的值為 P，而 case 語句中的值只有A、B、C、D，此時就會匹配到 default 語句，執行 default 語句下面的程式碼。

break 關鍵詞用於跳出 switch 程式碼塊。使用 break 能夠節省大量執行時間，因為它會忽略 switch 程式碼塊中的其他程式碼的執行。

switch 與 if 的對比

關於條件分支 switch 和 if 兩者之間的區別和關聯，我們可以通過下面這個表格進行簡單直觀的認識：

switch if
判斷條件 等值判斷 等值判斷和區間判斷
結束語句 break跳出 執行一個if後自動結束
預設和否則語句 default可以放在任何位置 else只能放在最後
  • if 語句表示式的結果是 boolean 布林型別，常用於區間判斷。
  • switch 表示式型別不能是 boolean 布林型別，可能是 byte、int、char、string、列舉，常用於等值判斷。

注意一般能用 switch 語句實現的就一定能使用 if 語句來實現，但是反過來卻是不一定的，如果區間範圍就採用 if，如果等值判斷就使用 switch。

效率問題：

  • switch case 會生成一個跳轉表來指示實際的 case 分支地址。
  • switch case 只能處理 case 為常量的情況。
  • if else 需要遍歷條件分支知道命中條件。
  • if else 能應用於更多的場所，比較靈活，但是必須遍歷所有可能的值。

動手小練習

  1. 寫一個小程式，讓使用者輸入月份，提示相應的季節，如果都不在指定的月份中則輸出"請正確輸入月份"。
  2. 熟記 switch 和 if 的基本內容以及兩者間的關聯與區別。

相關文章