Try   HackMD

🔍小範例大學問👊

[JavaScript] if 與 switch 的使用時機?


1. 基本程式碼樣貌與執行方式:

let n = 1; switch(n){ case 1: console.log('yes'); break; default: console.log('no'); break; } // console 輸出 yes if(n == 1){ console.log('yes'); }else{ console.log('no'); } // console 輸出 yes
let n = 5; switch(n){ case 1: console.log('1'); break; case 2: console.log('2'); break; default: console.log('no'); break; } // console 輸出 no if(n == 1){ console.log('1'); }else if(n == 2){ console.log('2') }else{ console.log('no'); } // console 輸出 no

💬說明: switch 會直接執行 default 的程式碼 ;但 if 會從一開始處理到最後的 else 才會知道執行 else 的程式碼。

2. 嚴謹度比較:

let p = "2";//值改成字串的2 switch(p){ case 2: console.log('yes'); break; default: console.log('no'); break; } // console 輸出 no if(p == 2){ console.log('yes'); }else{ console.log('no'); } // console 輸出 yes

判斷式是相同的,但可以發現 switch 和 if else 在執行上有著不一樣的結果,這是因為 switch 在判斷上採取嚴謹模式,亦即 ===(即型別也要相同),而在 if else 的判斷上並沒有採取這麼嚴謹的模式。

3. 處理速度比較:

let n = 1; switch(n){ case 1: console.log('1'); break; case 2: console.log('2'); break; case 3: console.log('3'); break; case 4: console.log('4'); break; case 5: console.log('5'); break; case 6: console.log('6'); break; case 7: console.log('7'); break; case 8: console.log('8'); break; case 9: console.log('9'); break; case 10: console.log('10'); break; default: console.log('no'); break; } // console 輸出 1
let n = 1; if(n == 1){ console.log('1'); }else if(n == 2){ console.log('2'); }else if(n == 3){ console.log('3'); }else if(n == 4){ console.log('4'); }else if(n == 5){ console.log('5'); }else if(n == 6){ console.log('6'); }else if(n == 7){ console.log('7'); }else if(n == 8){ console.log('8'); }else if(n == 9){ console.log('9'); }else if(n == 10){ console.log('10'); }else{ console.log('no'); } // console 輸出 1

==> if 勝

let n = 10; switch(n){ case 1: console.log('1'); break; case 2: console.log('2'); break; case 3: console.log('3'); break; case 4: console.log('4'); break; case 5: console.log('5'); break; case 6: console.log('6'); break; case 7: console.log('7'); break; case 8: console.log('8'); break; case 9: console.log('9'); break; case 10: console.log('10'); break; default: console.log('no'); break; } // console 輸出 10
let n = 10; if(n == 1){ console.log('1'); }else if(n == 2){ console.log('2'); }else if(n == 3){ console.log('3'); }else if(n == 4){ console.log('4'); }else if(n == 5){ console.log('5'); }else if(n == 6){ console.log('6'); }else if(n == 7){ console.log('7'); }else if(n == 8){ console.log('8'); }else if(n == 9){ console.log('9'); }else if(n == 10){ console.log('10'); }else{ console.log('no'); } // console 輸出 10

==> switch 勝

在處理速度上並沒有固定的誰優誰劣,而是要看判斷式的內容而定。
如果確定會有非常大的部分落在某一個選項時,採用 if 的方式最佳,只需把最常發生的選項放在 if 的第一個,保證速度最快。
但如果每一個選項都有一定的機率會被判斷到時,反而採用 switch 會是比較好的選擇。
💬說明:近代的電腦處理速度已今非昔比, if 和 switch 依處理速度來做抉擇,已不是重要的選擇點了。

4. 程式碼異常狀況:

let n = 1; switch(n){ case 1: console.log('1'); // break;漏打 case 2: console.log('2'); break; case 3: console.log('3'); break; case 4: console.log('4'); break; case 5: console.log('5'); break; default: console.log('no'); break; } // console 輸出 1 和 2

💬說明: switch 如果漏打 break 會執行到出現 break 為止。 case 越多, break 也會越多,對於除錯來說,會較困難。

let n = 100; switch(n){ default: console.log('no'); break; case 1: console.log('1'); break; case 2: console.log('2'); break; case 3: console.log('3'); break; case 4: console.log('4'); break; case 5: console.log('5'); break; } // console 輸出 no
let n = 100; if(n == 1){ console.log('1'); }else if(n == 2){ console.log('2'); }else if(n == 3){ console.log('3'); }else{ console.log(no); }else if(n == 4){ console.log('4'); }else if(n == 5){ console.log('5'); } //Uncaught SyntaxError: Unexpected token 'else'.

💬說明: switch 的 default 放最上面時,程式碼一樣可以執行;但是 if 的 else 沒放最後就會出現程式錯誤的提示。

5. switch 使用的限制:

let n = 100; if(n > 50){ console.log('大於50'); }else if(n == 50){ console.log('剛好50'); }else if(n < 50){ console.log('小於50'); }else{ console.log('打錯了'); } // console 輸出 大於50

💬說明: switch 只能對一個變數進行比對,針對範圍型的處理,就會變得窒礙難行。

📌總整理(使用時機與優劣)

switch if
單一變數(值)比對 v
多變數(值)或範圍比對 ✔️
較好除錯 ✔️
執行效率 ✔️
嚴謹度 ✔️
處理速度
工程師的最💖

參考文章