告别“if-else”条件判断：5 个让 JavaScript 逻辑更优雅的写法

下面分享 5 种“无痛替代”思路，配合代码示例，帮你把“面条状”条件判断梳理成“鱼骨图”。

1. 一行解决战斗：三元运算

当逻辑只有两个结果，并且只是为了给变量赋值时，三元运算符就是浓缩咖啡版 if-else。

老写法：

let tip;
if (isVip) {
  tip = 0.2;
} else {
  tip = 0.1;
}

新写法：

const tip = isVip ? 0.2 : 0.1;

一行写完，读代码的人再也不用上下翻屏找 else 藏在哪儿。

2. 字典式查找：用对象/Map 做“翻译表”

当条件多、但每个条件只对应一个固定返回值时，把“判断”变成“查字典”，既直观又易扩展。

老写法：

function getIcon(type) {
  if (type === 'pdf') return '📄';
  if (type === 'img') return '🖼️';
  if (type === 'zip') return '🗜️';
  return '❓';
}

新写法：

const iconMap = {
  pdf: '📄',
  img: '🖼️',
  zip: '🗜️',
};

const getIcon = type => iconMap[type] ?? '❓';

新增类型？直接往 iconMap 里添一行键值对即可，告别“再写三行 else if”。

3. 函数版策略模式：把“条件”拆成“策略”

如果每个分支里不是返回值，而是一整段动作逻辑，不妨把动作封装成函数，再按条件调度——这就是轻量级策略模式。

老写法：

function handle(code) {
  if (code === 200) renderDashboard();
  else if (code === 401) redirectToLogin();
  else if (code === 403) showForbidden();
  else showError();
}

新写法：

const strategies = {
  200: renderDashboard,
  401: redirectToLogin,
  403: showForbidden,
  default: showError,
};

const handle = code => (strategies[code] || strategies.default)();

函数即策略，职责单一，单元测试也方便。

4. 短路运算符：让条件“隐形”

只想在特定条件下触发某个副作用，或者给变量兜底一个默认值？&&、||、?? 三个符号就能搞定。

• “满足就执行”
  老写法：

  
  if (debug) console.table(data);
  

  新写法：

  
  debug && console.table(data);
  

• “兜底默认值”
  老写法：

  
  let name;
  if (inputName) name = inputName;
  else name = '游客';
  

  新写法（区分假值与 null/undefined）：

  
  const name = inputName ?? '游客';   // 仅 null/undefined 兜底
  // 或
  const name2 = inputName || '游客';  // 任何假值都兜底
  

5. 规则数组：把“阶梯”变“流水线”

当判断涉及区间、权重或更复杂的表达式时，把规则抽象成数组，再让程序按顺序匹配第一条命中的规则——声明式写法优雅又易扩展。

老写法：

function shippingFee(weight) {
  if (weight <= 1) return 5;
  else if (weight <= 5) return 10;
  else if (weight <= 10) return 15;
  else return 20;
}

新写法：

const feeRules = [
  { test: w => w <= 1,  fee: 5  },
  { test: w => w <= 5,  fee: 10 },
  { test: w => w <= 10, fee: 15 },
  { test: () => true,   fee: 20 }, // 兜底
];

const shippingFee = weight => feeRules.find(r => r.test(weight)).fee;

新增一个区间？往数组头部插入一条规则即可，无需改动任何判断逻辑。

小结

if-else 本身无罪，但当它开始“横向生长”时，就该考虑换一种更贴合场景的表达方式。选择合适的工具，让代码自己“说话”，未来的你会感谢今天多敲的这一行重构。