JavaScript如何用switch-case替代if-else判断元素是否包含指定class？

可行性结论 #

完全可以实现，这里提供两种符合需求的实现方案：

方案1：switch true 实现（和原if-else逻辑完全等价） #

利用JS中switch语句的case支持任意表达式的特性，传入true作为匹配值即可实现和多if-else完全一致的判断逻辑：

switch (true) {
  case target.classList.contains('animate-heading'):
    // 原if分支的逻辑
    break
  case target.classList.contains('animate-text'):
    // 对应逻辑
    break
  case target.classList.contains('animate-buttons'):
    // 对应逻辑
    break
  case target.classList.contains('image-rotating-animation'):
    // 对应逻辑
    break
  case target.classList.contains('plans-heading-animation'):
    // 对应逻辑
    break
  case target.classList.contains('plans-animation'):
    // 对应逻辑
    break
  case target.classList.contains('animate-masonry'):
    // 对应逻辑
    break
  default:
    // 没有匹配到类名的兜底逻辑
}

注意：每个case末尾必须加break语句，否则会出现逻辑穿透，和你原有的if-else执行逻辑不一致。

方案2：对象映射实现（更推荐，易维护） #

如果后续需要新增更多类名判断逻辑，用对象映射的写法扩展性更强，不需要修改判断结构：

// 统一维护类名和对应逻辑的映射关系
const classLogicMap = {
  'animate-heading': () => {
    // 对应逻辑
  },
  'animate-text': () => {
    // 对应逻辑
  },
  'animate-buttons': () => {
    // 对应逻辑
  },
  'image-rotating-animation': () => {
    // 对应逻辑
  },
  'plans-heading-animation': () => {
    // 对应逻辑
  },
  'plans-animation': () => {
    // 对应逻辑
  },
  'animate-masonry': () => {
    // 对应逻辑
  }
}

// 执行匹配逻辑
for (const className of Object.keys(classLogicMap)) {
  if (target.classList.contains(className)) {
    classLogicMap[className]()
    break // 匹配到第一个就终止，和原if-else逻辑一致
  }
}

这个方案的优势是后续新增类名只需要往classLogicMap里加对应的键值对即可，代码更简洁，维护成本更低。

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