條件語句

JS 的條件語句不太多，就 if 和 switch 兩個，不過他們的使用方式也可以算是眼花繚亂了。

if 語句

if 字面意思：如果 xxx。程序中的用法也是這樣，如果條件為真，則執行執行代碼塊，反之則不執行。

語法：

if (條件) {
  // 條件為真時執行
} else if (其他條件) {
  // 前一個條件為假且當前條件為真時執行
} else if (其他條件) {
  // 前面所有條件為假且當前條件為真時執行
} else {
  // 所有條件均為假時執行
}

基礎用法：

if (true) {
  console.log('條件為真執行代碼塊');
}
// 如果代碼塊中只有一個語句，可以省略花括號
if (true) console.log('條件為真執行代碼塊');

if & else 用法：

const age = 20;
if (age < 18) {
  console.log('未成年');
} else {
  console.log('成年人');
}
// 也可省略花括號
if (age < 18) console.log('未成年');
else console.log('成年人');

完整示例：

const age = 20;
if (age < 18) {
  console.log('未成年');
} else if (age >= 18 && age < 50) {
  console.log('成年人');
} else if (age >= 50 && age < 65) {
  console.log('中年人');
} else {
  console.log('老年人');
}

雖然 if 條件語句的語法上支持省略花括號，但在實際編碼中，還是不太建議這么做，代碼可讀性降低，導致維護成本增加。

switch 語句

switch 語句和 if 語句很像，都用于條件判斷，但 switch 語句中不支持條件表達式，case 后面只能是一個值或者運算表達式。

使用時特別注意 break 關鍵字，如果少了這個，您的代碼會出大簍子。

使用 switch 語句：

const fruit = 'apple';
 
switch (fruit) {
  case 'apple':
    console.log('蘋果');
    break;
  case 'banana':
    console.log('香蕉');
    break;
  case 'orange':
    console.log('橘子');
    break;
  default:
    console.log('其他水果');
    break;
}

以下代碼錯誤寫法，將始終都是 default 分支：

const age = 20;
switch (age) {
  case age < 18:
    console.log('未成年');
    break;
  case age >= 18 && age < 50:
    console.log('成年人');
    break;
  case age >= 50 && age < 65:
    console.log('中年人');
    break;
  default:
    console.log('老年人');
}

但可以這樣用：

const fruit = 'apple';
const apple = 'apple';
switch (fruit) {
  case apple: // 可以使用變量
    console.log('蘋果');
    if (true) { // case 中可以使用條件語句
      console.log('進入條件語句');
    }
    break;
  case 'ban' + 'ana': // 可以使用運算符
    console.log('香蕉');
    break;
  default:
    console.log('其他水果');
    break;
}

使用 switch 語句時，如果少了 break 關鍵字，就觸發了神奇的 case 穿透 問題。看例子：

const fruit = 'apple';
 
switch (fruit) {
  case 'apple':
    console.log('蘋果');
    // 沒有 break，代碼會走到下一個 case
  case 'banana':
    console.log('香蕉');
    // 依然沒有 break，繼續往下走
  case 'orange':
    console.log('橘子');
    // 仍然沒有 break，繼續
  default:
    console.log('其他水果');
    // switch 結束了
}

以上代碼會同時輸出：

蘋果
香蕉
橘子
其他水果

if 優化

代碼中免不了會出現很多 if 判斷情況，如果代碼組織能力太差，那就像捅了 if 窩一樣~~

看一個在曾經項目中前輩寫的代碼：

if (score.length != 0) {
  if (score >= 0 && score <= 10) {
    if (res1.status === '1') {
      if (res2.status === '1') {}
      if (viewShow) {
      } else {}
    } else {}
  } else {}
} else {}

這樣的代碼看起來舒服嗎？反正我不舒服，真的太丑了，一層層的嵌套，像是走到邏輯地獄一樣！！

使用衛語句優化

善用 return 優化 if 語句，提前處理異常或簡單條件，減少嵌套層級。

優化前的代碼：

