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)关注“前端那些事儿”，带你了解最新的前端技术。