### 🔍小範例大學問👊
# [<font color="#f00">JavaScript</font>] 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 只能對一個變數進行比對，針對範圍型的處理，就會變得窒礙難行。

## <font color="#f00">📌總整理(使用時機與優劣)</font>

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

---
#### 參考文章
* [為什麼很多程式設計師不用switch，而是大量的if……else if？](https://www.juduo.cc/club/709536.html)
* [[[Java] if-else pk switch，誰快？](https://www.jackforfun.com/java-if-else-pk-switch)
* [JavaScript 基礎知識-switch & if else 的判別差異](https://ithelp.ithome.com.tw/articles/10211561)