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 不会匹配数字字符串。让值和标签保持同一种形态。
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。
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。
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。只有可以沉默时才省略。
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 要的是离散标签。
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 做出短消息,再写进页面。
<!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。
自己试试
- 用
let day = 1写一个switch,在 case1里打印"Mon"。 - 为
2和3加 case,每个后面跟break。 - 把
day设为9,确认default打印"other"。 - 对字符串
status用"ok"、"warn"、"err"做 switch。 - 临时去掉一个
break,在控制台观察 fall-through。 - 在 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 循环——把工作重复固定次数
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己,看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部