如何优化Pug/Node.js/Express中的循环逻辑，替代冗余if-else判断？

核心优化思路 #

• 把重复的状态判断逻辑抽为状态映射配置表，替代多层if-else判断，查找效率O(1)，修改维护只需要改一处配置
• 把st1到st12的重复渲染逻辑改为内层循环，动态读取属性值，完全消除重复代码

具体实现步骤 #

步骤1：定义状态映射表 #

可以直接在Pug模板顶部定义，也可以在Express路由中渲染模板时传入：

//- 放在Pug模板顶部，或者Express侧传入：res.render('模板名', {statusMap: ...})
- const statusMap = {
  0: {class: 'badge-success', text: 'Good'},
  1: {class: 'badge-danger', text: 'Bad'},
  2: {class: 'badge-secondary', text: 'Excluded'},
  default: {class: 'badge-light', text: 'Disconnected'}
}

步骤2：改写循环渲染逻辑 #

替换原有所有重复的.col代码段为双层循环即可：

.row.row-cols-12
  each portmap in portMap2
    //- 循环生成12个状态列，可根据字段数量灵活调整长度
    each i in Array.from({length:12}, (_,k)=>k+1)
      - const statusVal = portmap[`st${i}`]
      - const {class: badgeClass, text: badgeText} = statusMap[statusVal] ?? statusMap.default
      .col
        span.badge.badge-pill(class=badgeClass)= badgeText

注：如果使用的Node.js版本较低不支持空值合并运算符??，可以替换为逻辑或运算符||即可。

优化收益 #

• 代码量减少90%以上，完全消除重复冗余逻辑
• 后续迭代成本极低：如果需要新增状态取值、修改状态样式/文案，仅需要修改statusMap一处即可；如果状态字段数量变化，仅需要修改内层循环的长度参数
• 运行效率更高：对象属性查找替代多层if-else分支判断，性能开销更低

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