[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 只能對一個變數進行比對,針對範圍型的處理,就會變得窒礙難行。

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

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

參考文章

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

%d 位部落客按了讚: