Javascript 开发中 if/else 的正确开启方式

引言

代码中嵌套太多的 if/else 语句首先代码不美观，其次是不易于理解。以下将从 ① 优化 ②switch/case ③ 策略模式 3 个方面来进行阐释如何优化 JS 开发中 if/else 语句的使用。

优化 篇

if/else 的存在是有一定意义的，不能全盘否定或杜绝使用 if/else 语句，适当的时候进行一些必要的优化也是允许的。

let a = true,
  b = false;

// Bad
if (a) {
  a = a;
} else {
  a = b;
}

// Good
a = a || b;

// Bad
if (a == b) {
  a = c;
} else {
  a = d;
}

// Good
a = a == b ? c : d;

假定某商店有 5 种水果，现在店主需要统计各水果带来的收益，进而考虑下一次进货各水果的比重，此时我们可能会这样进行代码的编写：

// fruit 为后台返回的数据
if (fruit === "苹果") {
  // ...
} else if (fruit === "梨子") {
  // ...
} else if (fruit === "桔子") {
  // ...
} else if (fruit === "柠檬") {
  // ...
} else {
  // ...
}

这样写虽然能满足计算各水果的收益，但是欠缺日常生活的思考。水果店水果的销售是会产生畅销与滞销这 2 种情况的，代码应该优先将畅销的水果放在前面进行统计，滞销的水果放在后面进行统计，这样程序将会减少不必要的判断来采取是否执行区块代码。假定畅销排行为：桔子 > 苹果 > 梨子 > 柠檬 > 芒果，我们应该这样子进行书写 if/else 语句：

// fruit 为后台返回的数据
if (fruit === "桔子") {
  // ...
} else if (fruit === "苹果") {
  // ...
} else if (fruit === "梨子") {
  // ...
} else if (fruit === "柠檬") {
  // ...
} else {
  // ...
}

如果我们保持原来的代码不变，则滞销的水果在进行统计的时候就必须进行多次判断方能执行统计，导致整个 if/else 表达式的平均运算时间增加。if 中的条件体应该总是按照从最大概率到最小概率排列，以保证理论速度最快。

我们也可以使用 Hash 表来进行优化上面的代码：

const fruitArr = ["桔子", "苹果", "梨子", "柠檬", "芒果"];
const profitArr = [0.9, 0.8, 0.7, 0.6, 0.5];
const countArr = [300, 280, 260, 240, 220];

// fruit 为后台返回的数据
const fruitIndex = fruitArr.indexOf(fruit);

return profitArr[fruitIndex] * countArr[fruitIndex];

这里定义了 3 个数组，分别来存储水果的类型，水果的收益率与水果的销售量，它们之间的 index 是一一对应的，因此只需要知道是什么类型的水果我们就能计算出该类型的水果收益，这可以说直接将 if/else 语句杜绝了。当然如果再进一步优化我们可以将收益率与销售量这 2 个值先存于 Object 中，后再将这些 Object 都存放在一个 Array 里，这样子代码的关联性就更好了

还有一种优化的手段是尽量减少 else 的使用，如果在函数中，可以使用 if + return，先判断错误条件，后立马结束函数，防止进入 else 分支。比如请求后台数据时：

if (data.status === 'success') {
  // ...
} else if (data.status === 'fail')) {
  // ...
} else {
  // ...
}

switch/case 篇

switch/case 与 if/else 在性能上没有什么区别，需要根据需求进行分析和选择。如果条件数量较小的话选用 if/else 比较合适，如果条件数量较大的话 switch/case 比较合适。一般来说，if/else 适用于两个离散的值或不同的值域，switch/case 适用于多个离散值。在大多数情况下 switch/case 与 if/else 都能能达到完全一样的效果，只不过使用 switch/case 要比 if/else 方便不少，比如匹配一些状态常量的时候，switch/case 比 if/else 方便许多，不用反复写等值判断（如 a === b）

const requestUrl = "";
try {
  const result = await $axios.get(requestUrl);

  switch (result.data.stateCode) {
    case 200:
      // ...
      break;
    case 500:
      // ...
      break;
    default:
    // ...
  }
} catch (err) {
  console.error(JSON.stringify(err));
}

需要注意的是每一个 case 语句后面需要跟随一个 break 语句或者一个 return 语句或者一个 throw 语句。case 语句匹配表达式用的是全等（===）而不是部分等（==）。

策略模式 篇

策略模式（Strategy），定义了一组算法，将每个算法都封装起来，并且使它们之间可以互换。

在 Hash 表的优化中我们发现统计收益并不是这么简单的事情，这时既可以采用 switch/case 来解决，也可以采用策略模式来解决

const fruitStrategies = {
  '桔子': fruit => {
    // ...
  },
  '苹果': fruit => {
    // ...
  },
  '梨子': fruit => {
    // ...
  },
  '柠檬': fruit => {
    // ...
  },
  '芒果': fruit => {
    // ...
  }
};

// fruit 为后台返回的数据
const calculateProfitByFruit = fruit => fruitStrategies[fruit]

引入策略模式看似增加了不少的代码量，但却让整个代码的逻辑变得更加清晰，它使得我们的代码更具有可读性与可维护性，同时对单元测试更友好，因为每一个策略就是一个函数，这样子大大减小了测试的粒度与复杂性。