如何在 JavaScript 中使用 switch 語句

這篇文章最初是為 DigitalOcean 寫的。

簡介

條件語句是所有編程語言中最有用和最常見的特性之一。在如何在 JavaScript 中編寫條件語句一文中，我們了解瞭如何使用 if , else , 和 else if 關鍵字根據不同的條件控製程序的流程，在JavaScript中往往是用戶輸入的結果。

除了 if...else , JavaScript 有一個稱為 switch 的特性 陳述。 switch 是一種條件語句，它將針對多個可能的情況評估一個表達式，並根據匹配的情況執行一個或多個代碼塊。 switch 語句與包含許多 else if 的條件語句密切相關 塊，它們通常可以互換使用。

在本文中，我們將學習如何使用 switch 語句，以及如何使用相關關鍵字case , break , 和 default ，以及如何在 switch 中使用多個案例 聲明。

切換

switch 語句對錶達式求值並作為匹配案例的結果執行代碼。起初它可能看起來有點嚇人，但基本語法類似於 if 陳述。它將始終使用 switch () {} 編寫 ，括號中包含要測試的表達式，大括號中包含要執行的潛在代碼。

以下是 switch 的示例 帶有兩個 case 的語句 s，以及稱為 default 的後備 .

switch (expression) {
  case x:
    // execute case x code block
    break
  case y:
    // execute case y code block
    break
  default:
  // execute default code block
}

這是將要發生的事件的順序。

• 計算表達式
• 第一個case , x , 將針對錶達式進行測試。如果匹配，代碼將執行，break 關鍵字將結束 switch 阻止。
• 如果不匹配，x 將被跳過並且 y case 將針對錶達式進行測試。
• 如果沒有匹配的情況，default 代碼塊將運行。

讓我們做一個工作示例來測試它。在我們的示例中，我們將使用 new Date() 找到一周中的當前日期 方法和 getDay() 打印對應於當天的數字。 1 代表星期一，一直到 7 代表星期日。

const day = new Date().getDay()

我們將在一周的每一天向控制台發送一條消息。程序會按從上到下的順序運行尋找匹配，一旦找到，break 命令將停止 switch 阻止繼續評估語句。

// Set the current day of the week to a variable, with 1 being Monday and 7 being Sunday
const day = new Date().getDay()

switch (day) {
  case 1:
    console.log('Happy Monday!')
    break
  case 2:
    console.log("It's Tuesday. You got this!")
    break
  case 3:
    console.log('Hump day already!')
    break
  case 4:
    console.log("Just one more day 'til the weekend!")
    break
  case 5:
    console.log('Happy Friday!')
    break
  case 6:
    console.log('Have a wonderful Saturday!')
    break
  case 7:
    console.log("It's Sunday, time to relax!")
    break
  default:
    console.log('Something went horribly wrong...')
}

'Just one more day 'til the weekend!'

此代碼在星期四測試，對應 4 ，因此控制台輸出為 Just one more day 'til the weekend! .根據您測試代碼的一周中的哪一天，您的輸出會有所不同。我們已經包含了一個 default 在出現錯誤的情況下阻止在最後運行，在這種情況下不應該發生，因為一周中只有 7 天。例如，我們也可以只打印週一到週五的結果，而 default 塊在周末可能有相同的消息。

如果我們省略了 break 每個語句中的關鍵字，其他沒有 case s 會被評估為真，但程序會繼續檢查直到它結束。為了讓我們的程序更快更高效，我們包含了 break .

切換範圍

在某些情況下，您可能需要評估 switch 中的一系列值 塊，而不是上面示例中的單個值。我們可以通過將表達式設置為 true 來做到這一點 並在每個 case 中執行操作 .

為了使這更容易理解，我們將使用一個熟悉的示例。在條件語句一文中，我們製作了一個簡單的評分應用程序，該應用程序將採用數字分數並將其轉換為字母等級，具有以下要求。

• 90 及以上成績為 A
• 80 到 89 的成績為 B
• 70 到 79 的成績是 C
• 60 到 69 的成績為 D
• 59 或以下成績為 F

現在我們可以把它寫成 switch 陳述。由於我們正在檢查一個範圍，我們將對每個 case 中的操作 ，並檢查每個表達式的計算結果是否為 true .

// Set the student's grade
const grade = 87

switch (true) {
  // If score is 90 or greater
  case grade >= 90:
    console.log('A')
    break
  // If score is 80 or greater
  case grade >= 80:
    console.log('B')
    break
  // If score is 70 or greater
  case grade >= 70:
    console.log('C')
    break
  // If score is 60 or greater
  case grade >= 60:
    console.log('D')
    break
  // Anything 59 or below is failing
  default:
    console.log('F')
}

'B'

要計算的括號中的表達式是 true 在本例中，表示任何 case 計算結果為 true 將是一場比賽。就像 else if , switch 從上到下評估，第一個真正的匹配將被接受。因此，即使我們的 grade 變量是 87 因此計算結果為 true 對於 C 和 D，第一個匹配是 B，這將是輸出。

多個案例

您可能會遇到多個 case 的代碼 s 應該有相同的輸出。為了實現這一點，您可以使用多個 case 每個代碼塊。

為了測試這一點，我們將製作一個簡單的應用程序，將當前月份與適當的季節相匹配。首先，我們將使用 new Date() 方法找到對應於當前月份的數字，並將其應用於 month 變量。

const month = new Date().getMonth()

new Date().getMonth() 方法將從 0 輸出一個數字 到 11 , 使用 0 是一月和 11 是十二月。在本文發佈時，月份是 9 月，對應於 8 .

為簡單起見，我們的應用程序將輸出具有以下規格的四個季節：

• 冬天 ：一月、二月和三月
• 春天 ：四月、五月和六月
• 夏天 ：七月、八月和九月
• 秋天 ：10 月、11 月和 12 月

下面是我們的代碼。

// Get number corresponding to the current month, with 0 being January and 11 being December
const month = new Date().getMonth()

switch (month) {
  // January, February, March
  case 0:
  case 1:
  case 2:
    console.log('Winter')
    break
  // April, May, June
  case 3:
  case 4:
  case 5:
    console.log('Spring')
    break
  // July, August, September
  case 6:
  case 7:
  case 8:
    console.log('Summer')
    break
  // October, November, December
  case 9:
  case 10:
  case 11:
    console.log('Autumn')
    break
  default:
    console.log('Something went wrong.')
}

這是輸出。

Summer

發佈時的當前月份為 8 ，對應於 case 之一 s 與 "Summer" 季節輸出。

結論

在本文中，我們回顧了 switch 語句，一種條件語句，它根據匹配結果計算和表達並輸出不同的值。我們審查了 switch 使用範圍和多個 case 的語句 s。要了解更多信息，請查看 switch 在 Mozilla 開發者網絡上。