ㄟ問你喔，if 和 switch 的差異在哪？該怎麼選用？

Photo by Danielle MacInnes on Unsplash

這一篇主要在探討 JavaScript 中的 if 判斷式(if-else statement) 和 switch (switch-case) 之間有什麼異同，又應該如何判斷選用的時機？首先，兩者在外觀上就有很大的差異，因此會先從結構上來觀察，接著比較兩者語法的異同，最後找出各自的強項，分析出適合選用的時機。

比較 if判斷式和 switch 的結構

if 判斷式的結構

• 由 if 和 else 組成，但若沒有 else，程式碼依然能夠執行。
• 可透過比較運算子、邏輯運算子的運算得出 true 或 false。
• 可轉換非布林值的值，除了 falsy 值以外的值 (空字串、數字0、NaN、null、undefined…)，都會被判定為 true。
• 在每一個小括號 ( ) 內都有一個條件判斷的運算，當第一個條件沒有符合，就會往下一個條件比對，直到比對出 true 的結果為止。

const myCar = 'Porsche'; 
if(myCar === 'Volvo'){ 
  console.log('我開 Volvo'); 
} else if (myCar === 'Benz'){ 
  console.log('我開 Benz'); 
} else if (myCar === 'VolksWagen'){ 
  console.log('我開 VolksWagen'); 
} else if (myCar === 'Porsche'){ 
  console.log('我開 Porsche'); 
} else { 
  console.log('我沒車！'); 
} 
// 印出 '我開 Porsche'

if 判斷式的巢狀結構

很多人可能以為 if 判斷式是由 if, else if 和 else 組成，但其實 else if 的出現只是文字排版的緣故，看到底下程式碼將會恍然大悟！)

const myCar = 'Porsche';
if(myCar === 'Volvo'){
      console.log('我開 Volvo');
} else 
if (myCar === 'Benz'){
      console.log('我開 Benz');
} else 
if (myCar === 'VolksWagen'){
      console.log('我開 VolksWagen');
} else 
if (myCar === 'Porsche'){
      console.log('我開 Porsche');
} else {
      console.log('我沒車！');
}
// 印出 '我開 Porsche'

switch 的結構

• switch 是由 switch, case, break 和 default 組成。
• switch 的 ( ) 內，主要是一個變數，而變數的值可能是字串、布林值、數字、null、undefined，而這個變數將和 case 後面的值進行比對。
• case 後面接的是判斷條件，角色和 if 判斷式中的 if 相似。
• default 的角色跟 if 判斷式中的 else 相似。
• break 的功能在於中斷程式碼，所以沒有 break，程式碼仍可執行，只是會把所有的 case 都跑完，得到的結果可能不精準，如何運用要看情況。

const myCar = 'Porsche'; 
switch(myCar) { 
case 'Volvo': 
console.log('我開 Volvo'); 
break; 
case 'Benz': 
console.log('我開 Benz'); 
break; 
case 'VolksWagen': 
console.log('我開 VolksWagen'); 
break; 
case 'Porsche': 
console.log('我開 Porsche'); 
break; 
default: 
console.log('我沒車！'); 
break; 
} 
// 印出 '我開 Porsche'

比較 if 和 switch 的運算過程

(一) 是否允許強制轉型？

if 判斷式允許強制轉型，但可透過運用 === 避免被轉型：

if 判斷式 ( ) 內的運算，若不希望被 JS 隱性轉型，要另外透過用 ===、!==、>== ，指示運算過程不允許強制轉型，否則就會出現以下的狀況，明明答案要是數字666，卻印出字串666。

const number = 666; 
if(number == '666'){ 
  console.log('答案是字串666'); 
} else if (number == 666){ 
  console.log('答案是數字666'); 
} else { 
  console.log('都不對'); 
} 

switch 不允許強制轉型

switch 的預設機制就是 === 的判斷，直接比對變數 number 跟 case 的資料型別、再比較值，所以若是型別不同的將會第一時間被篩選掉，因此在底下 switch 範例中的 case ‘666’ 不會執行。

