JavaScript Switch 语句


目录

    显示目录


switch 语句用于根据不同的条件执行不同的操作。


JavaScript switch 语句

使用 switch 语句选择要执行的多个代码块之一。

句法

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

它是这样工作的:

  • switch 表达式计算一次。

  • 将表达式的值与每种情况的值进行比较。

  • 如果存在匹配,则执行关联的代码块。

  • 如果没有匹配,则执行默认代码块。

例子

getDay() 方法将工作日返回为介于 0 和 6。

(星期日=0,星期一=1,星期二=2..)

此示例使用工作日编号来计算工作日名称:

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
      day = "Monday";
     break;
  case 2:
       day = "Tuesday";
      break;
  case 3:
    day = "Wednesday";
      break;
  case 4:
      day = "Thursday";
     break;
  case 5:
      day = "Friday";
      break;
  case 6:
    day = "Saturday";
}

当天的结果将是:

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let day;
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case  6:
    day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>


break 关键字

当 JavaScript 到达中断时 关键字,它突破了 switch 块。

这将停止 switch 块内的执行。

没有必要破坏 switch 块中的最后一个 case。无论如何,该块会在那里破裂(结束)。

注意:如果省略了break语句,即使 评价与实际情况不符。


default 关键字

default 关键字指定如果没有则运行的代码 案例匹配:

例子

getDay() 方法将工作日返回为介于 0 和 6。

如果今天既不是星期六 (6) 也不是星期日 (0),则写入默认消息:

switch (new Date().getDay()) {
   
case 6:
      text = "Today is Saturday";
    break; 
  case 0:
      text = "Today is Sunday";
      break; 
   
default: 
      text = "Looking forward to the Weekend";
}

文本的结果将是:

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

default case 不必是 switch 中的最后一个 case 堵塞:

例子

switch (new Date().getDay()) {
  default: 
        text = "Looking forward to the Weekend";
    
  break;
  case 6:
        text = "Today is Saturday";
        break; 
  case 0:
        text = "Today is Sunday";
  }

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

如果 default 不是 switch 块中的最后一个 case,请记住以中断结束 default case。


通用代码块

有时你会想要不同的 切换案例以使用相同的 代码。

在此示例中,情况 4 和 5 共享相同的代码块,并且 0 和 6 共享 另一个代码块:

例子

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
      break; 
  case 0:
  case 6:
      text = "It is Weekend";
    break;
  default: 
    text = "Looking forward to the Weekend";
  }

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

切换详情

如果多个案例与一个案例值匹配,则选择第一个案例。

如果没有找到匹配的案例,程序将继续执行默认标签。

如果没有找到默认标签,程序将继续执行开关之后的语句。


严格比较

Switch case 使用严格比较 (===)。

这些值必须具有相同类型才能匹配。

仅当操作数属于同一类型时,严格比较才成立。

在此示例中,x 将不匹配:

例子

 let x = "0";
switch (x) {
  case 0:
    text = "Off";
      break;
  case 1:
    text = "On";
    break;
    default:
    
  text = "No value found";
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let x = "0";

switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>