如何重构多条件if判断的菜单切换代码，并用对象字面量优化布尔变量管理

将分散的布尔状态变量整合到单个对象字面量中，可完全消除冗余的分支判断，后续扩展菜单项也无需修改切换逻辑，具体实现如下：

重构后代码 #

// 所有菜单项的选中状态集中管理，key和菜单id一一对应
menuActive = {
  a: false,
  b: false,
  c: false
}

switchMenu(id: string) {
  // 遍历所有菜单项，和传入id匹配的设为激活状态，其余设为未激活
  Object.keys(this.menuActive).forEach(menuId => {
    this.menuActive[menuId] = menuId === id
  })
}

优化说明 #

• 消除了所有冗余的if分支，后续新增菜单项仅需要在menuActive对象中新增对应key即可，无需修改switchMenu的逻辑
• 状态集中管理，后续需要批量操作选中状态（比如全部重置、全选）时，直接操作menuActive对象即可，无需逐个修改独立变量
• 模板绑定逻辑几乎无变更，原来取itemA的地方改为取menuActive.a即可，适配成本极低

如果菜单项数量较多，希望减少遍历开销，也可以使用如下性能优化版本：

switchMenu(id: string) {
  // 先把当前激活的项重置为未激活
  const activeId = Object.keys(this.menuActive).find(key => this.menuActive[key])
  if (activeId) this.menuActive[activeId] = false
  // 仅修改目标项的激活状态
  this.menuActive[id] = true
}

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