JavaScript 的 if 跟 switch 效能

前言

該使用 if 還是 switch 一直以來都是一個話題,所以這時候就來驗證一下這兩者差異以及效能上的差別。

if vs switch 效能

在網路上當我們 Google 「JavaScript if vs switch」 其實可以看到相當多的文章,其中我挑出幾篇相當不錯的而且可以驗證的部分。

Switch-case vs. if/else

這邊底下就可以線上比較這兩者個差異,當你按下 Run 之後你會發現 switch 很快就會轉換成完成,最後的結果就可以看到每一個的比較,這個測試網站很棒的地方他連雙等號以及三等號都會做比較,所以我們可以透過這個網站來了解每一個的效能

Switch-case vs. if/else

範例程式碼

這邊也有一個網站相當不錯

JavaScript switch Statement

文章底下有一段程式碼可以測試,但我稍微調整了一下,避免複製貼上導致 Lag

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var count1 = 0;
var count2 = 0;
var x1 = performance.now();
// Version 1: this switch has a fall-through case.
for (var i = 0; i < 100000; i++) {
for (var x = 0; x < 3; x++) {
switch (x) {
case 0:
count1++;
case 1:
count2++;
break;
case 2:
count1 = 0;
count2 = 0;
break;
}
}
}
var x2 = performance.now();
// Version 2: this switch has a break on all cases.
for (var i = 0; i < 100000; i++) {
for (var x = 0; x < 3; x++) {
switch (x) {
case 0:
count1++;
count2++;
break;
case 1:
count2++;
break;
case 2:
count1 = 0;
count2 = 0;
break;
}
}
}
var x3 = performance.now();

// Results.
console.log("TIME 1: " + (x2 - x1)); // TIME 1: 276
console.log("TIME 2: " + (x3 - x2)); // TIME 2: 271

額外補充一下 performance.now() 語法。

基本上你會覺得差異不大,因為執行次數較少的關係,但是可以發現 switch 的效能終究比 if 好一點,如果你的電腦夠好的話,你可以試著貼入以下原始範例程式碼(請務必注意,該程式碼會導致 LAG。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var count1 = 0;
var count2 = 0;
var x1 = performance.now();
// Version 1: this switch has a fall-through case.
for (var i = 0; i < 10000000; i++) {
for (var x = 0; x < 3; x++) {
switch (x) {
case 0:
count1++;
case 1:
count2++;
break;
case 2:
count1 = 0;
count2 = 0;
break;
}
}
}
var x2 = performance.now();
// Version 2: this switch has a break on all cases.
for (var i = 0; i < 10000000; i++) {
for (var x = 0; x < 3; x++) {
switch (x) {
case 0:
count1++;
count2++;
break;
case 1:
count2++;
break;
case 2:
count1 = 0;
count2 = 0;
break;
}
}
}
var x3 = performance.now();

// Results.
console.log("TIME 1: " + (x2 - x1));
console.log("TIME 2: " + (x3 - x2));

總結

基本上一般開發上除非專案太大需要判斷的非常多,否則在效能比較上是不太明顯的,如果 if...else if... 太多的話是可以考慮改用 switch,其主要原因在於 if...else if... 寫太多會有很嚴重的巢狀問題,而搞不清楚花括號 { 在哪裡,此時 switch 就會顯得非常好用。

那麼 switch 的使用時機可以用於不需要比較的判斷,例如

1
2
3
4
5
switch(a) {
case '1':
break;
...
}

但若要使用比較判斷的話,那麼使用 if...else if... 還是會比較好的,當然這兩者沒有絕對得答案,只是還是重點在於可讀性。

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