freeCodeCamp Basic JavaScript 实战:在 switch 语句中添加 default 选项
本篇指南以 freeCodeCamp 开源课程中 Basic JavaScript 区块的「Adding a Default Option in Switch Statements」挑战(见 挑战源文件)为核心,系统讲解 switch 语句 default 分支的作用、语法约束与编写规范。读完本文后,你将掌握何时使用 default、为何它必须位于最后一个 case、以及如何独立完成该课程挑战并通过全部自动化测试断言。
为什么 switch 语句需要 default 选项
在编程中,switch 用于把"一个值"与"多个候选值"做匹配。但现实场景里,输入值不可能总是恰好命中你预先列出的每一种情况——就像 if/else 链最后通常需要一个兜底的 else 一样,switch 也需要一个"匹配不到任何 case 时执行"的兜底入口,这就是 default 语句。
课程原文档(challenge 源文件)给出了关键说明:
In a
switchstatement you may not be able to specify all possible values ascasestatements. Instead, you can add thedefaultstatement which will be executed if no matchingcasestatements are found. Think of it like the finalelsestatement in anif/elsechain.
即:当输入无法穷举所有取值时,加入 default;如果没有任何 case 匹配成功,就执行 default 中的语句——它的定位与 if/else 链中最后一个 else 完全对应。
default 的语法结构与放置规则
原文档给出了标准语法模板:
switch (num) {
case value1:
statement1;
break;
case value2:
statement2;
break;
...
default:
defaultStatement;
break;
}
这里有两条重要规则,课程明确强调:
default分支可以执行"没有匹配"时的兜底逻辑,其写法与普通case分支类似,只是没有匹配表达式,直接跟冒号。default应当放在最后一个位置。原文档原文为 "Adefaultstatement should be the last case." 把它放在所有case之后,代码可读性最好,也符合大多数编码规范;即使在部分引擎下允许default出现在中间,也应遵循"最后一个"的惯例,避免语义混乱。
补充说明一点前置知识:本挑战所在的课程块中,前一道挑战 Selecting from Many Options with Switch Statements 指出 case 的匹配使用严格相等 ===,且 break 用于阻止代码继续向下穿透执行。理解这一点是理解本挑战的前提——default 同样只在"严格相等匹配全部失败"后才触发。
挑战要求:a→apple、b→bird、c→cat,其余→stuff
本次挑战的指令(--instructions--)非常明确:编写一个 switch 语句,为 answer 赋值,满足以下映射关系:
| 输入值 | 输出字符串 |
|---|---|
a |
apple |
b |
bird |
c |
cat |
default(其余一切) |
stuff |
这里体现的就是"无法穷举全部取值"的典型场景:字母可能远不止 a、b、c,甚至调用方可能传入数字、符号乃至任意对象。与其罗列无穷多的 case,不如只处理已知的三个字母,其余统一交给 default 返回 stuff。
从种子代码到完整实现
课程提供了一个种子代码(--seed--),你需要在其基础上补全逻辑:
function switchOfStuff(val) {
let answer = "";
// Only change code below this line
// Only change code above this line
return answer;
}
switchOfStuff(1);
种子代码解析:
- 函数
switchOfStuff(val)接收一个参数val; - 变量
answer初始化为空字符串""; - 你只能在两行
// Only change code...注释之间添加switch逻辑; - 函数最终
return answer;,底部调用switchOfStuff(1)用于触发函数(返回值本身不会在页面显示)。
建议的解题步骤:
- 在注释区域内写出
switch (val) { ... }; - 针对字母映射添加
case "a":、case "b":、case "c":三个分支,分别把answer赋值为"apple"、"bird"、"cat",每个分支以break;收尾; - 最后添加
default:分支,将answer赋值为"stuff"。
官方参考答案解析
本挑战源文件内嵌的官方答案(--solutions--)如下:
function switchOfStuff(val) {
let answer = "";
switch(val) {
case "a":
answer = "apple";
break;
case "b":
answer = "bird";
break;
case "c":
answer = "cat";
break;
default:
answer = "stuff";
}
return answer;
}
逐行要点:
- 每个
case使用双引号包裹字符串字面量,与val做严格比较; - 每个
case块在赋值后都用break;跳出,防止"穿透"(fall-through)到下一个分支; - 官方答案的
default:分支没有写break;——因为它处于末尾,后面已无语句可穿透,这是可接受的写法。不过在早期学习中,保留break;能养成统一习惯; - 注意
default分支无需case表达式,直接是default:冒号。
自动化测试断言解读:如何验证你的代码
挑战的 --hints-- 段落在课程运行时会转换为自动化测试,只有全部通过才算完成。逐条解读如下:
assert(switchOfStuff('a') === 'apple');—— 传入字符串'a'应返回'apple';assert(switchOfStuff('b') === 'bird');—— 传入'b'应返回'bird';assert(switchOfStuff('c') === 'cat');—— 传入'c'应返回'cat';assert(switchOfStuff('d') === 'stuff');—— 传入未列出的'd',必须落入default返回'stuff';assert(switchOfStuff(4) === 'stuff');—— 传入数字4(甚至没有对应的case分支)同样应落入default。这里也能验证:字符串与数字类型不同,若误写case 4也不会匹配数字4以外的字符串场景;assert(!/else/g.test(__helpers.removeJSComments(code)) || !/if/g.test(__helpers.removeJSComments(code)));—— 你的代码不得使用if或else,必须改用switch结构实现。测试在移除 JS 注释后对源码做正则检查;assert(switchOfStuff('string-to-trigger-default-case') === 'stuff');—— 用任意"不可能命中任何 case 的字符串"验证default分支真实存在且生效;assert(__helpers.removeJSComments(code).match(/break/g).length > 2);—— 移除注释后统计break关键字,数量必须大于 2(即至少 3 个break,对应a/b/c三个分支)。
从测试可以反推出代码质量要求:必须包含 default、必须使用 break、禁止混入 if/else——这正是本课想强化的三个核心习惯。
关键易错点:为什么 4 会得到 stuff
case 采用严格相等(===)匹配。所以:
switchOfStuff('a'):字符串'a' === 'a'命中,返回apple;switchOfStuff('d'):没有任何case 'd',落入default,返回stuff;switchOfStuff(4):数字4不命中任何字符串case,也落入default,返回stuff。
如果把 case 写成 case "4":(字符串),则数字 4 仍不会命中(4 === "4" 为 false),依旧走 default。这正是 default 作为"万能兜底"的价值所在:无论传入什么类型的值,只要未在分支中显式列出,就统一走默认逻辑,不会出现"没有分支被匹配却未定义行为"的情况。
本挑战在课程体系中的位置与延伸阅读
从课程结构元数据(basic-javascript.json)可以看到,本挑战(id 56533eb9ac21ba0edf2244de)在 Basic JavaScript 区块中的编排顺序是:
- 前序:Selecting from Many Options with Switch Statements —— 学会用
switch从多个选项中精确匹配一个值; - 本课:Adding a Default Option in Switch Statements —— 学会为无法穷举的取值增加兜底分支;
- 后序:Multiple Identical Options in Switch Statements —— 学会利用"省略
break造成穿透"合并多个同结果输入; - 再后:Replacing If Else Chains with Switch —— 综合运用上述能力,把冗长的
if/else链改写为等价的switch。
建议在浏览器开发者工具控制台或任意 Node 环境先运行官方答案做对照,再用种子代码自测:分别调用 switchOfStuff('a')、switchOfStuff('b')、switchOfStuff('c')、switchOfStuff('anythingElse') 与 switchOfStuff(4),观察返回值是否与 --hints-- 中的断言完全一致。当你能解释清楚"为什么每一种输入都有确定输出"时,说明你已经真正掌握了 switch + default 的兜底设计思想。
atomcodeClaude Code 的开源替代方案。连接任意大模型,编辑代码,运行命令,自动验证 — 全自动执行。用 Rust 构建,极致性能。 | An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get StartedRust0627
Hy4-previewHy4 preview 是由腾讯混元团队研发的新一代混合专家(MoE)旗舰模型。模型总参数量 770B,每个 token 激活 49B,主干共包含78层,第一层采用标准 FFN,其余 77 层均为 MoE 结构,每层包含 256 个路由专家与 1 个共享专家,每个 token 激活 top-8 路由专家及共享专家。主干之外原生内置 1 层 MTP(总参数量 10B,激活 0.7B)以支持投机解码。Python00
GLM-5.3GLM-5.3 与 GLM-5.2 使用相同的基座模型——所有提升均来自后训练。与 GLM-5.2 相比,它在复杂编程和长程任务上的表现显著提升。Jinja00
GLM-5.3-FlashGLM-5.3-Flash (320B-A18B),是GLM-5系列的首个原生多模态模型。320B总参数,能力超过GLM-5.2Jinja00
Spark-X2.5-4BSpark-X2.5-4B 旨在让强大的 AI 更实用、更高效、更易获得。在广泛日常任务中表现强劲,涵盖对话、写作、翻译、推理、编码、工具调用以及智能体工作流,并在同等规模的开源模型中取得领先成绩。Spark-X2.5 将面向效率的架构与最高 1M tokens 的原生上下文窗口相结合,并支持 200 多种语言。Python00
Spark-X2.5-1.7BSpark-X2.5-1.7B 旨在让强大的 AI 更加实用、高效且易于获取。这些模型在广泛的日常任务中表现出色,涵盖对话、写作、翻译、推理、编程、工具调用和智能体工作流,并在同等规模的开源模型中取得领先结果。Spark-X2.5 将面向效率的架构与最高 1M tokens 的原生上下文窗口相结合,并支持 200 多种语言。Python00