如何重构及简化包含多个if条件的代码？附示例解析

嘿，我来帮你重构这段包含多个if条件的代码，主要从简化逻辑嵌套、提升代码可读性和减少冗余判断这几个方向入手，咱们一步步拆解优化：

第一步：简化displayOption的初始化逻辑 #

原代码里嵌套了两层if来赋值displayOption，可以用三元运算符把嵌套逻辑扁平化，同时完全保留原有逻辑：

重构前 #

var displayOption; 
if (category === "new" && URIParams.displayOptions) { 
  if (URIParams.displayOptions === "showStartingPrice") { 
    displayOption = "showStartingPrice"; 
  } else { 
    displayOption = URIParams.displayOptions.split(",")[1]; 
  } 
} 

重构后 #

let displayOption;
if (category === "new" && URIParams.displayOptions) {
  // 用三元运算符替代内层嵌套if，逻辑更直观
  displayOption = URIParams.displayOptions === "showStartingPrice" 
    ? "showStartingPrice" 
    : URIParams.displayOptions.split(",")[1];
}

如果想更简洁，还可以用短路赋值直接初始化（注意可读性优先，不要过度压缩）：

const displayOption = category === "new" && URIParams.displayOptions 
  ? URIParams.displayOptions === "showStartingPrice" 
    ? "showStartingPrice" 
    : URIParams.displayOptions.split(",")[1]
  : undefined;

第二步：优化价格赋值的条件判断 #

原代码里的多条件判断可以通过提取语义化变量和可选链操作符来简化，让逻辑更清晰，同时避免潜在的空值报错：

重构前 #

if (displayOption && Static.displayOptions[displayOption] === "displayStartingPrice" && model.minPrice && model.minPrice[0]) { 
  model.minimumPrice = `Starting at $${model.minPrice[0].value}`; 
  model.price = true; 
}

重构后 #

// 把复杂条件提取为语义化变量，一眼就能看懂判断意图
const shouldShowStartingPrice = displayOption && 
  Static.displayOptions[displayOption] === "displayStartingPrice" && 
  model.minPrice?.[0]; // 用可选链简化多层空值判断，替代model.minPrice && model.minPrice[0]

if (shouldShowStartingPrice) {
  model.minimumPrice = `Starting at $${model.minPrice[0].value}`;
  model.price = true;
}

最终整合版代码 #

把两部分优化后的代码整合，整体逻辑更清晰，可读性大幅提升：

// 1. 初始化显示选项
let displayOption;
if (category === "new" && URIParams.displayOptions) {
  displayOption = URIParams.displayOptions === "showStartingPrice" 
    ? "showStartingPrice" 
    : URIParams.displayOptions.split(",")[1];
}

// 2. 判断并设置起始价格
const shouldShowStartingPrice = displayOption && 
  Static.displayOptions[displayOption] === "displayStartingPrice" && 
  model.minPrice?.[0];

if (shouldShowStartingPrice) {
  model.minimumPrice = `Starting at $${model.minPrice[0].value}`;
  model.price = true;
}

额外优化建议 #

• 如果你的运行环境支持ES2020+，可以用可选链操作符（?.）和空值合并运算符（??）进一步简化空值处理
• 把重复出现的常量（比如"showStartingPrice"、"displayStartingPrice"）提取为命名常量，方便后续维护
• 如果逻辑还会扩展，可以考虑把判断逻辑封装成单独的函数，比如getDisplayOption(category, URIParams)和setStartingPrice(model, displayOption)，让代码职责更单一

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