← 返回目录

11. switch 等值匹配

当一个变量要和好几个固定值对号入座时，if...else if 写一大串，switch 更清爽。但小心漏 break 的穿透。

11.1 互动演示

11.2 知识点逐条讲解（配合代码）

① switch：拿一个值去"对号入座"

if...else if 适合"判断区间"（比如成绩 60~100）。但有时候只是想看变量等于哪个固定值，就走哪条路（比如角色是 admin 还是 editor），这时候 switch 更清楚。它内部比的是 === 全等。

let role = "admin";          // 要判断的那个值
switch (role) {              // 把它放进去
	case "admin":            // 如果它 === "admin"
		console.log("拥有全部功能权限");
		break;               // 一定要停下来，不然会继续往下跑
	case "editor":
		console.log("仅拥有编辑权限");
		break;
	case "visitor":
		console.log("仅拥有浏览权限");
		break;
	default:                 // 以上都没对上，就走这里（相当于 else）
		console.log("未知用户角色");
}
		

② 漏 break：会"穿透"一路往下跑

switch 有个臭毛病：一旦对上某个 case，如果你忘了写 break，它不会停，会接着把后面 case 的代码也全跑一遍，直到遇到 break 或结束。这叫"穿透"。

如果你给 admin 写完代码忘了加 break，那么选 admin 时会把 admin、editor、visitor 的权限全都打印出来——权限越界就是这么来的。所以每个 case 末尾都老老实实写 break。

default 是兜底：所有 case 都没对上时才走它，相当于 if...else 最后的 else。习惯放最后，也最好带个 break。

实战：用在哪 / 常见坑 / 怎么解决

① 可能在什么地方用：不同角色显示不同菜单；按星期几做不同的事。

② 常见的问题：漏写 break 发生穿透，一个角色把所有菜单全显示出来了。

③ 解决思路：每个 case 写完立刻补 break；想合并几种情况共用代码时，才故意省掉中间的 break。