JavaScript单个switch case如何实现公共+分支独有逻辑

我此前编写了一段简单的 switch case 逻辑，初始代码如下：

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
    console.log('Oranges');
    break;
  case 'Mangoes':
    console.log('Mangoes');
    break;
  case 'Papayas':
    console.log('Papayas');
    break;
}

现需求调整，需要为'Oranges'、'Mangoes'、'Papayas'三个分支新增一条公共执行规则，同时保留原有分支的独立功能：例如当expr取值为Papayas时，预期输出结果为All和Papayas。

我尝试通过如下组合写法实现需求：

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
  case 'Mangoes':
  case 'Papayas':
    console.log('All');
  case 'Oranges':
    console.log('Oranges');
    break;
  case 'Mangoes':
    console.log('Mangoes');
    break;
  case 'Papayas':
    console.log('Papayas');
    break;
}

但该代码运行结果不符合预期，无论传入哪个分支的取值，最终都会输出All和Oranges。请问是否可以通过单个switch case结构实现上述需求？

代码运行不符合预期，核心是对switch的case穿透规则理解有误：switch匹配到对应case后，只要没碰到break，就会从当前命中的位置开始，顺序执行后面所有case块里的代码，不会再重复做值匹配判断。
比如传入Papayas时，首先命中第一组的case 'Papayas'，执行完console.log('All')，后面没有break，代码直接往下执行，顺带着就运行了紧接着的case 'Oranges'块里的console.log('Oranges')，碰到break才终止，根本走不到后面Mangoes、Papayas的分支。另外同一个switch层级下重复写相同的case值本身就不符合JavaScript语法规则，逻辑从根源上就有问题。

完全可以通过单个switch case结构实现需求，核心是正确利用case穿透规则，同时避免重复定义case值。

写法1：平层无嵌套（最稳妥，逻辑可读性最高） #

把公共逻辑放在每个合法分支的最前面，执行完公共逻辑再运行分支独有逻辑，最后通过break终止：

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
    console.log('All');
    console.log('Oranges');
    break;
  case 'Mangoes':
    console.log('All');
    console.log('Mangoes');
    break;
  case 'Papayas':
    console.log('All');
    console.log('Papayas');
    break;
}

写法2：分组穿透（减少重复代码） #

先把三个值归为一组触发公共逻辑，公共逻辑执行完后，再通过值判断运行对应分支的独立逻辑，全程仅使用一个外层switch结构：

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
  case 'Mangoes':
  case 'Papayas':
    console.log('All');
    // 匹配当前值执行对应独立逻辑
    if (expr === 'Oranges') console.log('Oranges');
    if (expr === 'Mangoes') console.log('Mangoes');
    if (expr === 'Papayas') console.log('Papayas');
    break;
}

注意：不要尝试在同一个switch层级下编写重复的case值，这种写法不符合ECMAScript规范，即使部分运行环境不抛出错误，执行逻辑也完全不可控。

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