const number = 666;
switch(number){
case '666': 
console.log('答案是字串666'); 
break; 
case 666: 
console.log('答案是數字666'); 
break; 
default: 
console.log('都不對'); 
break; 
} 
//印出 '答案是數字666'

(二) 能不能做範圍取值？

if 判斷式較為擅長進行範圍取值

如同前面所提過，if 判斷式可透過比較運算子或邏輯運算子得出 true 或 false。

let salary = 26900; 
if(salary >= 100000){ 
   console.log('月收入十萬以上'); 
} else if (salary >= 50000 && salary < 100000) { 
   console.log('月收入介於五萬以上，低於十萬元'); 
} else if (salary >= 25000 && salary < 50000) { 
   console.log('月收入介於兩萬五千元以上，低於五萬元'); 
} else { 
   console.log('低薪族啊 QAQ'); 
} 
// 印出 '月收入介於兩萬五千元以上，低於五萬元'

相較之下，switch 就不太擅於進行範圍取值，若勉強要進行，它也不像 if 判斷式能運用到邏輯運算子來算出一個區間範圍（像是：介於…到…之間），頂多能做到以下範例中的比對，但記得要在 switch 的變數直接改為 true。

相對來說，switch 還是在值與值之間的比對顯得會更加精準跟快速。

let salary = 38888; 
switch(true){ 
case salary >= 100000: 
console.log('月收入十萬以上'); 
break; 
case salary >= 50000: 
console.log('月收入五萬以上'); 
break; 
case salary >= 30000: 
console.log('月收入三萬以上'); 
break; 
default: 
console.log('低薪族啊 QAQ'); 
break; 
} 
//印出 月收入三萬以上

(三) 其他比較

switch 沒有 break 就不會煞車

if 判斷式在比對到 true 的結果後，就會終止運算；但如果在 switch 的程式碼中，沒有 break 來終止程式碼運行，就算已經有比對到 true 的結果，後方的 case 仍會繼續跑完：

const myCar = 'Benz'; 
switch(myCar) { 
case 'Volvo': 
console.log('我開 Volvo'); 
case 'Benz': 
console.log('我開 Benz'); 
case 'VolksWagen': 
console.log('我開 VolksWagen'); 
case 'Porsche': 
console.log('我開 Porsche'); 
default: 
console.log('我沒車！'); 
} 
// 印出 
// 我開 Benz 
// 我開 VolksWagen 
// 我開 Porsche 
// 我沒車！

default 和 else：當上述條件都不符合時，就執行

const number = 777; 
switch(number){ 
case 111: 
console.log('答案是數字111'); 
case 222: 
console.log('答案是數字222'); 
case 333: 
console.log('答案是數字333'); 
case 444: 
console.log('答案是數字444'); 
default: 
console.log('以上都不對'); 
} 
//印出 '以上都不對'

switch 可以沒有 default，如同 if 判斷式也可以沒有 else

const number = 777; 
if(number === 777){ 
console.log('答案是數字777'); 
} 
//印出 '答案是數字777' 
switch(number){ 
case 777: 
console.log('答案是數字777'); 
} 
//印出 '答案是數字777'

總結

在看完以上的比較之後，發現 if 判斷式和 switch 之間，其實有很多相同和不同之處。

假如，當現在要拿一個變數的值和另一個值做簡單的比對判斷，其實 switch 運作起來在效能上確實是更有效率，因為它不會像 if 判斷式要逐條逐條的運算和比對，switch 可以直接比對變數跟 case 後方的值，且會強制不允許資料轉型，運算上更為嚴謹。

而 if 判斷式的強項則是它能做 true 或 false 的判斷，甚至非布林值的值，它也能進行強制轉型，而這部分就是 switch 所缺乏的能力。嚴格真的要比較起來，其實沒有誰好壞之分，但可以說它們各有不同擅長的功能，在了解兩者的特性後，可依照自己的需求，在不同的使用時機下選用。

if-else 與 switch-case 各自有不同的優勢

參考資料

• MDN — if…else
• MDN — switch
• 控制判斷(運算子、if、switch)
• JS 筆記 — 控制判斷(if、else if、switch)
• JavaScript Switch Case — JS Switch Statement Example