在 JavaScript 中，使用 default 結束 switch 語句是否是一種好的實踐？

在本教程中，我們將學習在 JavaScript 中使用 default 結束 switch 語句是否是一種好的實踐。

在 JavaScript 中，如果我們需要檢查任何條件，通常會使用 if 或 if-else 語句。但是，如果我們需要為一個表示式檢查多個條件，就會變得非常複雜且雜亂無章，因此在這種情況下，我們會使用 switch 語句。

switch 語句將表示式的值與一系列 case 子句進行比較，然後執行第一個與該值匹配的 case 子句後的語句，依此類推，直到遇到 break 語句。如果沒有任何 case 與表示式的值匹配，則執行 switch 語句的 default case。

使用者可以按照以下語法使用 switch 語句。

語法

switch (expression) {
   case value1:
   // code block if the expression matches the value1
   break

   case value2:
   // code block if the expression matches the value2
   break
   ...

   default:
   // code block if expression not matches any values
}

以上語法展示了 switch 語句的不同 case、break 語句和 default 語句。

許多 JavaScript 開發人員都會遇到這樣一個問題：在 switch 語句末尾使用 default 子句是否是一種好的實踐？但在直接得出結論之前，讓我們先看看帶和不帶 default 子句的 switch 語句分別表現出什麼行為。

示例 1

沒有 'default' case 的 switch 語句

在下面的示例中，我們在 JavaScript 中使用了沒有 default 的 switch。我們使用一個結果等級的陣列，並將每個等級傳遞到 switch 語句中，以顯示這些等級的原始含義。例如，等級“O”將顯示“優秀”。一個“顯示”按鈕與單擊事件相關聯，該事件會在使用者單擊按鈕時執行一個函式。此函式迴圈遍歷每個等級，並使用 switch 語句在網頁上輸出其對應的含義。

<html>
<body>
   <h2>Using the <i>switch statement without default</i> in JavaScript</h2>
   <button onclick = "show()"> Show </button>
   <div
      id = "root"
      style = "border: 1px solid gray; margin: 5px 0px; padding: 5px" >
   </div>
   <script>
      // Grades array
      const grades = ['O', 'A', 'F', 'Z']
      // root element
      const root = document.getElementById('root')
      // Showing grades in the webpage
      grades.map((grade) => {
         root.innerHTML += grade + '<br /> <br/>'
      })
      // 'Show' button click event handler funtion
      function show() {
         root.innerHTML = '';
         grades.map((grade) => {
            // switch statement
            switch (grade) {
               case 'O':
               root.innerHTML += grade + ' = Outstanding!' + '<br /> <br/>'
               
               break
               case 'A':
               root.innerHTML += grade + ' = Good!' + '<br /> <br/>'
               
               break
               case 'F':
               root.innerHTML += grade + ' = Fail!' + '<br /> <br/>'
               
               break
            }
         })
      }
   </script>
</body>
</html>

因此，我們可以看到，如果表示式與任何 case 均不匹配，則 switch 語句不會執行任何與其對應的程式碼。因此可能會出現不希望的輸出。在本例中，在單擊按鈕後，“Z”等級在網頁上缺失。

示例 2

帶有 'default' case 的 switch 語句

在下面的示例中，我們將使用與前一個示例相同的示例，這次我們將使用帶有 default 子句的 switch 語句，並比較這兩個輸出。

<html>
<body>
   <h2>Using the <i>switch statement with default</i> in JavaScript</h2>
   <button onclick = "show()"> Show </button>
   <div
      id = "root"
      style = "border: 1px solid gray; margin: 5px 0px; padding: 5px">
   </div>
   <script>
      // Grades array
      const grades = ['O', 'A', 'F', 'Z']
      // root element
      const root = document.getElementById('root')
      // Showing grades in the webpage
      grades.map((grade) => {
         root.innerHTML += grade + '<br /> <br/>'
      })
      // 'Show' button click event handler funtion
      function show() {
         root.innerHTML = ''
         grades.map((grade) => {
            // switch statement
            switch (grade) {
               case 'O':
               root.innerHTML += grade + ' = Outstanding!' + '<br /> <br/>'
               
               break
               case 'A':
               root.innerHTML += grade + ' = Good!' + '<br /> <br/>'
               
               break
               case 'F':
               root.innerHTML += grade + ' = Fail!' + '<br /> <br/>'
               
               break
               default:
               root.innerHTML += grade + ' = Unknown Grade!' + '<br /> <br/>'
            }
         })
      }
   </script>
</body>
</html>

因此，在比較帶和不帶 default 子句的 switch 語句的兩個輸出後，我們可以得出結論，default 值有助於在表示式與任何 case 子句都不匹配時執行程式碼。如果使用者沒有使用 default 子句，則輸出可能會顯示一些不希望的結果，例如在本教程中，我們看到示例 1 中的輸出中省略了“Z”等級。因此，在 JavaScript 中使用 default 結束 switch 是一種好的實踐。

更新於: 2022-10-31

709 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.