JavaScript 中的 if 嵌套改善

To the one with a hammer, everything looks like a nail. （手中有锤，看什么都像钉）——<芒格>

if

我们如何在 javascript 中改进和制作更有效的嵌套 if 语句？

if (color) {
  if (color === 'black') {
    printBlackBackground();
  } else if (color === 'red') {
    printRedBackground();
  } else if (color === 'blue') {
    printBlueBackground();
  } else if (color === 'green') {
    printGreenBackground();
  } else {
    printYellowBackground();
  }
}

switch

改善嵌套 if 语句的一种方法是使用该 switch 语句。尽管它不那么冗长且有序，但不建议使用它，因为它很难调试错误。

switch(color) {
  case 'black':
    printBlackBackground();
    break;
  case 'red':
    printRedBackground();
    break;
  case 'blue':
    printBlueBackground();
    break;
  case 'green':
    printGreenBackground();
    break;
  default:
    printYellowBackground();
}

但是，如果我们在每个语句中都有一个带有多个检查的条件，那该怎么办？在这种情况下，如果我们希望它不那么冗长而更有序，则可以使用 conditional switch。如果我们将 true 参数作为 switch 语句传递给语句，则它允许我们在每种情况下都放置一个条件。

switch(true) {
  case (typeof color === 'string' && color === 'black'):
    printBlackBackground();
    break;
  case (typeof color === 'string' && color === 'red'):
    printRedBackground();
    break;
  case (typeof color === 'string' && color === 'blue'):
    printBlueBackground();
    break;
  case (typeof color === 'string' && color === 'green'):
    printGreenBackground();
    break;
  case (typeof color === 'string' && color === 'yellow'):
    printYellowBackground();
    break;
}

如果重构是一种选择，我们可以尝试简化功能本身。例如，除了具有每种背景色的功能之外，我们还可以具有将颜色作为参数的功能。

function printBackground(color) {
  if (!color || typeof color !== 'string') {
    return; // Invalid color, return immediately
  }
}

但是，如果不能选择重构，那么我们必须始终避免在每种情况下都进行多次检查，并避免使用 switch 过多的检查。
我们还必须考虑到，最有效的方法是通过 object。

var colorObj = {
  'black': printBlackBackground,
  'red': printRedBackground,
  'blue': printBlueBackground,
  'green': printGreenBackground,
  'yellow': printYellowBackground
};

if (color in colorObj) {
  colorObj[color]();
}