資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 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 開發人員都會遇到一個問題：以 default 子句結束 switch 語句是否是一種好的實踐？但在直接得出結論之前，讓我們先看看 switch 語句在有和沒有 default 子句的情況下表現如何。
示例 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 是一種好的實踐。
709 次瀏覽
