JavaScript 优化代码分支，让你的代码更优雅

在JavaScript中，分支通常指的是减少冗余的条件判断和提升代码可读性和执行效率。以下是一些优化方案：

1. 对象字面量或Map对象：

当存在多个if…else if…else语句对应不同条件时，可以考虑使用对象字面量或者Map来代替。例如：

// 原始多条件分支
function handleColor(color) {
  if (color === 'red') {
    console.log('Red');
  } else if (color === 'blue') {
    console.log('Blue');
  } else if (color === 'green') {
    console.log('Green');
  }
}

// 使用对象字面量优化
function handleColorOptimized(color) {
  const colorActions = {
    red: () => console.log('Red'),
    blue: () => console.log('Blue'),
    green: () => console.log('Green'),
  };
  colorActions[color]();
}

handleColor('red');
handleColorOptimized('red');

// 或者使用 Map 对象
function handleColorWithMap(color) {
  const colorMap = new Map([
    ['red', () => console.log('Red')],
    ['blue', () => console.log('Blue')],
    ['green', () => console.log('Green')],
  ]);
  colorMap.get(color)();
}

handleColorWithMap('red');

2. 策略模式：

将不同的行为封装到单独的对象中，并根据条件选择执行哪个对象的方法。

class ColorStrategy {
  execute() {}
}

class RedStrategy extends ColorStrategy {
  execute() {
    console.log('Red');
  }
}

class BlueStrategy extends ColorStrategy {
  execute() {
    console.log('Blue');
  }
}

class GreenStrategy extends ColorStrategy {
  execute() {
    console.log('Green');
  }
}

function handleColorWithStrategy(color) {
  let strategy;
  switch (color) {
    case 'red':
      strategy = new RedStrategy();
      break;
    case 'blue':
      strategy = new BlueStrategy();
      break;
    case 'green':
      strategy = new GreenStrategy();
      break;
  }
  strategy.execute();
}

handleColorWithStrategy('red');

3. switch 语句：

当条件是枚举值时，使用switch替代多个if…else if，尤其是当每个case块体包含大量代码时，可以提高可读性。

function handleColorWithSwitch(color) {
  switch (color) {
    case 'red':
      console.log('Red');
      break;
    case 'blue':
      console.log('Blue');
      break;
    case 'green':
      console.log('Green');
      break;
    default:
      console.log('Unknown color');
  }
}

handleColorWithSwitch('red');

4. 提前返回（Return Early Pattern）：

对于函数内部的条件分支，可以采用提前返回的方式减少嵌套结构。

function getUserRole(user) {
  if (!user) return 'Guest';

  if (user.isAdmin) {
    return 'Admin';
  }

  if (user.isEditor) {
    return 'Editor';
  }

  return 'User';
}

console.log(getUserRole({ isAdmin: true }));

5. 函数或模块化：

将复杂的逻辑拆分为独立的函数或模块，使得整体代码结构更清晰，同时也有利于复用。
这个例子假设我们将不同颜色的处理逻辑拆分为独立函数。

function handleRed() {
  console.log('Red');
}

function handleBlue() {
  console.log('Blue');
}

function handleGreen() {
  console.log('Green');
}

function handleColorBasedOnCondition(color) {
  if (color === 'red') {
    handleRed();
  } else if (color === 'blue') {
    handleBlue();
  } else if (color === 'green') {
    handleGreen();
  }
}

handleColorBasedOnCondition('red');

6. 编译器/解释器优化：

现代JavaScript引擎如V8已经非常智能，它们会对代码进行优化，比如静态类型推断、内联缓存等。不过开发者直接控制这部分的可能性较小，但编写高效、易于理解的代码有助于引擎进行优化。
这部分优化主要依赖于JavaScript引擎。例如，引擎可能会对常量表达式进行优化。

7. 数据驱动编程：

根据业务场景，有时候可以通过数组、集合或其他数据结构来驱动程序流程，而不是通过大量的条件分支。

const colors = [
  { name: 'red', action: () => console.log('Red') },
  { name: 'blue', action: () => console.log('Blue') },
  { name: 'green', action: () => console.log('Green') },
];

function handleColorWithDataDriven(colorName) {
  const color = colors.find((c) => c.name === colorName);
  if (color) {
    color.action();
  } else {
    console.log('Unknown color');
  }
}

handleColorWithDataDriven('red');

总结来说，优化分支映射的核心思想是将条件与动作解耦，使代码更加模块化和简洁易懂，同时也利于后续维护和扩展。