if-else 是我们最熟悉、最常用的逻辑控制语句，它简单、直接，是逻辑的基石之一。
但随着业务逻辑变得越来越复杂，很容易写出冗长、嵌套的 if-else 结构，导致代码的可读性差和维护困难。
但 JavaScript 是一门灵活的语言，分享 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 '未知状态';
}
}
** 优化后: **
** 优点 ** ：
- ** 可读性高 ** ：逻辑关系一目了然，就像查字典一样
- ** 易于扩展 ** ：新增一个状态时，只需在
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();
}
}
** 优化后: **
** 优点 ** ：将“条件判断”和“具体执行”解耦。每个操作都是一个独立的函数，职责清晰，代码结构更加模块化和可测试。
技巧四：善用短路运算符 ( && , || , ?? )
在很多情况下，我们只是想在满足某个条件时执行一个操作，或者在某个值为 null / undefined
时提供一个默认值。这时，短路运算符是你的好朋友。
1. 使用 && 替代简单的 if
** 优化前: **
if (isDebugMode) {
console.log('这是一条调试信息');
}
** 优化后: **
isDebugMode && console.log('这是一条调试信息');
** 原理 ** ： && 运算符只有在左侧表达式为真（truthy）时，才会执行并返回右侧的表达式。
2. 使用 || 或 ?? 提供默认值
** 场景 ** ：获取一个可能不存在的用户名，如果不存在，则显示“游客”。
** 优化前: **
let displayName;
if (user.name) {
displayName = user.name;
} else {
displayName = '游客';
}
** 优化后: **
** 注意 || 和 ?? 的区别 ** ：
||会将所有“假值”（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 本身没有错，它是编程的必要组成部分。但当它演变成具有复杂逻辑的代码时，就需要对其进行优化了。