JavaScript对象同名键如何在不重命名的情况下通过解构完成取值

解决方案 #

JavaScript的解构本身就支持不修改原对象键名的前提下自定义赋值的变量名，你可以按需选择以下两种实现方案：

方案1：保持现有代码逻辑不变

你当前贴出的代码本身就可以正常运行，不需要修改任何原对象的键名，执行calc(71)会直接返回正确结果2059，本身就满足不重命名键的需求。

方案2：统一变量名/优化扩展性

如果你不想区分limitfrom和limitfrom2这类带数字后缀的变量名，可以用解构重命名语法，或者统一阶段结构，后续新增计费阶段不需要修改计算逻辑：

1. 解构重命名写法（原对象键完全不用修改）：

// 解构stageTwo时把带2的键值重命名为自定义变量，避免和stageOne的变量重名
const { limitfrom2: stage2Limitfrom, limitUpTo2: stage2LimitUpTo, commission2: stage2Commission } = stageTwo

// 计算函数直接用重命名后的变量即可
function calc (i) {
  if (i >= limitfrom && i <= limitUpTo) {
    return i * commission
  } else if (i >= stage2Limitfrom && i <= stage2LimitUpTo) {
    return i * stage2Commission
  } else {
    console.log('error')
  }
}

2. 更易扩展的写法：

// 把所有阶段映射为统一键名的数组，原对象键无需修改
const chargeStages = [
  stageOne,
  {
    limitfrom: stageTwo.limitfrom2,
    limitUpTo: stageTwo.limitUpTo2,
    commission: stageTwo.commission2
  }
]

function calc(i) {
  const matchStage = chargeStages.find(stage => i >= stage.limitfrom && i <= stage.limitUpTo)
  return matchStage ? i * matchStage.commission : console.log('error')
}

内容的提问来源于stack exchange，提问作者Николай Миров