function checkOrder(order) {
  if (order.isValid) {
    if (order.items.length > 0) {
      if (order.total > 0) {
        // 核心邏輯
        return '1';
      } else {
        return '2';
      }
    } else {
      return '3';
    }
  } else {
    return '4';
  }
}

衛語句優化后：

function checkOrder(order) {
  if (!order.isValid) {
    return '4';
  }
  if (order.items.length === 0) {
    return '3';
  }
  if (order.total <= 0) {
    return '2';
  }
  
  return '1';
}

使用策略模式優化

策略模式 屬于設計模式中的一種，通往超神路上，設計模式可以算是一道攔路虎，好的設計模式可以寫出更優雅的代碼。

在 JS 這個語言中，使用對象可以輕松的實現策略模式，優化不必要的 if 語句。

優化前的代碼：

function getUserType(type) {
  if (type === 'A') {
    return '前端';
  } else if (type === 'B') {
    return '后端';
  } else if (type === 'C') {
    return '全干';
  } else {
    return '未知';
  }
}

優化后：

const userMap = {
  A: '前端',
  B: '后端',
  C: '全干',
  D: '未知',
};

function getUserType(type) {
  return userMap[type] ?? userMap.default;
}

使用面向對象設計中的多態

將不同條件分支封裝到不同類中，善用對象的多態概念，可以優化一部分代碼。

說實話，JS 的代碼還是不太習慣面向對象風格，還是習慣函數式編程，但這種優化方式還是值得學習的。

優化前的代碼：

// 重構前（if-else 判斷角色權限）
function checkPermission(user) {
  if (user.role === 'admin') {
    return true; // 管理員有用所有操作權限
  } else if (user.role === 'editor') {
    return action === 'edit'; // 網站編輯只有編輯權限
  } else {
    return action === 'view'; // 訪客只有查看權限
  }
}

優化后：

// 重構后（多態實現）
class Admin { // 管理員有用所有操作權限
  can(action) { return true; }
}

class Editor { // 網站編輯只有編輯權限
  can(action) { return action === 'edit'; }
}

class Guest { // 訪客只有查看權限
  can(action) { return action === 'view'; }
}

function checkPermission(user, action) {
  return user.can(action);
}

使用鏈式判斷

利用 ES6 現代語法簡化嵌套屬性訪問和條件判斷，ES6 的可選鏈操作符是真的可以省下很多代碼量，再組合使用空值合并，代碼逼格瞬間提升。

優化前的代碼：

function getUserCity(user) {
  if (user && user.address && user.address.location) {
    return user.address.location.city;
  }
  return '未知';
}

優化后：

// 鏈式判斷 + 空值合并
function getUserCity(user) {
  return user?.address?.location?.city ?? '未知';
}

善用單一職責

將復雜條件拆分為多個獨立函數，每個函數只做一件事，代碼不要寫得太復雜，誰都能看懂的代碼才是好代碼！

優化前的代碼：

// 不同的用戶價格計算邏輯
function calcPrice(user, product) {
  if (user.isVIP) {
    if (product.stock > 0) {
      return product.price * 0.8; // VIP 用戶打8折
    } else {
      throw new Error('缺貨');
    }
  } else {
    if (product.stock > 0) {
      return product.price; // 非 VIP 用戶原價
    } else {
      throw new Error('缺貨');
    }
  }
}

優化后：

function isProductAvailable(product) { // 判斷產品是否有庫存
  if (product.stock <= 0) throw new Error('缺貨');
}

function getVIPDiscount(user) {
  return user.isVIP ? 0.8 : 1; // 判斷用戶是否打折
}

function calcPrice(user, product) {
  isProductAvailable(product); // 先判斷產品庫存
  return product.price * getVIPDiscount(user); // 計算價格
}

寫在最后

代碼誰都能寫，但寫出來的代碼好不好看，能不能維護，這就是考驗技術的時候了。

總結幾個編碼原則，僅供參考：

1、單一職責：每個函數/模塊只處理一個邏輯。
2、早返早拒：優先處理無效條件，減少嵌套。
3、數據結構化：用對象、Map 或類替代硬編碼條件。
4、現代語法：善用 ?.、??、||、&& 等簡化代碼。