主题
分支结构 （分支语句 条件语句）（Day3 3/3）
本页对应 Day03_JavaScript，共 6 段视频，约 51 分钟。
学习目标
- 能独立编写
switch case多分支结构，正确使用case、break、default，并说明其基于全等判断的匹配规则。 - 能分别用
switch case和else if实现加油计价案例，根据油号和油量计算单价与总价，并对比两种写法的适用场景。 - 能解释
break在switch中的作用，利用case穿透实现月份天数判断，并说明缺少break时的执行流程。 - 能使用
isNaN和空字符串判断验证用户输入，对非法成绩输入给出提示，并保证合法输入进入正常分支。 - 能实现生肖计算器，利用年份对 12 取余的结果匹配生肖，并用
switch case输出对应生肖及处理非法年份。
知识点
一、为什么需要 switch case：多项等值分支
当程序要判断“表达式的值等于哪个固定值”时，用 if...else if 也能写，但会反复写 ===，结构冗长。switch case 就是为这种多项等值分支准备的。
怎么想：先判断它是“判等”还是“判范围”。switch 适合判等，不适合判范围；if...else if 判等、判范围都可以。还要记住：switch 内部用的是全等判断，类型必须一致。
怎么做：基本结构如下。
js
switch (表达式) {
case 值1:
// 语句
break;
case 值2:
// 语句
break;
default:
// 前面都没匹配时执行
}case 后写表达式可能的值，break 表示这个分支结束；default 可写可不写，通常放最后，不需要 break。
易错点：case 后漏写 break；把 default 当成必须项；用户输入拿到的是字符串，却直接和数字 92 做全等比较，导致不匹配。
二、break 的意义：决定从哪里停
为什么需要 break：switch 的表达式只决定“从哪个 case 进入”，进入后如果遇不到 break，就会继续往下执行，这叫“穿透”。
怎么想：入口由 switch 的全等匹配决定，出口由 break 决定。调试时把 break 全部去掉，会看到从匹配项一直执行到 default。
怎么做：例如表达式为 20 时，从 case 20 进入；若 case 20 后没有 break，会继续执行 30、40、default。若在 40 后加 break，执行到那里才停。
易错点：大多数情况下每个 case 后都要写 break；但穿透也可以被巧妙利用，例如月份天数：1、3、5、7、8、10、12 共用“31天”，可以让多个 case 后不写语句和 break，最后统一输出。
三、加油案例：switch case 做等值判断
为什么用它：油号只有 92、95 等固定值，属于等值判断。
怎么想：先按油号进入 case，再在 case 内部用 if 判断油量是否 >= 40，从而调整单价，最后计算总价。
怎么做（根据转写稿整理核心逻辑）：
js
let oil = +prompt("请输入油号");
let liter = +prompt("请输入油量（升）");
switch (oil) {
case 92:
let price = 4;
if (liter >= 40) {
price = 3.5;
}
let total = price * liter;
alert("本次加油共需要" + total + "元");
break;
case 95:
let price95 = 5;
if (liter >= 40) {
price95 = 4.5;
}
let total95 = price95 * liter;
alert("本次加油共需要" + total95 + "元");
break;
default:
alert("您需要的油，我们这里没有");
}调试时要特别注意：prompt 得到的是字符串，而 switch 用全等判断，所以油号和油量都要转成数字，如 +prompt(...) 或 Number(...)。
易错点：把 total 写进字符串引号里，变成普通文字；漏写 break；忘记类型转换，导致 "92" 和 92 不全等。
四、同一需求用 else if 实现：对比适用场景
为什么对比：同一个加油需求，用 if...else if 也能完成，而且它既能判等，也能判范围。
怎么想：if (oil === 92) { ... } else if (oil === 95) { ... } else { ... }。在 92 分支内部再判断 liter >= 40 调整单价，思路与 switch 一致。
易错点：if 条件里要写比较表达式；输出总价时仍要用字符串连接符把变量拼进去。选择上，固定等值可用 switch，范围判断优先用 if...else if。
五、输入验证与嵌套分支
为什么需要：用户可能输入 hello、空字符串或一堆空格。若不验证，hello 可能一路落到 else，被误判为“优秀”或“不及格”。
怎么想：用 isNaN(score) 判断“能不能转成有效数字”；空字符串和纯空格要单独排除，多个不符合条件的情况用“或者”连接。
怎么做：
js
let score = prompt("请输入您的成绩");
if (isNaN(score) || score.trim() === "") {
alert("请输入正确格式的成绩");
} else {
// 正常成绩判断
}易错点：空字符串参与大小比较会自动转成 0；纯空格也可能被当成 0；isNaN 的结果本身就是布尔值，不必再写 === true。嵌套分支可以写，但缩进必须清楚，否则代码难读。
六、生肖计算器：把业务转成取余判断
为什么这样想：生肖每 12 年一轮，所以同生肖年份对 12 取余结果相同。转写稿中推导出：2023 % 12 === 7，属兔；2024 % 12 === 8，属龙；2025 % 12 === 9，属蛇；2026 % 12 === 10，属马；2027 % 12 === 11，属羊；2028 % 12 === 0，属猴。
怎么做：
js
let year = +prompt("请输入公元年份");
switch (year % 12) {
case 0: alert(year + "年出生的人属猴"); break;
case 1: alert(year + "年出生的人属鸡"); break;
case 2: alert(year + "年出生的人属狗"); break;
case 3: alert(year + "年出生的人属猪"); break;
case 4: alert(year + "年出生的人属鼠"); break;
case 5: alert(year + "年出生的人属牛"); break;
case 6: alert(year + "年出生的人属虎"); break;
case 7: alert(year + "年出生的人属兔"); break;
case 8: alert(year + "年出生的人属龙"); break;
case 9: alert(year + "年出生的人属蛇"); break;
case 10: alert(year + "年出生的人属马"); break;
case 11: alert(year + "年出生的人属羊"); break;
default: alert("请输入有效年份");
}易错点：年份变量前后写错要统一替换；负数年份、非数字输入不保证正确；year % 12 依赖前面的数字转换。这个案例的重点不是背代码，而是把“每 12 年一轮”的业务规律转成“取余后判等”的程序思路。
作业目标与分支选择
本节作业把课堂案例串起来：单向分支、双向分支、成绩判断、加油判断、月天数、生肖计算器，再加上字符串拼接和阶梯水价。为什么需要这些练习？因为真实需求很少只有“是/否”两条路，更多是“等于某个值走哪条”“落在哪个区间走哪条”。怎么想？先判断需求是“判等”还是“判范围”：switch case 适合判等，而且用的是全等；else if 判等、判范围都行。怎么做？先把输入拿到并转成数字，再选分支结构。易错点是：用户输入默认是字符串，switch 判等时字符串 "92" 和数字 92 不全等，必须用 Number() 或加号转换。
本节笔记原样保留如下：
text
1. 课堂案例： 单向分支应用 双向分支应用 成绩判断 加油判断 月天数 生肖计算器
2. 字符串拼接练习
定义变量 姓名、性别、家乡、爱好、期望薪资
使用变量拼接如下字符串：
我的名字叫XXX,性别XXX,我来自XXX,我的业余爱好是XXX,我学习后的期望薪资是XXX K;
3. 阶梯水价计算
0~220(含) 4.05/m³
220~300（含） 5.8/m³
300以上 8.79/m³
4. 分支强化练习字符串拼接练习
为什么需要？因为页面提示、账单结果都要把“固定文字”和“变量值”拼在一起。怎么想？固定文字放引号里，变量放引号外，用 + 连接。怎么做？先定义五个变量，再拼接。易错点：把变量写进引号里，它就会变成普通字母，不再取变量的值。例如 "期望薪资是 salary K" 不会输出薪资值，必须写成 "期望薪资是" + salary + "K"。同理，加油案例里 "本次加油共需要" + total + "元"，total 一定在引号外。
阶梯水价计算
为什么需要？水价不是“用多少都乘一个价”，而是分段累计。怎么想？先看用水量落在哪一段：0~220 含 220，220~300 含 300，300 以上。怎么做？以 water 表示用水量：不超过 220 时总价是 water * 4.05；超过 220 不超过 300 时，前 220 按 4.05，超出部分按 5.8；超过 300 时，前 220 按 4.05，220 到 300 的 80 按 5.8，超过 300 的部分按 8.79。易错点：不能把总用水量直接乘最高单价；边界“含”要写清楚，220 属于第一段，300 属于第二段；输入要先转数字，否则比较和计算都可能出错。
switch case 与加油判断
为什么需要 switch case？转写稿里说得很清楚：它叫多项分支，一个 case 就是一个方向。语法是 switch(表达式)，大括号里写 case 值:、语句、break，最后可写 default。怎么想？加油案例先根据油号判断单价：92 号初始 4 元/升，95 号初始 5 元/升；再根据油量是否大于等于 40 升调整单价，92 号调成 3.5，95 号调成 4.5；最后 total = price * oil。怎么做？油号和油量用 prompt 获取后转 Number，再写 switch。易错点：case 92 用的是全等判断，如果油号还是字符串 "92"，就不会进入 case 92；每个 case 后要写 break，否则会“穿透”继续执行后面的 case；default 是最后一个，通常不需要 break，用来提示“您要的油我们这里没有”。
break、月份天数与输入验证
break 的意义要理解：表达式全等哪个 case，就从哪个 case 进入；进入后如果碰不到 break，就一直往下执行，直到遇到 break 或执行完。转写稿用“月份天数”演示了巧妙用法：case 1、3、5、7、8、10、12 后不写语句也不写 break，让它们一起落到“31 天”的语句再 break；4、6、9、11 落到“30 天”；2 单独输出“28 天或 29 天”。易错点：这是有意利用穿透，初学时不要漏写 break。
输入验证为什么需要？成绩判断里用户输入 hello，如果不验证，它可能被当成无效值继续判断。怎么做？用 isNaN(score) 判断“不是有效数字”，再配合空字符串或纯空格判断，把不合法输入先拦下来；只有合法成绩才进入正常分段。易错点：空字符串转数字是 0，纯空格也可能被转成 0，所以不能只靠大小比较；isNaN("hello") 为 true，说明它不能转成有效数字。
生肖计算器
为什么需要？这是把业务规则转成程序计算的典型题。怎么想？生肖每 12 年一轮，所以看年份除以 12 的余数。转写稿中：2023 % 12 是 7，属兔；2024 % 12 是 8，属龙；2025 % 12 是 9，属蛇，依此类推。怎么做？获取年份并转数字，switch(year % 12)，把余数 0~11 分别映射到猴、鸡、狗、猪、鼠、牛、虎、兔、龙、蛇、马、羊，最后 default 处理乱写。易错点：变量名要统一，转写稿里出现过 ye 拼写错误后用替换修正；switch 仍是全等判断，年份要先转数字；负数年份虽能取余，但不保证业务正确。
作业检查清单
写完每个案例后检查：输入是否转数字；分支是判等还是判范围；switch case 是否补了 break；default 是否处理异常；字符串拼接时变量是否在引号外；阶梯水价是否分段累计；边界“含”是否写对；缩进是否清晰。按这个顺序调试，作业就能从“能跑”变成“能讲清楚为什么这样写”。
课堂画面
代码示例
示例一：加油案例（switch case 实现）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加油案例 - switch case</title>
</head>
<body>
<script>
// prompt 拿到的永远是字符串，用 + 转成 number
var oilNo = +prompt("请输入油号（92 / 95）");
var oilL = +prompt("请输入油量（单位：升）");
switch (oilNo) {
case 92:
var price = 4; // 92 号初始单价
if (oilL >= 40) { // 单项分支调整单价
price = 3.5;
}
var total = price * oilL; // 计算总价
alert("本次加油共需要" + total + "元");
break;
case 95:
var price = 5; // 95 号初始单价
if (oilL >= 40) {
price = 4.5;
}
var total = price * oilL;
alert("本次加油共需要" + total + "元");
break;
default:
alert("您要的油，我们这里没有");
}
</script>
</body>
</html>要点解释：
switch (oilNo)的小括号里是表达式，case 92:是表达式可能的值，二者用**全等（===）**比较，相等才进入对应分支。- 最关键的易错点：
prompt返回的是字符串，"92" === 92为 false，直接写case 92永远进不去，所以必须用+prompt(...)做类型转换。 break表示这个 case 的结束，漏写会继续往下执行（穿透）。default是最后兜底分支，后面不用写break。- 每个 case 内部还可以再写
if单项分支做范围判断（油量是否 ≥ 40 升），分支是可以嵌套的。 - 字符串拼接时
total必须写在引号外面："...共需要" + total + "元"；写进引号里就变成字母 "total" 了。
示例二：月天数（巧用 break 穿透）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>月天数</title>
</head>
<body>
<script>
var month = +prompt("请输入月份（1-12）");
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
alert(month + "月有31天");
break;
case 4:
case 6:
case 9:
case 11:
alert(month + "月有30天");
break;
case 2:
alert("2月有28天或29天");
break;
default:
alert("请输入正确的月份");
}
</script>
</body>
</html>要点解释：
- 多个 case 的结果相同，可以让它们共用同一段语句：前面几个
case后只写冒号、不写语句也不写break，靠穿透一路执行到共用的语句处。 - 这里"不写 break"是有意为之；一旦碰到第一个
break就停止，所以"31 天"和"30 天"两组互不影响。 - 易错点：如果误把
break写在中间某个 case 后（如case 3之后），后面的 5、7、8、10、12 就全废了，要检查 break 的位置。 +prompt(...)同样不能省，否则字符串"6"与case 6全等比较不成立，会直接掉进default。- 2 月单独一个 case，因为天数不固定（28 或 29 天），不适合和其它月份合并。
示例三：生肖计算器
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生肖计算器</title>
</head>
<body>
<script>
var year = +prompt("请输入年份（公元纪年）");
// 生肖每 12 年一轮，所以用年份对 12 取余来判断
switch (year % 12) {
case 0: alert(year + "年出生的人属猴"); break;
case 1: alert(year + "年出生的人属鸡"); break;
case 2: alert(year + "年出生的人属狗"); break;
case 3: alert(year + "年出生的人属猪"); break;
case 4: alert(year + "年出生的人属鼠"); break;
case 5: alert(year + "年出生的人属牛"); break;
case 6: alert(year + "年出生的人属虎"); break;
case 7: alert(year + "年出生的人属兔"); break;
case 8: alert(year + "年出生的人属龙"); break;
case 9: alert(year + "年出生的人属蛇"); break;
case 10: alert(year + "年出生的人属马"); break;
case 11: alert(year + "年出生的人属羊"); break;
default: alert("请输入正确的年份");
}
</script>
</body>
</html>要点解释：
- 解题关键是先找算法：生肖 12 年一轮，
year % 12相同的年份生肖相同（如 2011、2023、2035 都余 7，都是兔年），所以switch的判断依据写year % 12而不是year。 - 余数只会是 0~11，所以 case 只写 0 到 11，不能出现
case 12——year % 12永远取不到 12，写 12 是死分支。 case 0表示余数为 0 的年份（2028、2016…），对应属猴，不能漏，漏了就会掉进default。- 每条语句后都带
break，这里不做穿透，各余数分支互不相干。 - 易错点：
switch用全等比较，虽然year % 12会自动把字符串转成数字，但显式+prompt(...)更稳妥；负数年份、非数字输入（如"康熙15年"）取余为NaN，不会命中任何 case，正好由default兜底。
常见错误
现象：
switch输入92却直接走default。
原因：prompt得到的是字符串，switch用全等比较，"92" !== 92。
修法：接收后立即转换类型，如let oil = +prompt(...)或Number(...)。现象：命中某个
case后，后面的case语句也全部执行。
原因：该case末尾漏写break，分支“贯穿”到后续分支。
修法：常规分支每条末尾补break；只有刻意利用贯穿时才省略，并加注释说明。现象：把
total写进字符串后，弹窗显示字母total而不是金额。
原因：变量被写进引号内，变成了字符串字面量。
修法：写成"本次加油需要支付" + total + "元"，变量放在引号外并用+连接。现象：用户输入
hello，成绩判断仍输出“优秀”。
原因：只写了分数区间判断，没有先验证输入是否可转为有效数字。
修法：先用isNaN(score)判断，无效输入直接提示格式错误，有效输入再进入成绩分支。现象：用户什么都不输入或只输入空格，被当成 0 分判为“不及格”。
原因：空字符串/纯空格转数字为0，绕过了isNaN的拦截。
修法：校验条件写成“为空 或isNaN”，即score === "" || isNaN(score)，必要时先trim()。现象：用
switch写成绩分段，代码又长又容易写错。
原因：switch适合判等，不适合判范围。
修法：范围判断改用if / else if；只有“等于某几个固定值”时才优先用switch。现象：生肖计算器输入年份后结果不对，或输入非年份也给出属相。
原因：忘记对年份取余 12，或没有处理default和非法输入。
修法：以year % 12作为switch表达式，补default提示非法年份，并对输入做数字校验。
练习
成绩判断加固：要求用户输入成绩，分别处理“空输入”“纯空格”“非数字”“超出 0~100”“合法成绩”五种情况，合法成绩再输出等级。重点练习
isNaN、trim与逻辑或的组合。加油案例改造：用
switch case完成 92/95 号汽油计价，再用if / else if写一遍。要求两种写法结果一致，并说明为什么switch版本必须先转换油号类型。月份天数：输入月份，输出该月天数。要求利用
case贯穿合并 31 天和 30 天的月份，2 月单独处理，并补充非法月份提示。break 实验：写一个
switch，分别测试“每个case都有break”“全部去掉break”“只在最后一个分支保留break”三种情况，记录输出并从进入点和停止点解释差异。生肖计算器扩展：输入年份输出属相，要求增加输入校验；再改造成输入属相、反推最近一个对应年份，体会“正向取余判断”和“反向推算”的差别。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | switch case 结构 | 09:05 |
| 2 | 加油案例-switch case 实现 | 09:47 |
| 3 | 加油案例-else if实现 | 04:33 |
| 4 | break的意义 | 07:40 |
| 5 | 对用户的输入进行验证 | 10:00 |
| 6 | 生肖计算器 | 10:36 |
小结
switch case的核心是“全等判等”，不是“范围判断”；范围问题优先交给if / else if。- 用户输入默认是字符串，进入
switch或数值计算前必须先转换类型或做校验。 break决定分支从哪里停止；漏写会贯穿，刻意省略则可用于合并多个相同结果的分支。default用于兜底，不是必写项，但涉及用户输入时建议保留并给出明确提示。- 输入验证要覆盖“空、空格、非数字、越界”等异常，不能只假设用户会老实输入。
- 字符串拼接时，变量必须放在引号外；变量写进引号内就会退化成普通文本。
- 复杂业务先找数学规律再写分支，例如生肖问题先转化为“年份对 12 取余”。
- 分支可以嵌套，但嵌套越深可读性越差；实际开发中应优先用提前校验、提前返回降低层级。