5 个可以有效替代 if…else 的实用技巧

if...else 是我们最常用的逻辑控制语句，在日常开发中使用最多的逻辑判断语句。但如果我们的业务逻辑变得越来越复杂，很容易写出冗长、嵌套的 if...else 结构，导致代码的可读性差和维护困难。所以本文分享 5 个可以有效替代 if...else 的实用技巧。

使用三元运算符

这是最简单直接的替代方案，适用于只有两个分支的简单 if...else 结构，尤其是在进行变量赋值时。

优化前：

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

优化后：

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

优点：代码极其简洁，可读性强，将一个简单的逻辑判断和赋值操作浓缩到一行。

使用 Map 或对象字面量进行映射

当 if...else 的分支增多，且每个分支都对应一个固定的返回值时，使用 Map 或对象来进行查找（lookup）是绝佳的选择。

优化前:

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

优化后:

const statusMessages = {
    success: '操作成功',
    error: '发生错误',
    pending: '处理中',
};
// 也可以使用 Map: const statusMessages = new Map([['success', '操作成功'], ...]);
function getstatusMessage(status) {
    // 使用|提供一个默认值
    return statusMessages[status] || '未知状态';
}

优点：

• 可读性高：逻辑关系一目了然，就像查字典一样。
• 易于扩展：新增一个状态时，只需在 statusMessages 对象中增加一个键值对即可。

使用策略模式（函数映射）

如果你的不同条件分支执行的是不同的操作（函数），而不是返回静态值，那么可以映射到函数上，这就是一种轻量级的策略模式。

优化前:

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 statusActions= {
    200: handleSuccess,
    401: redirectToLogin,
    404: showNotFoundPage,
    default: showGenericError,
};
function handleApiResponse(response) {
    // 查找对应的处理函数|默认函数
    const action = statusActions[response.code] || statusActions.default;
    action(response.data); // 执行函数
}

优点：将“条件判断”和“具体执行”解耦。每个操作都是一个独立的函数，职责清晰，代码结构更加模块化和可测试。

善用短路运算符 (&&, ||, ??)

在很多情况下，我们只是想在满足某个条件时执行一个操作，或者在某个值为null/undefined时提供一个默认值。这时，短路运算符是你的好朋友。

1. 使用 && 替代简单的 if

优化前:

if (isDebugMode) {
  console.log('这是一条调试信息');
}

优化后:

isDebugMode && console.log('这是一条调试信息');

原理：&& 运算符只有在左侧表达式为真（truthy）时，才会执行并返回右侧的表达式。

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

场景：获取一个可能不存在的用户名，如果不存在，则显示“游客”。

优化前:

let displayName;
if (user.name) {
  displayName = user.name;
} else {
  displayName = '游客';
}

优化后:

// 使用 || (逻辑或)
const displayName = user.name || '游客';

// 更推荐使用 ??(空值合并运算符)
const displayNameWithNullish = user.name ?? '游客';

注意 || 和 ?? 的区别：

• || 会将所有“假值”（false, 0, '', null, undefined, NaN) 都替换为默认值。
• ?? 只会将 null 和 undefined 替换为默认值。如果你希望保留 0 或空字符串 '' 这样的有效值，?? 是更安全的选择。

使用规则数组

当条件判断变得更加复杂，不再是简单的键值匹配（例如，包含范围判断 > <）时，我们可以将一系列规则抽象成一个数组。

场景：根据订单金额，计算不同的折扣率。

优化前:

function getDiscount(orderAmount) {
  if (orderAmount >= 500) {
    return 0.2; // 20% 折扣
  } else if (orderAmount >= 200) {
    return 0.1; // 10% 折扣
  } else if (orderAmount >= 100) {
    return 0.05; // 5% 折扣
  } 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;
}

优点：

• 声明式：代码从“如何做”变成了“是什么”。定义一系列规则，然后让程序自己去匹配。
• 极易扩展：新增一个折扣档位，只需在 discountRules 数组的最前面加一个对象即可。

if...else 本身没有错，它是编程的必要组成部分。但当它演变成具有复杂逻辑的代码时，就需要对其进行优化了。

以上关于5 个可以有效替代 if…else 的实用技巧的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。