如何消除JavaScript中多函数重复的if-else逻辑？

1. 抽离公共判断逻辑为独立函数 #

这是最直接的优化方式，把重复的电池等级判断逻辑单独封装成一个函数，其他业务函数只需要调用这个函数获取等级分类，再基于分类做各自的处理，彻底消除冗余代码。

举个例子：

// 公共判断函数：返回电池等级的分类
function getBatteryCategory(level) {
  if (level <= 20) {
    return "low";
  } else if (level <= 60) {
    return "medium";
  } else {
    return "high";
  }
}

// 原来的getBatteryColor，现在不用写重复判断
function getBatteryColor(level) {
  const category = getBatteryCategory(level);
  switch(category) {
    case "low":
      return "#ff4444";
    case "medium":
      return "#ffaa33";
    case "high":
      return "#00C851";
  }
}

// 切换电池图标函数，同样复用公共判断
function changeBatteryIcon(level) {
  const category = getBatteryCategory(level);
  const iconElement = document.getElementById("battery-icon");
  
  switch(category) {
    case "low":
      iconElement.src = "battery-low.svg";
      break;
    case "medium":
      iconElement.src = "battery-medium.svg";
      break;
    case "high":
      iconElement.src = "battery-high.svg";
      break;
  }
}

2. 用配置映射表进一步简化代码 #

如果每个等级对应的属性（颜色、图标等）是固定的，可以把这些配置放到一个对象里，公共函数返回分类后，直接从配置表中取值，连switch都可以省掉，代码更简洁且易维护——后续要修改颜色或图标，只需要改配置对象，不用动业务函数。

示例：

// 公共配置表：键是等级分类，值是对应的属性
const batteryConfig = {
  low: { color: "#ff4444", icon: "battery-low.svg" },
  medium: { color: "#ffaa33", icon: "battery-medium.svg" },
  high: { color: "#00C851", icon: "battery-high.svg" }
};

// 公共判断函数不变
function getBatteryCategory(level) {
  if (level <= 20) return "low";
  if (level <= 60) return "medium";
  return "high";
}

// 获取颜色的函数变得极简
function getBatteryColor(level) {
  const category = getBatteryCategory(level);
  return batteryConfig[category].color;
}

// 切换图标函数同理
function changeBatteryIcon(level) {
  const category = getBatteryCategory(level);
  document.getElementById("battery-icon").src = batteryConfig[category].icon;
}

对你疑问的解答 #

• 能否集中逻辑到一处？
  完全可以，上面两种方案都是把重复的if-else逻辑集中在getBatteryCategory函数里，所有依赖等级判断的函数都调用它，从根源上消除冗余。

• 合并所有功能到一个大函数合适吗？
  不建议这么做。单一职责原则是代码可维护性的基础：getBatteryColor只负责返回颜色，changeBatteryIcon只负责操作DOM切换图标，拆分后每个函数职责清晰，后续修改其中一个功能时，不会影响另一个，也更容易定位问题。如果合并成一个大函数，会导致逻辑耦合，后期维护成本急剧上升。

• 关于Promise/async函数
  你不需要在这里使用它们，Promise和async/await是用来处理异步操作的（比如从后端API获取电池数据、读取设备硬件信息这类需要等待的操作），而电池等级判断是同步逻辑，直接用普通函数就能搞定，不用强行引入异步语法。

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