正在加载...

switch 语句

对是/否或区间,日常还是用 if / else。有时问题变成:几个固定值里是哪一个?日期码 1…7、状态 'ok' / 'warn' / 'err'、菜单键。这种形状用 switch 比一长串 else if 更干净。分支你会了;这里是把一个值跟多个 case 标签对齐。

switch 做什么?

switch 看括号里的一个表达式,把该值与每个 case 标签比较。匹配后执行该路径下的语句。break 离开 switch,后面的 case 不再跑。default 是没有任何 case 匹配时的兜底。

零件一览

📊 日常 switch 零件

关键字 日常读法 典型用途
switch 看这个值… 打开选择
case 若等于这个标签… 一个固定选项
break 停在这里;离开 switch 匹配后结束
default 若都没匹配… 兜底路径

匹配是严格相等风格(与 === 同思路)。数字 case 不会匹配数字字符串。让值和标签保持同一种形态。

简单 switch

javascript
let day = 3;
switch (day) {
case 1:
console.log("Mon");
break;
case 2:
console.log("Tue");
break;
case 3:
console.log("Wed");
break;
default:
console.log("other");
}

一个值,多条带标签的路径

这里 day 是 3,于是走 case 3,控制台打印 Wed。1 和 2 被检查后跳过。break 之后 switch 结束——default 不会跑。

没有 break,JavaScript 会继续进入后面的 case 体。这叫 fall-through。初学者几乎总希望每个完成的 case 后面都有 break。

为什么 break 重要

javascript
let day = 2;
switch (day) {
case 1:
console.log("Mon");
case 2:
console.log("Tue");
case 3:
console.log("Wed");
break;
default:
console.log("other");
}

漏掉 break 会连后面的 case 一起跑

day 是 2。匹配从 case 2 开始,打印 Tue,再进入 case 3,在 break 前又打印 Wed。你想要一个标签,却得到两个。除非刻意共享代码,否则在每个完成的 case 下写 break。

都不匹配时的 default

javascript
let day = 9;
switch (day) {
case 1:
console.log("Mon");
break;
case 2:
console.log("Tue");
break;
default:
console.log("other");
}

default 覆盖「都不符合」

day 是 9。没有 case 匹配,于是跑 default,你看到 other。意外值仍需要安全提示时用 default。只有可以沉默时才省略。

字符串 case

javascript
let status = "warn";
switch (status) {
case "ok":
console.log("green");
break;
case "warn":
console.log("yellow");
break;
case "err":
console.log("red");
break;
default:
console.log("unknown");
}

case 也可以是字符串

status 是 "warn",所以你看到 yellow。表单或 API 的短代码常用字符串 case。像「分数从 60 到 90」这类区间仍用 if / else if——switch 要的是离散标签。

保存选中的标签

javascript
let day = 1;
let label;
switch (day) {
case 1:
label = "Mon";
break;
case 2:
label = "Tue";
break;
default:
label = "other";
}
console.log(label);

给匹配结果起名

在每个 case(以及 default)里给 label 赋值,之后再用一次。这里 label 变成 "Mon"。和 if / else 同一套路——先选,再用。

在页面上显示所选路径

用 switch 做出短消息,再写进页面。

用 switch 做页面选择

html
<!DOCTYPE html>
<html>
<head>
<title>Switch — page choice</title>
</head>
<body>
<p id="out">…</p>
<script>
let day = 3;
let msg;
switch (day) {
case 1:
msg = "Mon";
break;
case 2:
msg = "Tue";
break;
case 3:
msg = "Wed";
break;
default:
msg = "other";
}
let box = document.getElementById("out");
box.textContent = "day=" + msg;
</script>
</body>
</html>

day 是 3,页面显示 day=Wed。把 day 设为 9 并刷新,应看到 day=other。下一课(for)会把工作重复多次;「哪个固定标签?」仍用 switch。

自己试试

  1. 用 let day = 1 写一个 switch,在 case 1 里打印 "Mon"。
  2. 为 2 和 3 加 case,每个后面跟 break。
  3. 把 day 设为 9,确认 default 打印 "other"。
  4. 对字符串 status 用 "ok"、"warn"、"err" 做 switch。
  5. 临时去掉一个 break,在控制台观察 fall-through。
  6. 在 HTML 演示里只改 day,刷新,读新的 day= 文本。

常见失误

  • case 后忘记 break(后面的 case 也会跑)
  • 用 switch 处理开放区间(score >= 60)——更适合 if / else if
  • 类型混用,导致数字永远对不上字符串 case
  • 未知值仍需要提示时省略 default
  • 检查并非固定标签列表时,把每个 if 都换成 switch

小结

  • switch 把一个值与多个 case 标签匹配
  • break 在匹配后结束 switch
  • 都不匹配时跑 default
  • 适合离散值;区间留给 if / else if
  • 以后要用结果就先存标签;需要时写到页面
  • 下一课:for 循环——把工作重复固定次数

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己,看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部