JavaScript switch语句执行疑问：为何下述代码最终输出step 3

运行下述代码后，控制台最终输出step 3，无法理解对应的运行逻辑：

let switch;
switch('abc'){
  case('abc'):
    switch = 'step 1';
  case('def'):
    switch = 'step 2';
  default:
    switch = 'step 3';
}
console.log(switch);

运行逻辑拆解 #

出现这个结果的核心原因是JavaScript switch 语句的默认穿透（fall-through）规则：

• 首先会将switch后传入的匹配值'abc'，和每个case的判断值做严格相等（===）比对，定位到第一个匹配的case('abc')分支作为执行起点
• 从匹配的分支开始，代码会顺着顺序向下逐行执行，直到遇到break、return或者整个switch代码块执行完毕才会停止——这个过程中不会再对后续的case匹配做判断
• 逐行跟踪执行流程：
  1. 进入匹配到的case('abc')分支，执行赋值switch = 'step 1'，因为分支末尾没有写break，直接穿透到相邻的下一个分支
  2. 执行case('def')分支的赋值逻辑，将switch的值覆盖为'step 2'，这个分支同样没有break，继续向下穿透
  3. 进入default分支，将switch的值再次覆盖为'step 3'，此时已经到达switch代码块的末尾，执行停止
• 后续执行console.log(switch)时，就会拿到最后一次被赋值的'step 3'结果。

常规开发中，每个case分支的逻辑执行完成后，需要手动添加break语句阻断穿透，才能实现“匹配到对应分支就仅执行该分支逻辑”的预期效果。

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