JavaScript 的 if else 和 switch對比

兩者的對比
　　使用if else 還是 switch 目前一般是從代碼可讀性的角度出發，基於判斷條件的數量來決定：數量越多就越傾向於 switch 而不是 if else。

　　事實證明除了代碼可讀性，switch 的運行速度是比 if else 更快的。

　　相比較於 if else ，switch 的實現采取了branch table 索引來進行優化（深入了解可以看這里：https://en.wikipedia.org/wiki/Switch_statement） ，而且 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，使用查找表代替