JavaScript中如何优化多层嵌套If Else条件判断逻辑

你判断switch不适用是正确的：switch仅支持单值精确匹配，当前场景是3个布尔条件的组合分支，共8种互斥情况，用switch需要先手动把多条件拼成单值，写法冗余且灵活性差。
原代码的核心问题是嵌套层级深、相同维度的条件判断重复（比如conditionTwo === false && !conditionThree的分支，无论conditionOne是true还是false，操作的都是SetThirdValue，仅入参不同），后续修改逻辑很容易在多层嵌套里漏改分支。

这类多条件组合分支的场景，最易维护的写法是用决策表（对象映射） 把所有条件组合和对应执行逻辑平铺配置，完全消除嵌套，所有分支一目了然：

const conditionOne = true
const conditionTwo = true
const conditionThree = false

// 决策表：key为三个条件按固定顺序拼接的唯一标识，value为对应执行逻辑
const actionMap = {
  'true-true-false': () => {
    console.log('SetFirstValue  set somevalue 1')
    // dispatch(new Actions.SetFirstValue('someValue1'))
  },
  'true-true-true': () => {
    console.log('SetSecondValue  set somevalue 2')
    // dispatch(new Actions.SetSecondValue('someValue2'))
  },
  'true-false-false': () => {
    console.log('SetThirdValue  set somevalue 3')
    // dispatch(new Actions.SetThirdValue('someValue3'))
  },
  'true-false-true': () => {
    console.log('SetFourthValue  set somevalue 4')
    // dispatch(new Actions.SetFourthValue('someValue4'))
  },
  'false-true-false': () => {
    console.log('SetFirstValue  set null ')
    // dispatch(new Actions.SetFirstValue(null))
  },
  'false-true-true': () => {
    console.log('SetSixValue  set somevalue 6')
    // dispatch(new Actions.SetSixValue('someValue6'))
  },
  'false-false-false': () => {
    console.log('SetThirdValue  set null ')
    // dispatch(new Actions.SetThirdValue(null))
  },
  'false-false-true': () => {
    console.log('SetEightValue  set somevalue 8')
    // dispatch(new Actions.SetEightValue('someValue8'))
  }
}

// 生成当前条件对应的key，直接查表执行
const currentKey = `${conditionOne}-${conditionTwo}-${conditionThree}`
actionMap[currentKey]?.()

方案优势 #

• 零嵌套：所有分支平铺展示，不需要在多层if/else里翻找逻辑
• 无重复判断：不需要重复写conditionOne/conditionTwo/conditionThree的判断逻辑
• 易维护：新增、修改、删除分支只需要调整actionMap里的配置，不需要改动分支判断代码
• 易扩展：如果需要加默认分支、分支权限控制、日志埋点等逻辑，只需要在查表执行的位置统一加即可

进一步优化 #

如果分支里的逻辑重复度高（比如都是触发不同的Action，仅Action类型和入参不同），可以抽离公共逻辑减少重复代码：

// 抽离公共Action执行逻辑
const dispatchAction = (Action, payload) => {
  console.log(`${Action.name} set ${payload}`)
  // dispatch(new Action(payload))
}

const actionMap = {
  'true-true-false': () => dispatchAction(Actions.SetFirstValue, 'someValue1'),
  'true-true-true': () => dispatchAction(Actions.SetSecondValue, 'someValue2'),
  'true-false-false': () => dispatchAction(Actions.SetThirdValue, 'someValue3'),
  'true-false-true': () => dispatchAction(Actions.SetFourthValue, 'someValue4'),
  'false-true-false': () => dispatchAction(Actions.SetFirstValue, null),
  'false-true-true': () => dispatchAction(Actions.SetSixValue, 'someValue6'),
  'false-false-false': () => dispatchAction(Actions.SetThirdValue, null),
  'false-false-true': () => dispatchAction(Actions.SetEightValue, 'someValue8'),
}

如果后续条件数量增多（超过4个布尔条件），可以用位掩码代替字符串拼接生成key，性能更好：

// 三个布尔值对应三位二进制位，生成0-7的数字作为唯一key
const currentKey = 
  (conditionOne ? 0b100 : 0) | 
  (conditionTwo ? 0b010 : 0) | 
  (conditionThree ? 0b001 : 0)
// 只需要把actionMap的key换成对应的数字即可

不推荐用提前return、拆平if的方式优化：这类方式虽然能减少一层嵌套，但还是需要重复写conditionTwo、conditionThree的判断逻辑，后续修改需要同时改多处，维护性远不如决策表方案。

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