JavaScript中如何用数组简化多分支if语句实现城市差旅费用匹配

我有一个供用户输入地址的表单，系统会将输入的地址与英国多个目的地进行比对，计算出距离用户最近的城市。
我需要为每个目的地设置不同的差旅费用，例如英国伦敦=50、英国伯明翰=200等。
我目前编写了一段非常基础的if语句来匹配返回的最近城市并计算对应费用，但我觉得这种写法过于笨拙，想知道有没有更简洁的实现方案，现有代码如下：

if(closestCities[0].cityName == "Coventry, UK") {
  travelExpenses = 10;
} else if (closestCities[0].cityName == "London, UK"){
  travelExpenses = 50;
} else if (closestCities[0].cityName == "Margate, UK"){
  travelExpenses = 100;
} else if (closestCities[0].cityName == "Bristol, UK"){
  travelExpenses = 20;
} else if (closestCities[0].cityName == "Tamworth, UK"){
  travelExpenses = 15;
} else if (closestCities[0].cityName == "Birmingham, UK"){
  travelExpenses = 200;
} else {
  travelExpenses = 30;
}

优化方案 #

你可以用对象映射表的方式替代多分支if判断，代码更简洁，后续维护成本也更低：

// 统一维护城市和对应差旅费用的映射关系
const cityExpenseMap = {
  "Coventry, UK": 10,
  "London, UK": 50,
  "Margate, UK": 100,
  "Bristol, UK": 20,
  "Tamworth, UK": 15,
  "Birmingham, UK": 200
}
// 直接通过城市名读取费用，不存在匹配项时返回默认值30
const travelExpenses = cityExpenseMap[closestCities[0].cityName] ?? 30

方案优势 #

• 没有冗余的重复判断逻辑，代码可读性更高
• 后续新增/修改城市费用只需要调整cityExpenseMap的内容，不需要修改逻辑代码
• 属性读取复杂度为O(1)，分支数量多的时候性能远优于多if判断

如果需要兼容不支持空值合并运算符（??）的旧环境，可以替换为如下写法（当前场景费用都是正整数，逻辑或不会出现异常）：

const travelExpenses = cityExpenseMap[closestCities[0].cityName] || 30

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