if-else 对比 switch

两者的对比

使用if else 还是 switch 目前一般是从代码可读性的角度出发，基于判断条件的数量来决定：数量越多就越倾向于 switch 而不是 if else。

事实证明除了代码可读性，switch 的运行速度是比 if else 更快的。

相比较于 if else ，switch 的实现采取了branch table 索引来进行优化（深入了解可以看这里：en.wikipedia.org/wiki/Switch… ，而且 switch 语句比较时使用是全等操作符，不会发生类型转换的损耗。

环境：Mac、火狐71
9999999次 chrome看不出明显变化

if-else 例子

var start = new Date().getTime();
var a = 6;
for(let i = 0; i < 9999999; i++) {
  switch(a) {
    case 1: ;break;
    case 2: ;break;
    case 3: ;break;
    case 4: ;break;
    case 5: ;break;
    default : ;
  }
}
var end = new Date().getTime()
console.log(end - start);

// 运行时间在 1100 毫秒左右波动

switch 例子

var start = new Date().getTime();
var a = 6;
for(let i = 0; i < 9999999; i++) {
  if (a == 1) {
  } else if (a == 2) {
  } else if (a == 3) {
  } else if (a == 4) {
  } else if (a == 5) {
  } else {
  } 
}
var end = new Date().getTime()
console.log(end - start)

// 运行时间在 5200 毫秒左右波动

优化 if-else

1、确保最可能出现的条件放在首位

以上面为例，我的变量 a 最可能等于 1 那么，执行时间就会大大降低

var a = 1; // 把这个改为 1
for(let i = 0; i < 9999999; i++) {
  if (a == 1) { // 走到这里就满足了条件
  } else if (a == 2) {
  } else if (a == 3) {
  } else if (a == 4) {
  } else if (a == 5) {
  } else {
  } 
}
// 现在它的执行时间和 switch 执行时间无限接近了，在1100左右

如果 a = 2 ，那么执行时间在2200毫秒左右波动

因此，在 if-else 语句中，它的条件语句应该以 最大概率出现到最小概率出现依次排列。

2、减少判断的次数，使用嵌套语句

假设 a 的值出现的概率都差不多，那么可以减少外层的 if-else，而是把它拆开，分成几块来判断。

把最开始那个if-else的例子稍微改一下

var start = new Date().getTime();
var a = 6;
for(let i = 0; i < 9999999; i++) {
  if (a <= 3) {
    if (a == 1) {
    } else if (a == 2) {
    } else {
    }
  } else {
    if (a == 4) {
    } else if (a == 5) {
    } else {
    } 
  }
}
var end = new Date().getTime()
console.log(end - start)

// 现在它的执行时间在 3200 毫秒左右波动

查找表

在项目中，有时候优化条件语句的最好办法还是避免使用 if-else 和 switch 语句，而是通过数组和对象来查询，也就是查找表（lookup Tables）。

直接看例子

// 通过条件判断
function getColor(c) {
    if(c == 'blue'){
        return 'blue的rgba值'
    }else if(c === 'block'){
        return 'block的rgba值'
    }else if(c === 'yellow'){
        return 'yellow的rgba值'
    }else(c === 'green'){
        return 'green的rgba值'
    }
}

// 通过 map 映射
function getColor(c) {
    return {
        'blue': 'blue的rgba值',
        'block': 'block的rgba值',
        'yellow': 'yellow的rgba值',
        'green': 'green的rgba值',
    }[c]
}

整个过程只是对象成员 或者 数组项的查询，没有条件语句，因此也不会有那些性能上的问题。

结论

一：switch 性能高于 if-else

二：项目中尽量避免使用 switch 和 if else，使用查找表代替