如何重构含多条件判断的JavaScript代码，减少if语句使用？

针对你这段通过4个状态值确定style的代码，这里提供几种更易读、好维护的重构方案，彻底摆脱嵌套if的繁琐：

方案1：规则优先级映射表 #

把判断规则和对应的style按优先级顺序存成数组，遍历找到第一个匹配的规则即可。这种方式把逻辑和数据分离，后续改规则、加新style只需要修改数组，不用动判断结构：

const alert = markers.some(marker => marker.hasAlerts > 0);
const warning = markers.some(marker => marker.hasWarnings > 0);
const isCurrentHourAlert = markers.some(marker => marker.isCurrentHourAlert > 0);
const isCurrentHourWarnings = markers.some(marker => marker.isCurrentHourWarnings > 0);

// 按优先级从高到低定义规则数组
const styleRules = [
  { condition: () => isCurrentHourAlert, style: 4 },
  { condition: () => isCurrentHourWarnings, style: 5 },
  { condition: () => alert, style: 2 },
  { condition: () => warning, style: 3 },
  { condition: () => true, style: 1 } // 默认兜底规则
];

// 找到第一个符合条件的规则，直接取style值
const style = styleRules.find(rule => rule.condition()).style;

方案2：简化冗余条件判断 #

原代码里有重复的判断分支，先合并冗余逻辑，让代码直接清爽很多：

const alert = markers.some(marker => marker.hasAlerts > 0);
const warning = markers.some(marker => marker.hasWarnings > 0);
const isCurrentHourAlert = markers.some(marker => marker.isCurrentHourAlert > 0);
const isCurrentHourWarnings = markers.some(marker => marker.isCurrentHourWarnings > 0);

let style = 1;
if (isCurrentHourAlert) {
  style = 4;
} else if (isCurrentHourWarnings) {
  style = 5;
} else if (alert) {
  style = 2;
} else if (warning) {
  style = 3;
}

原代码中isCurrentHourAlert && isCurrentHourWarnings和单独的isCurrentHourAlert结果完全一致，alert && warning和单独的alert也是同理，直接合并成一个判断分支即可，减少不必要的条件检查。

方案3：权重计算映射法 #

给每个状态按优先级分配权重，通过权重总和匹配对应的style，适合状态优先级明确的场景：

const alert = markers.some(marker => marker.hasAlerts > 0);
const warning = markers.some(marker => marker.hasWarnings > 0);
const isCurrentHourAlert = markers.some(marker => marker.isCurrentHourAlert > 0);
const isCurrentHourWarnings = markers.some(marker => marker.isCurrentHourWarnings > 0);

// 按优先级从高到低分配权重，确保高优先级状态的权重覆盖低优先级
const weight = (isCurrentHourAlert ? 100 : 0) + 
               (isCurrentHourWarnings ? 50 : 0) + 
               (alert ? 20 : 0) + 
               (warning ? 10 : 0);

// 权重值和style的映射表
const styleMap = {
  100: 4, 150: 4, // 当前小时alert不管有没有warning都返回4
  50: 5,
  20: 2, 30: 2, // 非当前小时alert不管有没有warning都返回2
  10: 3,
  0: 1
};

const style = styleMap[weight] || 1;

内容的提问来源于stack exchange，提问作者John Alberto López Hernández