針對 if else if 鏈過長的問題，可通過 switch 語句、對象字面量或 map、策略模式、函數組合等方式簡化。1. 使用 switch 語句適用于基于同一變量不同值的判斷，提高可讀性和維護性；2. 使用對象字面量或 map 可通過鍵值對存儲操作，便于查找執行，更靈活易擴展；3. 策略模式適合每個分支代表不同算法的情況，將策略封裝后選擇執行，提升可維護性；4. 函數組合方式適合各分支為獨立函數的情形，通過條件匹配執行對應函數；此外，還可采用盡早返回、默認值設定、提取公共邏輯等技巧優化代碼結構，重構時應根據場景選擇合適方案，并注意編寫測試避免引入風險。
if else if 鏈太長？ 簡化方法有很多，核心在于找到重復的判斷邏輯，然后用更簡潔的數據結構或者函數來替代。 別想著一步到位，逐步優化才是王道。
解決方案
簡化 JavaScript 中過長的 if else if 鏈條，可以考慮以下幾種策略，具體采用哪種取決于你的實際場景和判斷邏輯的復雜程度。
使用 switch 語句
如果 if else if 鏈基于同一個變量的不同值進行判斷，switch 語句通常是一個更清晰的選擇。
function handleAction(actionType) { switch (actionType) { case 'CREATE': // 處理創建邏輯 console.log('Creating...'); break; case 'UPDATE': // 處理更新邏輯 console.log('Updating...'); break; case 'DELETE': // 處理刪除邏輯 console.log('Deleting...'); break; default: // 處理未知操作 console.log('Unknown action'); } } handleAction('UPDATE'); // 輸出: Updating...
switch 語句在處理多個離散值的判斷時，比 if else if 更易讀，也更容易維護。
使用對象字面量 (Object Literal) 或 Map
如果每個 if else if 分支對應不同的操作，可以使用對象字面量或者 Map 來存儲這些操作，通過鍵值對的方式進行查找和執行。
const actionMap = { 'CREATE': () => { console.log('Creating using object...'); }, 'UPDATE': () => { console.log('Updating using object...'); }, 'DELETE': () => { console.log('Deleting using object...'); }, 'DEFAULT': () => { console.log('Unknown action using object'); } }; function handleActionWithObject(actionType) { const action = actionMap[actionType] || actionMap['DEFAULT']; // 默認操作 action(); } handleActionWithObject('CREATE'); // 輸出: Creating using object... // 使用 Map const actionMapMap = new Map([ ['CREATE', () => { console.log('Creating using Map...'); }], ['UPDATE', () => { console.log('Updating using Map...'); }], ['DELETE', () => { console.log('Deleting using Map...'); }] ]); function handleActionWithMap(actionType) { const action = actionMapMap.get(actionType) || (() => { console.log('Unknown action using Map'); }); action(); } handleActionWithMap('DELETE'); // 輸出: Deleting using Map...
這種方式更靈活，易于擴展，也更符合開閉原則。
使用策略模式 (Strategy Pattern)
如果 if else if 鏈中的每個分支代表一種策略或算法，可以考慮使用策略模式。將每個策略封裝成獨立的類或函數，然后根據條件選擇合適的策略執行。
class CreateStrategy { execute() { console.log('Executing create strategy'); } } class UpdateStrategy { execute() { console.log('Executing update strategy'); } } const strategies = { 'CREATE': new CreateStrategy(), 'UPDATE': new UpdateStrategy() }; function executeStrategy(strategyType) { const strategy = strategies[strategyType]; if (strategy) { strategy.execute(); } else { console.log('Unknown strategy'); } } executeStrategy('UPDATE'); // 輸出: Executing update strategy
策略模式可以有效地將不同的算法隔離，提高代碼的可維護性和可測試性。
使用函數組合 (Function Composition)
如果 if else if 鏈中的每個分支都是一個函數，可以使用函數組合來簡化代碼。
const isConditionA = (x) => x > 10; const isConditionB = (x) => x < 5; const actionA = (x) => console.log('Action A', x); const actionB = (x) => console.log('Action B', x); const defaultAction = (x) => console.log('Default Action', x); function handleValue(value) { if (isConditionA(value)) { actionA(value); } else if (isConditionB(value)) { actionB(value); } else { defaultAction(value); } } handleValue(12); // 輸出: Action A 12 handleValue(3); // 輸出: Action B 3 handleValue(7); // 輸出: Default Action 7
可以將其改寫為：
const conditions = [ { condition: isConditionA, action: actionA }, { condition: isConditionB, action: actionB } ]; function handleValueRefactored(value) { const matchedCondition = conditions.find(item => item.condition(value)); (matchedCondition ? matchedCondition.action : defaultAction)(value); } handleValueRefactored(12); // 輸出: Action A 12 handleValueRefactored(3); // 輸出: Action B 3 handleValueRefactored(7); // 輸出: Default Action 7
何時應該重構 if else if 鏈？
當 if else if 鏈變得難以閱讀、難以維護、或者存在大量的重復代碼時，就應該考慮重構。 此外，當需要頻繁添加新的條件分支時，重構可以提高代碼的擴展性。
重構 if else if 鏈有哪些潛在的風險？
重構可能引入新的 bug，特別是當重構邏輯比較復雜時。 因此，在重構之前，應該編寫充分的單元測試，確保重構后的代碼行為與原始代碼一致。 此外，重構也可能影響代碼的性能，需要進行性能測試，確保重構后的代碼性能沒有下降。 還有一點，不要過度設計，選擇最適合當前場景的重構方案。
除了上述方法，還有其他簡化 if else if 鏈的技巧嗎？
-
盡早返回 (Early Return): 如果某個條件滿足時，可以直接返回結果，避免執行后續的 else if 分支。 這樣可以減少代碼的嵌套層級，提高可讀性。
function getValue(x) { if (x < 0) { return null; // 盡早返回 } if (x > 100) { return 100; } return x; } -
使用默認值 (Default Values): 如果 if else if 鏈的最后一個 else 分支是默認情況，可以使用默認值來簡化代碼。
function getStatusText(statusCode) { let statusText; if (statusCode === 200) { statusText = 'OK'; } else if (statusCode === 404) { statusText = 'Not Found'; } else { statusText = 'Unknown'; // 默認情況 } return statusText; }可以改寫為：
function getStatusTextRefactored(statusCode) { let statusText = 'Unknown'; // 默認值 if (statusCode === 200) { statusText = 'OK'; } else if (statusCode === 404) { statusText = 'Not Found'; } return statusText; } -
提取公共邏輯 (Extract Common Logic): 如果 if else if 鏈中的多個分支都包含相同的代碼，可以將這些代碼提取到一個單獨的函數中，然后在每個分支中調用該函數。 這可以減少代碼的重復，提高可維護性。
