JavaScript变量与数组效率对比：HTML表格赋值冗余代码优化咨询

重构方案 #

1. 结构化体征参考值配置 #

把所有体重区间和对应的体征上下限统一收敛为配置数组，后续增删改区间、调整参考值都只需要修改该配置，无需改动业务逻辑。

// 全局统一体征配置，按体重区间划分
const vitalSignsConfig = [
  {
    minWeight: 0,
    maxWeight: 10,
    heartRate: { min: 110, max: 130 },
    respiratoryRate: { min: 20, max: 30 },
    bloodPressure: { min: 80, max: 110 }
  },
  {
    minWeight: 10,
    maxWeight: 20,
    heartRate: { min: 100, max: 120 },
    respiratoryRate: { min: 18, max: 25 },
    bloodPressure: { min: 85, max: 115 }
  },
  // 其余体重区间按相同格式补充即可
]

2. 提前缓存DOM节点，消除重复查询 #

页面初始化时一次性查询所有需要填充的DOM元素存入对象，后续赋值直接调用缓存的节点，避免重复执行DOM查询带来的性能开销。

// 页面加载完成后执行一次缓存即可
const domCache = {
  heartRateMin: document.getElementById('heart-rate-min'),
  heartRateMax: document.getElementById('heart-rate-max'),
  respiratoryRateMin: document.getElementById('respiratory-rate-min'),
  respiratoryRateMax: document.getElementById('respiratory-rate-max'),
  bloodPressureMin: document.getElementById('blood-pressure-min'),
  bloodPressureMax: document.getElementById('blood-pressure-max'),
  // 后续新增体征项仅需在此处补充对应DOM缓存
}

3. 用遍历匹配替换全部if-else分支 #

计算得到体重后，直接遍历配置数组匹配符合的区间项，无需编写任何条件分支代码。

// 传入计算得到的体重，返回对应体征参考值
function getMatchedVitals(weight) {
  return vitalSignsConfig.find(item => weight >= item.minWeight && weight < item.maxWeight)
}

4. 批量赋值填充表格 #

匹配到对应体征值后可直接按字段赋值，也可以通过字段映射表循环赋值，消除重复的赋值语句。

function fillVitalsTable(weight) {
  const matchedVitals = getMatchedVitals(weight)
  if (!matchedVitals) return // 异常值兜底

  // 基础赋值写法，清晰直观
  domCache.heartRateMin.textContent = matchedVitals.heartRate.min
  domCache.heartRateMax.textContent = matchedVitals.heartRate.max
  domCache.respiratoryRateMin.textContent = matchedVitals.respiratoryRate.min
  domCache.respiratoryRateMax.textContent = matchedVitals.respiratoryRate.max
  domCache.bloodPressureMin.textContent = matchedVitals.bloodPressure.min
  domCache.bloodPressureMax.textContent = matchedVitals.bloodPressure.max

  // 更精简的循环赋值写法，新增体征无需新增赋值代码
  // const fieldMap = [
  //   ['heartRate', 'min', domCache.heartRateMin],
  //   ['heartRate', 'max', domCache.heartRateMax],
  //   ['respiratoryRate', 'min', domCache.respiratoryRateMin],
  //   ['respiratoryRate', 'max', domCache.respiratoryRateMax],
  //   ['bloodPressure', 'min', domCache.bloodPressureMin],
  //   ['bloodPressure', 'max', domCache.bloodPressureMax],
  // ]
  // fieldMap.forEach(([type, limit, dom]) => {
  //   dom.textContent = matchedVitals[type][limit]
  // })
}

优化收益 #

• 可维护性：所有配置集中管理，新增体重区间、新增体征项都仅需修改配置部分，逻辑代码完全不用动
• 性能：DOM仅查询1次，区间匹配逻辑时间复杂度为O(n)，远优于零散if-else的维护成本
• 冗余度：完全消除重复的条件分支、重复DOM查询、重复赋值代码，整体代码量可降低60%以上

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