JavaScript实现贷款金额阶梯递增费率计费代码咨询

现有代码的问题 #

你目前写的代码存在几个明显的硬伤，直接运行会出问题：

• 条件逻辑矛盾：loan >= 2000000 && loan < 2000000这类判断永远不可能成立，数值无法同时满足大于等于200万且小于200万，对应档位的逻辑完全不会触发。
• 语法错误：JavaScript中%是取余运算符，不能直接写1%、0.8%代表费率，参与数值计算时要转成对应的小数，比如1%对应0.01、0.8%对应0.008。
• 判断逻辑不互斥：你用了多个平级的if判断，没有做互斥处理，一旦金额满足多个判断条件，charge的值会被反复覆盖，最终计算结果错误。
• 硬编码跳档逻辑维护性极差：你设计的通过i变量手动跳档、取相邻档位费率的逻辑完全没有通用性，后续只要调整档位区间、增减档位，这套逻辑就会直接出bug，不建议使用。

推荐实现方案 #

不要硬写多段if判断，把阶梯档位抽成可配置的数组，不管是全额累进（到哪个档位就全额按该档位费率计算）还是超额累进（每个档位区间的金额单独按对应费率计算，累加得总费用）都能很方便实现，后续调整费率、改档位只需要改配置就行：

// 阶梯档位配置，按金额下限升序排列，可根据实际定价规则调整
const tierList = [
  { min: 0, max: 500000, rate: 0.01 },
  { min: 500000, max: 1000000, rate: 0.008 },
  { min: 1000000, max: 2000000, rate: 0.007 },
  { min: 2000000, max: Infinity, rate: 0.006 }
]

/**
 * 计算阶梯费用
 * @param {number} loanAmount 贷款金额
 * @param {boolean} isFullTier true=全额累进计算，false=超额累进计算
 * @returns {number} 总费用
 */
function calculateCharge(loanAmount, isFullTier = false) {
  // 全额累进逻辑
  if (isFullTier) {
    const matchTier = [...tierList].reverse().find(tier => loanAmount >= tier.min)
    return loanAmount * matchTier.rate
  }

  // 超额累进逻辑
  let total = 0
  let remain = loanAmount
  for (const tier of tierList) {
    if (remain <= 0) break
    const currentTierAmount = Math.min(remain, tier.max - tier.min)
    total += currentTierAmount * tier.rate
    remain -= currentTierAmount
  }
  return total
}

关于事件监听的问题 #

如果你的贷款金额是通过页面输入框获取，想要用户输入时实时展示对应费用，就需要给输入框绑定事件监听，推荐用input事件，用户输入过程中就能实时触发计算，不用等点击提交按钮，体验更好，参考代码如下：

const loanInput = document.querySelector('#loanAmount') // 贷款金额输入框
const resultDom = document.querySelector('#chargeResult') // 结果展示节点

loanInput.addEventListener('input', function() {
  const loanVal = Number(this.value.trim())
  if (isNaN(loanVal) || loanVal < 0) {
    resultDom.textContent = '请输入有效的贷款金额'
    return
  }
  const charge = calculateCharge(loanVal)
  resultDom.textContent = `当前档位对应费用：${charge.toFixed(2)}元`
})

注意：如果不需要实时反馈结果，只需要用户点击提交按钮后再计算费用，就不用加监听，点击时取输入值调用计算函数即可，根据实际需求选择就行。

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