---
# System prepended metadata

title: if 與 switch 的使用時機？

---

### 🔍小範例大學問👊
# [<font color="#f00">JavaScript</font>] if 與 switch 的使用時機？
---
## 1. 基本程式碼樣貌與執行方式：
```javascript=
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
```
```javascript=
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. 嚴謹度比較：
```javascript=
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. 處理速度比較：
```javascript=
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
```
```javascript=
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 勝
```javascript=
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
```
```javascript=
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. 程式碼異常狀況：
```javascript=
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 也會越多，對於除錯來說，會較困難。

```javascript=
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
```
```javascript=
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 使用的限制：

```javascript=
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)

