如何优化if..else代码

if...else是我们平时写代码时经常用到的，而且使用起来也没啥问题。问题是当业务逻辑比较复杂时，一堆条件判断就看的让人头大了，而且功能迭代时，还有可能在上面进行增量修改，内容越来越长，嵌套越来越深，可读性就变得越来越差。作为一个有追求的银，不但要求功能能实现，还要尽可能的美观好看～

接下来，我们就从几个方面来给代码换装

三元表达式

if (status === 'A') {
  handleA();
} else {
  handleOther();
}

像这种简单的if...else可以直接用三元表达式替换

status === 'A' ? handleA() : handleOther();

跟上面代码相比，少了好几行呢是吧，哈哈。

函数封装

function fn () {
  if (A) {
    // TODO
  }
  if (B) {
    // TODO
  }
  if (C) {
    // TODO
  }
}

上面的这种代码是很常见的，根据不同的状态执行不同的逻辑，但是所有的逻辑处理堆到一个函数里面就会使这个函数体变得很大。本着单一性的原则，我们可以把代码进行拆分，每个if里面的逻辑处理封装成一个函数，这样看起来会比较清晰。

function handleA () {
  // TODO
}
function handleB () {
  // TODO
}
function handleC () {
  // TODO
}
function fn () {
  if (A) {
    handleA();
  }
  if (B) {
    handleB();
  }
  if (C) {
    handleC();
  }
}

对象封装

if (status === 'A') {
  // TODO
} else if (status === 'B') {
  // TODO
} else if (status === 'C') {
  // TODO
}

像这种if..else if...的格式，从上到下判断，只会进入其中一个分支, 而且条件都是用一个全等就能判断出来的，可以利用对象键值对的形式，状态条件作为键，值是一个函数去执行业务逻辑来进行封装。

const map = {
  A: () => {},
  B: () => {},
  C: () => {}
}
map[status]();

每个分支的逻辑都被写成一个独立的函数，之后再有不同的条件判断，丰富对象键值对就行了，清晰明了。

或者用es6的Map

const map = new Map([
  ['A', () => {}],
  ['B', () => {}],
  ['C', () => {}]
])
const action = map.get(status);
action();

Map与Object的区别是Map可以用任何类型的数据作为key。

也可以用switch语句：

switch (status) {
  case 'A':
    // TODO
    break;
 case 'B':
   // TODO
   break;
 default:
  // TODO
}

不用写那么多'==='了，不过switch判断的是'==='而不是'=='.

这是条件状态很单一的时候，那条件判断比较复杂的时候呢？比如 a && b && c 之类的，可以把条件也作为一个函数存储起来，当函数返回true时，执行对应的逻辑处理函数。

const rules = [
  {
    match: (a, b, c) => {}, // 条件判断
    action: () => {} // 对应的业务逻辑
  },
  {
    match: (a, b, c) => {},
    action: () => {}
  },
  {
    match: (a, b, c) => {},
    action: () => {}
  }
]
for (let i = 0; i < rules.length; i++) {
    if (rules[i].match(a, b, c)) { // 只要条件判断返回true，就执行对应的业务逻辑，并结束循环
      return rules[i].action(a, b, c)
    }
}

以上只是条件语句比较复杂数量比较多时的代码优化方法，if...else该用还得用，用的时候尽量把常用的条件体放到前面，这样找到正确分支的速度就会快。