首页
/ freeCodeCamp Basic JavaScript 实战:在 switch 语句中添加 default 选项

freeCodeCamp Basic JavaScript 实战:在 switch 语句中添加 default 选项

2026-09-07 09:38:42作者:柏廷章Berta

本篇指南以 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 switch statement you may not be able to specify all possible values as case statements. Instead, you can add the default statement which will be executed if no matching case statements are found. Think of it like the final else statement in an if/else chain.

即:当输入无法穷举所有取值时,加入 default;如果没有任何 case 匹配成功,就执行 default 中的语句——它的定位与 if/else 链中最后一个 else 完全对应。

default 的语法结构与放置规则

原文档给出了标准语法模板:

switch (num) {
  case value1:
    statement1;
    break;
  case value2:
    statement2;
    break;
...
  default:
    defaultStatement;
    break;
}

这里有两条重要规则,课程明确强调:

  1. default 分支可以执行"没有匹配"时的兜底逻辑,其写法与普通 case 分支类似,只是没有匹配表达式,直接跟冒号。
  2. default 应当放在最后一个位置。原文档原文为 "A default statement 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

这里体现的就是"无法穷举全部取值"的典型场景:字母可能远不止 abc,甚至调用方可能传入数字、符号乃至任意对象。与其罗列无穷多的 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) 用于触发函数(返回值本身不会在页面显示)。

建议的解题步骤:

  1. 在注释区域内写出 switch (val) { ... }
  2. 针对字母映射添加 case "a":case "b":case "c": 三个分支,分别把 answer 赋值为 "apple""bird""cat",每个分支以 break; 收尾;
  3. 最后添加 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-- 段落在课程运行时会转换为自动化测试,只有全部通过才算完成。逐条解读如下:

  1. assert(switchOfStuff('a') === 'apple'); —— 传入字符串 'a' 应返回 'apple'
  2. assert(switchOfStuff('b') === 'bird'); —— 传入 'b' 应返回 'bird'
  3. assert(switchOfStuff('c') === 'cat'); —— 传入 'c' 应返回 'cat'
  4. assert(switchOfStuff('d') === 'stuff'); —— 传入未列出的 'd',必须落入 default 返回 'stuff'
  5. assert(switchOfStuff(4) === 'stuff'); —— 传入数字 4(甚至没有对应的 case 分支)同样应落入 default。这里也能验证:字符串与数字类型不同,若误写 case 4 也不会匹配数字 4 以外的字符串场景;
  6. assert(!/else/g.test(__helpers.removeJSComments(code)) || !/if/g.test(__helpers.removeJSComments(code))); —— 你的代码不得使用 ifelse,必须改用 switch 结构实现。测试在移除 JS 注释后对源码做正则检查;
  7. assert(switchOfStuff('string-to-trigger-default-case') === 'stuff'); —— 用任意"不可能命中任何 case 的字符串"验证 default 分支真实存在且生效;
  8. 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 区块中的编排顺序是:

建议在浏览器开发者工具控制台或任意 Node 环境先运行官方答案做对照,再用种子代码自测:分别调用 switchOfStuff('a')switchOfStuff('b')switchOfStuff('c')switchOfStuff('anythingElse')switchOfStuff(4),观察返回值是否与 --hints-- 中的断言完全一致。当你能解释清楚"为什么每一种输入都有确定输出"时,说明你已经真正掌握了 switch + default 的兜底设计思想。

登录后查看全文
热门项目推荐
相关项目推荐