# if 與 switch 的使用時機？

###### tags: `六角學院` `Javascript`

---

### if 與 switch case 本質上的語法差異
if 與 switch case 在程式界不只是Javascript，幾乎在許多語言中，都是非常常用且很常拿來比較的兩個 ==條件判斷== 工具，要比較首先必須觀察雙方的語法差異，以下我們考慮根據不同的a值執行不同的結果

//if語法

if (a == 1)
 [dosomething]
else if (a == 2)
 [dosomething]
else if (a == 3)
 [dosomething] 
else 
 [dosomething] 

//switch case語法

switch (a) {

case 1: 
 [dosomething]
 break;
case 2: 
 [dosomething]
 break;
case 3: 
 [dosomething]
 break;
default: 
 [dosomething]
 break;
}

簡易的範例似乎看不出來兩者的差別，如果再**更複雜一點**呢？
我們來判斷　==在a和b都是正數的情況下，a+b是否大於c？==

//if語法

var a = 1,
  b = 2,
  c = 2;

if (a > 0 && b > 0) {
  if (a + b > c) {
    console.log("a+b大於c");
  } else {
    console.log("a+b不大於c");
  }
} else {
  console.log("a和b不都是正數");
}

//switch case語法

switch (a > 0 && b > 0) {
  case true:
    switch (a + b > c) {
      case true:
        console.log("a+b大於c");
        break;
      case false:
        console.log("a+b不大於c");
        break;
    }
    break;
  case false:
    console.log("a和b不都是正數");
    break;
}

從上面這個例子可以看出來，switch case和if else雖然都可以實現同樣的功能，但是對於 ==邏輯判斷表示式== 來說if else更加靈活，可以判斷的條件會比switch case有彈性，如果遇到需要複雜條件來實現的例子，switch case會顯得笨重。

換句話說，switch case比較適合使用來判斷 ==單一變數== 的條件，對於需要 ==比較== 或是更加複雜的多重條件，使用switch case是相對麻煩的。

:::info
寫到這裡很多人可能會想，那我們到底要switch case做什麼用呢？因為 if-else 也可以達到簡單的變量判斷呀？
:::

答案就是 ==效率與程式可讀性==

---

### if 與 switch case 效能上的差異

我們先來看兩張圖比較 if 與 switch case 的執行流程 :

#### switch case 流程圖

#### if 流程圖

從上面兩個圖可以明顯的看出來，對於if-else來說需要 ==掃過每一個條件== 直到找到符合條件的case，對於不同case其實執行時間是不一樣的，進入第一個case需要判斷1次，符合第二個case需要判斷2次，以此類推，又如果是最後一個才進入的話，等於以上的條件都會被執行。

而switch case本質是在編譯的時候生成一張table來指示case的位址，通常編譯器都會對table進行優化2，所以它所有case都可以 ==通過少量判斷== 就跳轉到對應符合條件的case，對於每一個case的執行時間基本是相同的。

> 綜合來說，在一般分支夠多的情況下，switch case的效率是高於if-else的。

---

### if 與 switch case 的程式易讀性

由上面的例子可以看出，當判斷條件為邏輯表示式且條件較少的時候，使用if else看起來比switch case簡潔而且維護起來也更容易。==但是當條件數超過三個且都是常數的時候==，我們來看下面這個簡單的例子：

//switch case
switch (color) {
  case "red":
    console.log("red");
    break;
  case "yellow":
    console.log("yellow");
  case "blue":
    console.log("blue");
  default:
    console.log("unknown color");
}

//if
if (color === "red") {
  console.log("red");
} else if (color === "yellow") {
  console.log("yellow");
} else if (color = "blue") {
  console.log("blue");
} else {
  console.log("unknown color");
}

用switch case看起來就非常清楚明瞭且效能更好，即使再加幾個條件看起來程式碼也不會顯得冗長，維護性和可讀性都比if else更好。

---

### 結論

- 在分支非常多且只是簡單便量的情況下應該優先考慮switch case，不僅考慮到效率，也應該綜合程式碼可讀性，可維護性等。
- 選擇使用哪個表示式之前應該評估每個條件出現的可能性，如果if else的前面兩三個條件就可以覆蓋到絕大部分情況，其實if else的效率並不會比switch case低。
- 這兩種表示式的不同在效率上對整體程式碼的執行時間影響很小，應該把程式碼的可讀性，可維護性等考慮因素放在效率之前。

---

### 參考資料

[switch case和if else比較](https://www.itread01.com/content/1544470087.html)
[switch...case && if...else效率比較和優化](https://iter01.com/195048.html)
[MDN switch case](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/switch)