在 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 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告