为何两个JavaScript switch语句在Chrome控制台输出不同结果？

以下两个switch语句除了console.log的使用方式不同外结构一致，但在Chrome控制台输出结果不同。第一个语句输出：this is the one；第二个语句输出：1和this is the one。请解释原因。

示例代码：

const q = 1;
switch (q) {

    case '1':
        answer = "one";

    case 1:
       answer = 1;

    case 2:
       answer = "this is the one";
        break;

    default:
        answer = "not working";

}
console.log(answer);

const q1 = 1;
switch (q1) {

    case '1':
        console.log("one");

    case 1:
       console.log(1);

    case 2:
        console.log("this is the one");
        break;

    default:
        console.log ("not working");
}

核心原因：switch的“穿透特性” #

switch语句使用**严格相等（===）**匹配case值，匹配成功后如果没有break语句，代码会持续执行后续所有case的逻辑，直到遇到break或者switch代码块结束。

第一个switch语句的执行过程 #

• q = 1，和case '1'（字符串）严格不相等，跳过。
• 匹配到case 1，执行answer = 1;，但这个case没有break，代码继续向下走。
• 进入case 2，执行answer = "this is the one";，随后遇到break，switch结束。
• 最后console.log(answer)输出的是最后一次赋值的结果：this is the one。

第二个switch语句的执行过程 #

• q1 = 1，同样跳过不匹配的case '1'，匹配到case 1。
• 执行console.log(1);，控制台输出1，这个case没有break，代码继续向下。
• 进入case 2，执行console.log("this is the one");，控制台输出this is the one，随后遇到break，switch结束。
• 所以最终控制台会先后输出1和this is the one。

两者的本质差异在于：第一个是通过多次赋值覆盖变量，最终只输出变量的最终值；第二个是每执行一个case就直接打印，穿透特性导致了多次打印。

内容的提问来源于stack exchange，提问作者PenrhynTim