JavaScript switch與if else語句的區別

switch和if else都是流程控制語句，非常相似。

關於兩者基本用法可以參閱以下兩篇文章：

（1）.switch語句可以參閱JavaScript switch 語句一章節。

（2）.if else語句可以參閱JavaScript if else 語句一章節。

雖然功能比較相似，但是區別也是很大的，下面就通過程式碼例項做一下簡單介紹。

功能區別一：

當滿足指定條件後，if else語句就會指定與條件相關聯的分支程式碼，其餘的分支不會再有機會被執行。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let num=5;
if(num>7){
  console.log("數字大於7");
}else if(num>6){
  console.log("數字大於6");
}else if(num>5){
  console.log("數字大於5");
}else if(num>4){
  console.log("數字大於4");
}else{
  console.log("前面條件都不滿足");
}

程式碼執行效果截圖如下：

上述程式碼中，只會執行與滿足條件分支關聯的程式碼，其他分支關聯程式碼不會有機會再執行。

如果不使用if else語句而是單純if語句的羅列，每一條語句都會執行到。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let num=5;
if(num>7){
  console.log("數字大於7");
}
if(num>6){
  console.log("數字大於6");
}
if(num>5){
  console.log("數字大於5");
}
if(num>4){
  console.log("數字大於4");
}

上述程式碼中，每一個if語句都會執行，但是此時不能將多個if語句看做一個獨立的功能單元，而是應該看做多個功能單元，與if else不同。再來看一下switch語句，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let num=6;
switch(num){
  case 7:
    console.log("數字等於7");
    break;
  case 6:
    console.log("數字等於6");
  case 5:
    console.log("數字等於5");
  default:
  console.log("螞蟻部落");
}

程式碼執行效果截圖如下：

第一個case匹配，由於沒有使用break，執行完與其相關聯的程式碼之後，還會繼續執行其他case關聯的程式碼。

關於這方面知識可以參閱switch不加break情況分析一章節。

功能區別二：

在多條件判斷的時候，switch語句的效能更好，深層次原因這裡不做介紹，記住就好。

switch語句能夠實現的判斷if else都能夠實現，但有些if else實現的switch語句則難以實現。

使用規則大致如下：

（1）.在進行區間條件判斷的時候，if else非常適合，switch則很難實現。

（2）.在進行固定值條件判斷的時候，switch則是更好的選擇，效能更為優良。