if-else 是我們最熟悉、最常用的邏輯控制語句，它簡單、直接，是邏輯的基石之一。

但隨著業(yè)務邏輯變得越來越復雜，很容易寫出冗長、嵌套的 if-else 結構，導致代碼的可讀性差和維護困難。

但 JavaScript 是一門靈活的語言，分享 5 個可以有效替代 if-else 的實用技巧。

技巧一：使用三元運算符

這是最簡單直接的替代方案，適用于只有兩個分支的簡單 if-else 結構，尤其是在進行變量賦值時。

優(yōu)化前:

let statusText;
if (isOnline) {
  statusText = '在線';
} else {
  statusText = '離線';
}

優(yōu)化后:

const statusText = isOnline ? '在線' : '離線';

優(yōu)點：代碼極其簡潔，可讀性強，將一個簡單的邏輯判斷和賦值操作濃縮到一行。

技巧二：使用 Map 或對象字面量進行映射

當 if-else 的分支增多，且每個分支都對應一個固定的返回值時，使用 Map 或對象來進行查找（lookup）是絕佳的選擇。

優(yōu)化前:

function getStatusMessage(status) {
  if (status === 'success') {
    return '操作成功';
  } else if (status === 'error') {
    return '發(fā)生錯誤';
  } else if (status === 'pending') {
    return '處理中...';
  } else {
    return '未知狀態(tài)';
  }
}

優(yōu)化后:

優(yōu)點：

• 可讀性高：邏輯關系一目了然，就像查字典一樣
• 易于擴展：新增一個狀態(tài)時，只需在 statusMessages 對象中增加一個鍵值對即可

技巧三：使用策略模式（函數(shù)映射）

如果你的不同條件分支執(zhí)行的是不同的操作（函數(shù)），而不是返回靜態(tài)值，那么可以映射到函數(shù)上，這就是一種輕量級的策略模式。

優(yōu)化前:

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

優(yōu)化后:

優(yōu)點：將“條件判斷”和“具體執(zhí)行”解耦。每個操作都是一個獨立的函數(shù)，職責清晰，代碼結構更加模塊化和可測試。

技巧四：善用短路運算符 (&&, ||, ??)

在很多情況下，我們只是想在滿足某個條件時執(zhí)行一個操作，或者在某個值為null/undefined時提供一個默認值。這時，短路運算符是你的好朋友。

(1) 使用 && 替代簡單的 if

優(yōu)化前:

if (isDebugMode) {
  console.log('這是一條調試信息');
}

優(yōu)化后:

isDebugMode && console.log('這是一條調試信息');

原理：&& 運算符只有在左側表達式為真（truthy）時，才會執(zhí)行并返回右側的表達式。

(2) 使用 || 或 ?? 提供默認值

場景：獲取一個可能不存在的用戶名，如果不存在，則顯示“游客”。

優(yōu)化前:

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

優(yōu)化后:

注意 || 和 ?? 的區(qū)別：

• || 會將所有“假值”（false, 0, '', null, undefined, NaN) 都替換為默認值
• ?? 只會將 null 和 undefined 替換為默認值。如果你希望保留 0 或空字符串 '' 這樣的有效值，?? 是更安全的選擇

技巧五：使用規(guī)則數(shù)組

當條件判斷變得更加復雜，不再是簡單的鍵值匹配（例如，包含范圍判斷 > <）時，我們可以將一系列規(guī)則抽象成一個數(shù)組。

場景：根據(jù)訂單金額，計算不同的折扣率。

優(yōu)化前:

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;
  }
}

優(yōu)化后:

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) {
  // 查找第一個滿足條件的規(guī)則
  const rule = discountRules.find(r => r.condition(orderAmount));
  return rule ? rule.discount : 0;
}

優(yōu)點：

• 聲明式：代碼從“如何做”變成了“是什么”。定義一系列規(guī)則，然后讓程序自己去匹配
• 極易擴展：新增一個折扣檔位，只需在 discountRules 數(shù)組的最前面加一個對象即可

if-else 本身沒有錯，它是編程的必要組成部分。但當它演變成具有復雜邏輯的代碼時，就需要對其進行優(yōu)化了。