JavaScript中能否自动为数组所有元素动态生成switch case分支

JavaScript语法本身不允许在switch语句块内嵌套循环生成case分支，switch的case属于静态语法结构，必须在代码书写阶段明确声明。可以用以下几种方案实现同等的动态匹配效果：

方案1：统一动作匹配（所有数组元素对应同一操作） #

如果所有匹配到数组元素的场景都执行相同逻辑，直接用数组查找判断即可：

const target = "待匹配的目标值"
const cities = ["City A", "City B", "City C"];

// 等价于所有case都执行同一Action的switch
if (cities.includes(target)) {
  // 统一执行的Action逻辑
} else {
  // 等价于switch的default分支逻辑
}

方案2：对象映射表（不同元素对应不同操作，最推荐） #

用键值对存储每个元素对应的操作，完全支持动态生成映射关系，是替代switch的最优方案：

const cities = ["City A", "City B", "City C"];
// 可动态生成映射表，无需写死分支
const actionMap = {}
cities.forEach(city => {
  // 按规则给每个元素绑定对应操作
  actionMap[city] = () => {
    console.log(`执行${city}对应的逻辑`)
  }
})

const target = "City B"
// 执行匹配
if (actionMap[target]) {
  actionMap[target]()
} else {
  // default分支逻辑
}

方案3：支持case穿透的动态实现 #

如果需要用到switch的case穿透（匹配到某分支后继续执行后续所有分支）的特性，可以用索引匹配+循环实现：

const target = "City A"
const cities = ["City A", "City B", "City C"];
// 每个索引对应的操作，和cities数组一一对应，可动态追加
const actions = [
  () => console.log("City A的逻辑"),
  () => console.log("City B的逻辑"),
  () => console.log("City C的逻辑")
]

const matchIndex = cities.findIndex(item => item === target)
if (matchIndex > -1) {
  // 从匹配到的索引开始循环执行，实现穿透效果
  for (let i = matchIndex; i < actions.length; i++) {
    actions[i]()
  }
  // 如果不需要穿透，去掉循环直接执行 actions[matchIndex]() 即可
} else {
  // default分支逻辑
}

以上所有方案的匹配规则都和原生switch保持一致，为严格相等（===）匹配，需要自定义匹配规则时修改includes/findIndex的判断逻辑即可。

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