JS技巧分享：ifelseif判断太长怎么优雅优化

还在为JavaScript中冗长的`if else if`条件链烦恼吗？本文为你提供一套优雅的简化方案，告别臃肿代码！针对`if else if`链过长的问题，我们深入探讨了多种优化策略，包括利用`switch`语句处理同一变量的不同值、使用对象字面量或`Map`实现键值对操作的灵活查找、运用策略模式封装算法提升可维护性，以及通过函数组合简化独立函数分支。此外，尽早返回、默认值设定、提取公共逻辑等技巧也能有效优化代码结构。选择哪种方案？关键在于理解你的实际场景和判断逻辑的复杂程度。重构并非一蹴而就，逐步优化，并编写充分的单元测试，才能有效降低风险，提升代码质量。告别低效，让你的JS代码更简洁、更易维护！

针对 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 链的技巧吗？

1. 尽早返回 (Early Return): 如果某个条件满足时，可以直接返回结果，避免执行后续的 else if 分支。 这样可以减少代码的嵌套层级，提高可读性。

   function getValue(x) {
     if (x < 0) {
       return null; // 尽早返回
     }
   
     if (x > 100) {
       return 100;
     }
   
     return x;
   }

2. 使用默认值 (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;
   }

3. 提取公共逻辑 (Extract Common Logic): 如果 if else if 链中的多个分支都包含相同的代码，可以将这些代码提取到一个单独的函数中，然后在每个分支中调用该函数。 这可以减少代码的重复，提高可维护性。

好了，本文到此结束，带大家了解了《JS技巧分享：ifelseif判断太长怎么优雅优化》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！