文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本文以 Modern JavaScript Tutorialjavascript.info仓库中的实战练习《Rewrite if into switch》为核心讲解如何将一段松散的多重if判断改写成结构清晰的switch语句。通过这个练习你将掌握switch的语法骨架、case分组多个值共享同一段代码、break的执行流控制以及switch使用严格相等比较这一关键特性。读完本文你不仅能独立完成这道练习还能在真实项目中写出更可读、更易维护的多分支判断逻辑。练习文件位于仓库 1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md配套官方解答见同目录下的 solution.md。一、练习背景switch 是什么为什么要用它在 JavaScript 中当我们需要把同一个值与多个候选值逐一比较、并分别执行不同代码时最常见的方式是写一连串if判断。但分支一多代码就会变得冗长、重复可读性明显下降。switch语句正是为解决这个问题而生的它把与多个变体比较这一过程组织成结构化的case块语义一目了然。官方教程在 1-js/02-first-steps/14-switch/article.md 中开宗明义Aswitchstatement can replace multipleifchecks. It gives a more descriptive way to compare a value with multiple variants.switch语句可以替代多个if检查它提供了一种更具描述性的方式来将一个值与多个变体进行比较。switch 的基本语法switch(x) { case value1: // 相当于 if (x value1) ... [break] case value2: // 相当于 if (x value2) ... [break] default: ... [break] }执行过程分三步x的值会先与第一个case的值value1做严格相等比较不匹配再与第二个value2比较依此类推一旦找到匹配switch就从对应case开始执行代码直到最近的break或switch结束如果所有case都不匹配则执行default分支的代码若存在。从语法结构可以看出switch天然比一连串if更适合同一个值对多个分支的场景——这正是本练习要求改写的原因。二、题目原文与改写目标练习原文task.md给出如下代码要求用一个switch语句重写let a prompt(a?, ); if (a 0) { alert( 0 ); } if (a 1) { alert( 1 ); } if (a 2 || a 3) { alert( 2,3 ); }对这段代码需要留意三点prompt(a?, )用一元加号把prompt返回的字符串强制转换为数字所以a是一个 number 类型三个if是并列关系中间没有else但逻辑上分支互斥行为等价于一个多分支判断第三个判断a 2 || a 3是两个值共享同一段处理逻辑这是改写时最值得关注的分组场景。改写目标很明确保持程序行为完全一致同时用switch表达出同样的三分支逻辑。三、官方解答三个 case 的对应关系官方解答solution.md给出了如下代码let a prompt(a?, ); switch (a) { case 0: alert( 0 ); break; case 1: alert( 1 ); break; case 2: case 3: alert( 2,3 ); break; }改写映射关系非常直接原 if 判断switch 对应写法说明if (a 0)case 0:两个独立的单值分支各自带breakif (a 1)case 1:同上if (a 2 \|\| a 3)case 2:与case 3:连续书写利用 case 分组共享同一段代码官方解答明确指出前两个检查各转成一个case第三个检查则拆成两个连续书写的case——case 2:和case 3:之间没有break因此当a等于 2 或 3 时执行都会落到共享的alert(2,3)上。关于最后一个 break 的细节解答中特别加了一句注释代码中以*!*标注Please note: thebreakat the bottom is not required. But we put it to make the code future-proof.即由于case 3:已经位于switch末尾即使不写break执行到switch结束时也会自然终止行为完全一致。但官方仍然建议写上理由是为未来做防御假如日后想新增一个case 4需要把它加在case 3:之后如果那时忘记在case 3:末尾补上break执行流会从case 3:一路穿透fall-through进入case 4产生难以察觉的 bug现在就把break写好等于提前上了一道保险self-insurance让代码对未来的修改更健壮。这是一个非常典型的工程经验不要依赖恰好处于末尾来省略break显式写全break是更稳妥的习惯。四、核心知识点详解这道练习虽然短小却覆盖了switch语句最核心的三个知识点。下面结合官方教程 article.md 逐一展开。4.1 没有 break 时的穿透行为教程强调如果没有break执行会继续进入下一个case且不再做任何比较检查。例如下面这段代码a 4时case 4:匹配但因为没有break会依次继续执行case 5:和default:let a 2 2; switch (a) { case 3: alert( Too small ); case 4: alert( Exactly! ); case 5: alert( Too big ); default: alert( I dont know such values ); }最终会按顺序弹出三个 alertalert( Exactly! ); alert( Too big ); alert( I dont know such values );这个穿透行为既是新手最容易踩的坑也是下一节case 分组的底层原理。4.2 case 分组多个值共享同一段代码当多个取值需要执行完全相同的逻辑时可以把它们连续书写、只在最后一个共享case后放break。教程中的经典例子let a 3; switch (a) { case 4: alert(Right!); break; case 3: // (*) 两个 case 被分到一组 case 5: alert(Wrong!); alert(Why dont you take a math class?); break; default: alert(The result is strange. Really.); }当a为 3 时执行从case 3:开始即注释(*)那一行因为中间没有break会穿透过case 5:最终执行共享的两行alert当a为 5 时同理。两个值、一份代码——这就是练习中case 2:与case 3:连写的原理。官方明确说明分组能力正是switch/case无break穿透行为的一个副作用side effect。4.3 类型至关重要比较总是严格相等switch的比较是严格相等值与类型必须同时一致才算匹配。这与练习中prompt的转换逻辑直接相关练习里prompt(a?, )把输入转成了 number因此case 0:、case 1:用数字字面量就能正确匹配如果少了号a会是字符串0、1那么所有数字类型的case都将失效落入default。教程中的反面示例正好说明这一点let arg prompt(Enter a value?); // 注意没有 号arg 是字符串 switch (arg) { case 0: case 1: alert( One or zero ); break; case 2: alert( Two ); break; case 3: alert( Never executes! ); // 死代码 break; default: alert( An unknown value ); }输入0、1时匹配字符串0、1弹出One or zero输入2时匹配2弹出Two输入3时得到的是字符串3与数字3严格不等case 3:永远不会执行——它是死代码最终落到default分支。同理在 1-js/02-first-steps/18-javascript-specials/article.md 的基础回顾中也有一个对照示例prompt返回的18字符串匹配case 18:而非case 18:。写switch前先想清楚变量的类型是最重要的一步。五、补充拓展从 switch 反向改写为 if 的对照练习与本题互为镜像仓库在 1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/ 还提供了一道方向相反的练习把switch改写回if..else其中同样用到 case 分组Chrome/Firefox/Safari/Opera四个浏览器共用一个分支。官方解答solution.md提醒要精确匹配switch的行为if必须使用严格比较。虽然对该例中的字符串来说与结果相同但严谨起见仍应使用。同时browser Chrome || browser Firefox …这类多条件判断按行拆分会显著提升可读性。对照这道题可以更直观地体会两种写法的差异——switch在结构上更干净、更描述性强cleaner and more descriptive这也正是本题if 改写为 switch的价值所在。六、实战要点总结围绕这道练习可以提炼出四条可直接用于日常开发的规则多分支优先考虑 switch当同一个值需要与多个变体比较时switch比连环if更清晰但当分支条件是区间、复合逻辑或与多个变量相关时if仍然更合适。多个值共享逻辑就写连续 casecase 2:与case 3:连写中间不写break即可共享代码练习中的2,3分支正是这样实现的。每个 case 末尾都要写 break即使case位于switch末尾也建议显式补上break防止未来新增分支时出现意外穿透。警惕严格相等switch用比较字符串3与数字3永远不匹配涉及prompt等输入时记得用号或其他方式统一类型。如果希望进一步复习switch的完整语法、任意表达式作为参数等进阶细节可直接阅读仓库内的完整教程 1-js/02-first-steps/14-switch/article.md或对照两道方向相反的练习 1-rewrite-switch-if-else 与 2-rewrite-if-switch 进行双向巩固。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐BCompare_Keygen 运行的关键前置工作010Editor 二进制密钥补丁完整教程含 macOS SIP 避坑BCompare_Keygen 运行的关键前置工作010Editor 二进制密钥补丁完整教程含 macOS SIP 避坑 想使用 BCompare_Key文档/教程前端JavaScript switch 语句改写为 if..else等价转换的严格语义与最佳实践JavaScript switch 语句改写为 if..else等价转换的严格语义与最佳实践 本指南以现代 JavaScript 教程仓库 en.javas文档/教程前端JavaScript 教程实战将 if 链重写为 switch——分组 case 与 break 的深入解析JavaScript 教程实战将 if 链重写为 switch——分组 case 与 break 的深入解析 《Modern JavaScript Tutor文档/教程前端上一篇5个Apache DolphinScheduler大数据SQL任务优化技巧Hive/Spark SQL性能提升指南下一篇PDBRipper命令行实战自动化批量处理PDB文件的10个技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/1 8:03:44 · 阅读 1.2k JavaScript switch 语句实战：将 if 分支改写为 switch（以 javascript.info 练习为例）
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本文以 Modern JavaScript Tutorialjavascript.info仓库中的实战练习《Rewrite if into switch》为核心讲解如何将一段松散的多重if判断改写成结构清晰的switch语句。通过这个练习你将掌握switch的语法骨架、case分组多个值共享同一段代码、break的执行流控制以及switch使用严格相等比较这一关键特性。读完本文你不仅能独立完成这道练习还能在真实项目中写出更可读、更易维护的多分支判断逻辑。练习文件位于仓库 1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md配套官方解答见同目录下的 solution.md。一、练习背景switch 是什么为什么要用它在 JavaScript 中当我们需要把同一个值与多个候选值逐一比较、并分别执行不同代码时最常见的方式是写一连串if判断。但分支一多代码就会变得冗长、重复可读性明显下降。switch语句正是为解决这个问题而生的它把与多个变体比较这一过程组织成结构化的case块语义一目了然。官方教程在 1-js/02-first-steps/14-switch/article.md 中开宗明义Aswitchstatement can replace multipleifchecks. It gives a more descriptive way to compare a value with multiple variants.switch语句可以替代多个if检查它提供了一种更具描述性的方式来将一个值与多个变体进行比较。switch 的基本语法switch(x) { case value1: // 相当于 if (x value1) ... [break] case value2: // 相当于 if (x value2) ... [break] default: ... [break] }执行过程分三步x的值会先与第一个case的值value1做严格相等比较不匹配再与第二个value2比较依此类推一旦找到匹配switch就从对应case开始执行代码直到最近的break或switch结束如果所有case都不匹配则执行default分支的代码若存在。从语法结构可以看出switch天然比一连串if更适合同一个值对多个分支的场景——这正是本练习要求改写的原因。二、题目原文与改写目标练习原文task.md给出如下代码要求用一个switch语句重写let a prompt(a?, ); if (a 0) { alert( 0 ); } if (a 1) { alert( 1 ); } if (a 2 || a 3) { alert( 2,3 ); }对这段代码需要留意三点prompt(a?, )用一元加号把prompt返回的字符串强制转换为数字所以a是一个 number 类型三个if是并列关系中间没有else但逻辑上分支互斥行为等价于一个多分支判断第三个判断a 2 || a 3是两个值共享同一段处理逻辑这是改写时最值得关注的分组场景。改写目标很明确保持程序行为完全一致同时用switch表达出同样的三分支逻辑。三、官方解答三个 case 的对应关系官方解答solution.md给出了如下代码let a prompt(a?, ); switch (a) { case 0: alert( 0 ); break; case 1: alert( 1 ); break; case 2: case 3: alert( 2,3 ); break; }改写映射关系非常直接原 if 判断switch 对应写法说明if (a 0)case 0:两个独立的单值分支各自带breakif (a 1)case 1:同上if (a 2 \|\| a 3)case 2:与case 3:连续书写利用 case 分组共享同一段代码官方解答明确指出前两个检查各转成一个case第三个检查则拆成两个连续书写的case——case 2:和case 3:之间没有break因此当a等于 2 或 3 时执行都会落到共享的alert(2,3)上。关于最后一个 break 的细节解答中特别加了一句注释代码中以*!*标注Please note: thebreakat the bottom is not required. But we put it to make the code future-proof.即由于case 3:已经位于switch末尾即使不写break执行到switch结束时也会自然终止行为完全一致。但官方仍然建议写上理由是为未来做防御假如日后想新增一个case 4需要把它加在case 3:之后如果那时忘记在case 3:末尾补上break执行流会从case 3:一路穿透fall-through进入case 4产生难以察觉的 bug现在就把break写好等于提前上了一道保险self-insurance让代码对未来的修改更健壮。这是一个非常典型的工程经验不要依赖恰好处于末尾来省略break显式写全break是更稳妥的习惯。四、核心知识点详解这道练习虽然短小却覆盖了switch语句最核心的三个知识点。下面结合官方教程 article.md 逐一展开。4.1 没有 break 时的穿透行为教程强调如果没有break执行会继续进入下一个case且不再做任何比较检查。例如下面这段代码a 4时case 4:匹配但因为没有break会依次继续执行case 5:和default:let a 2 2; switch (a) { case 3: alert( Too small ); case 4: alert( Exactly! ); case 5: alert( Too big ); default: alert( I dont know such values ); }最终会按顺序弹出三个 alertalert( Exactly! ); alert( Too big ); alert( I dont know such values );这个穿透行为既是新手最容易踩的坑也是下一节case 分组的底层原理。4.2 case 分组多个值共享同一段代码当多个取值需要执行完全相同的逻辑时可以把它们连续书写、只在最后一个共享case后放break。教程中的经典例子let a 3; switch (a) { case 4: alert(Right!); break; case 3: // (*) 两个 case 被分到一组 case 5: alert(Wrong!); alert(Why dont you take a math class?); break; default: alert(The result is strange. Really.); }当a为 3 时执行从case 3:开始即注释(*)那一行因为中间没有break会穿透过case 5:最终执行共享的两行alert当a为 5 时同理。两个值、一份代码——这就是练习中case 2:与case 3:连写的原理。官方明确说明分组能力正是switch/case无break穿透行为的一个副作用side effect。4.3 类型至关重要比较总是严格相等switch的比较是严格相等值与类型必须同时一致才算匹配。这与练习中prompt的转换逻辑直接相关练习里prompt(a?, )把输入转成了 number因此case 0:、case 1:用数字字面量就能正确匹配如果少了号a会是字符串0、1那么所有数字类型的case都将失效落入default。教程中的反面示例正好说明这一点let arg prompt(Enter a value?); // 注意没有 号arg 是字符串 switch (arg) { case 0: case 1: alert( One or zero ); break; case 2: alert( Two ); break; case 3: alert( Never executes! ); // 死代码 break; default: alert( An unknown value ); }输入0、1时匹配字符串0、1弹出One or zero输入2时匹配2弹出Two输入3时得到的是字符串3与数字3严格不等case 3:永远不会执行——它是死代码最终落到default分支。同理在 1-js/02-first-steps/18-javascript-specials/article.md 的基础回顾中也有一个对照示例prompt返回的18字符串匹配case 18:而非case 18:。写switch前先想清楚变量的类型是最重要的一步。五、补充拓展从 switch 反向改写为 if 的对照练习与本题互为镜像仓库在 1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/ 还提供了一道方向相反的练习把switch改写回if..else其中同样用到 case 分组Chrome/Firefox/Safari/Opera四个浏览器共用一个分支。官方解答solution.md提醒要精确匹配switch的行为if必须使用严格比较。虽然对该例中的字符串来说与结果相同但严谨起见仍应使用。同时browser Chrome || browser Firefox …这类多条件判断按行拆分会显著提升可读性。对照这道题可以更直观地体会两种写法的差异——switch在结构上更干净、更描述性强cleaner and more descriptive这也正是本题if 改写为 switch的价值所在。六、实战要点总结围绕这道练习可以提炼出四条可直接用于日常开发的规则多分支优先考虑 switch当同一个值需要与多个变体比较时switch比连环if更清晰但当分支条件是区间、复合逻辑或与多个变量相关时if仍然更合适。多个值共享逻辑就写连续 casecase 2:与case 3:连写中间不写break即可共享代码练习中的2,3分支正是这样实现的。每个 case 末尾都要写 break即使case位于switch末尾也建议显式补上break防止未来新增分支时出现意外穿透。警惕严格相等switch用比较字符串3与数字3永远不匹配涉及prompt等输入时记得用号或其他方式统一类型。如果希望进一步复习switch的完整语法、任意表达式作为参数等进阶细节可直接阅读仓库内的完整教程 1-js/02-first-steps/14-switch/article.md或对照两道方向相反的练习 1-rewrite-switch-if-else 与 2-rewrite-if-switch 进行双向巩固。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐BCompare_Keygen 运行的关键前置工作010Editor 二进制密钥补丁完整教程含 macOS SIP 避坑BCompare_Keygen 运行的关键前置工作010Editor 二进制密钥补丁完整教程含 macOS SIP 避坑 想使用 BCompare_Key文档/教程前端JavaScript switch 语句改写为 if..else等价转换的严格语义与最佳实践JavaScript switch 语句改写为 if..else等价转换的严格语义与最佳实践 本指南以现代 JavaScript 教程仓库 en.javas文档/教程前端JavaScript 教程实战将 if 链重写为 switch——分组 case 与 break 的深入解析JavaScript 教程实战将 if 链重写为 switch——分组 case 与 break 的深入解析 《Modern JavaScript Tutor文档/教程前端上一篇5个Apache DolphinScheduler大数据SQL任务优化技巧Hive/Spark SQL性能提升指南下一篇PDBRipper命令行实战自动化批量处理PDB文件的10个技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考