javascript性能提升——合理使用if-else 和switch

——authored by 李家优

使用if-else 或者switch 是基于测试条件的数量：条件数量较大，倾向于使用switch 而不是if-else。这通常归结到代码的易读性，如果条件较少时，if-else 容易阅读，而条件较多时switch更容易阅读。考虑下面几点：

if (found) {
    //do something
  } else {
    //do something else
}

switch (found) {
    case true:
      //do something
      break;
    default:
      //do something else
}

虽然两个代码块实现同样任务，很多人会认为if-else 表达式比witch 表达式更容易阅读。如果增加条件体的数量，通常会扭转这种观点：

if (color == "red") {
//do something
} else if (color == "blue") {
//do something
} else if (color == "brown") {
//do something
} else if (color == "black") {
//do something
} else {
//do something
}

switch (color) {
case "red":
//do something
break;
case "blue":
//do something
break;
case "brown":
//do something
break;
case "black":
//do something
break;
default:
//do something
}

大多数人会认为这段代码中的switch 表达式比if-else 表达式可读性更好。

事实证明，大多数情况下switch 表达式比if-else 更快，但只有当条件体数量很大时才明显更快。两者间的主要性能区别在于：当条件体增加时，if-else 性能负担增加的程度比switch 更多。因此，我们的自然倾向认为条件体较少时应使用if-else 而条件体较多时应使用switch 表达式，如果从性能方面考虑也是正确的。

一般来说，if-else 适用于判断两个离散的值或者判断几个不同的值域。如果判断多于两个离散值，switch

表达式将是更理想的选择。

优化if-else 的目标总是最小化找到正确分支之前所判断条件体的数量。最简单的优化方法是将最常见的条件体放在首位。考虑下面的例子：

if (value < 5) {
//do something
} else if (value > 5 && value <10) {
//do something
} else {
//do something
}

这段代码只有当value 值经常小于5 时才是最优的。如果value 经常大于等于10，那么在进入正确分支之前，必须两次运算条件体，导致表达式的平均时间提高。if-else 中的条件体应当总是按照从最大概率到最小概率的顺序排列，以保证理论运行速度最快。

另外一种减少条件判断数量的方法是将if-else 组织成一系列嵌套的if-else 表达式。使用一个单独的一长串的if-else 通常导致运行缓慢，因为每个条件体都要被计算。例如：

if (value == 0){
return result0;
} else if (value == 1){
return result1;
} else if (value == 2){
Download at www.Pin5i.Com
return result2;
} else if (value == 3){
return result3;
} else if (value == 4){
return result4;
} else if (value == 5){
return result5;
} else if (value == 6){
return result6;
} else if (value == 7){
return result7;
} else if (value == 8){
return result8;
} else if (value == 9){
return result9;
} else {
return result10;
}

在这个if-else 表达式中，所计算条件体的最大数目是10。如果假设value 的值在0 到10 之间均匀分布，那么会增加平均运行时间。为了减少条件判断的数量，此代码可重写为一系列嵌套的if-else 表达式，例如：

if (value < 6){
if (value < 3){
if (value == 0){
return result0;
Download at www.Pin5i.Com
} else if (value == 1){
return result1;
} else {
return result2;
}
} else {
if (value == 3){
return result3;
} else if (value == 4){
return result4;
} else {
return result5;
}
}
} else {
if (value < 8){
if (value == 6){
return result6;
} else {
return result7;
}
} else {
if (value == 8){
return result8;
} else if (value == 9){
return result9;
} else {
return result10;
}
Download at www.Pin5i.Com
}
}

在重写的if-else 表达式中，每次抵达正确分支时最多通过四个条件判断。它使用二分搜索法将值域分成了一系列区间，然后逐步缩小范围。当数值范围分布在0 到10 时，此代码的平均运行时间大约是前面那个版本的一半。此方法适用于需要测试大量数值的情况（相对离散值来说switch 更合适）。

长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”，带你了解最新的前端技术。