五個可以替代 if-else 的代碼優化技巧
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 本身沒有錯，它是編程的必要組成部分。但當它演變成具有復雜邏輯的代碼時，就需要對其進行優化了。
