5 种替代 if-else 的实用 JavaScript 优化技巧，让代码更简洁可维护

在 JavaScript 开发中，if-else 是最常见的逻辑控制语句，它简单直接，是编程的基础。然而，随着业务逻辑复杂度增加，嵌套冗长的 if-else 会让代码难以阅读和维护。幸运的是，JavaScript 提供了多种灵活手段，可以有效替代 if-else，提升代码质量。本文总结 5 个实用技巧，帮助你写出更简洁、可维护的代码。

技巧一：三元运算符（Ternary Operator）

最简单直接的替代方案，适用于只有两个分支的简单逻辑判断，尤其是变量赋值场景。

优化前：

let statusText;
if (isOnline) {
  statusText = '在线';
} else {
  statusText = '离线';
}

优化后：

const statusText = isOnline ? '在线' : '离线';

✅ 优点：

代码简洁、一行完成赋值
可读性高，逻辑直观

技巧二：使用对象字面量或 Map 进行映射

当 if-else 分支增多，且每个分支对应固定返回值时，使用对象或 Map 查找比多重 if-else 更清晰。

优化前：

function getStatusMessage(status) {
  if (status === 'success') {
    return '操作成功';
  } else if (status === 'error') {
    return '发生错误';
  } else if (status === 'pending') {
    return '处理中...';
  } else {
    return '未知状态';
  }
}

优化后：

const statusMessages = {
  success: '操作成功',
  error: '发生错误',
  pending: '处理中...',
};

function getStatusMessage(status) {
  return statusMessages[status] || '未知状态';
}

✅ 优点：

可读性高：像查字典一样直观
易于扩展：新增状态只需在对象中增加键值对

技巧三：策略模式（函数映射）

当不同条件分支执行不同操作（函数）时，可用策略模式解耦判断和执行逻辑。

优化前：

function handleApiResponse(response) {
  if (response.code === 200) {
    handleSuccess(response.data);
  } else if (response.code === 401) {
    redirectToLogin();
  } else if (response.code === 404) {
    showNotFoundPage();
  } else {
    showGenericError();
  }
}

优化后：

const responseHandlers = {
  200: data => handleSuccess(data),
  401: () => redirectToLogin(),
  404: () => showNotFoundPage(),
  default: () => showGenericError(),
};

function handleApiResponse(response) {
  (responseHandlers[response.code] || responseHandlers.default)(response.data);
}

✅ 优点：

条件判断与具体操作解耦
每个操作都是独立函数，模块化且易测试

技巧四：短路运算符（&&, ||, ??）

短路运算符可用于简单条件执行或提供默认值。

1. 使用 && 替代简单 if

isDebugMode && console.log('调试信息');

原理：只有左侧为真（truthy），右侧表达式才会执行。

2. 使用 || 或 ?? 提供默认值

const displayName = user.name ?? '游客';

|| 会替换所有假值（false, 0, '', null, undefined, NaN）
?? 仅替换 null 和 undefined，更安全，保留 0 或空字符串

✅ 优点：代码更简洁，避免冗余的 if-else

技巧五：规则数组（Rule Array）

当条件判断涉及范围或复杂逻辑时，可将规则抽象成数组，然后查找匹配规则。

优化前：

function getDiscount(orderAmount) {
  if (orderAmount >= 500) {
    return 0.2;
  } else if (orderAmount >= 200) {
    return 0.1;
  } else if (orderAmount >= 100) {
    return 0.05;
  } else {
    return 0;
  }
}

优化后：

const discountRules = [
  { condition: amount => amount >= 500, discount: 0.2 },
  { condition: amount => amount >= 200, discount: 0.1 },
  { condition: amount => amount >= 100, discount: 0.05 },
];

function getDiscount(orderAmount) {
  const rule = discountRules.find(r => r.condition(orderAmount));
  return rule ? rule.discount : 0;
}

✅ 优点：