if 和 switch 時常會被拿來比較,無論是可讀性、嚴謹性、效能...等,在比較前先了解基本的撰寫結構。
💎 if else
🔸 基本結構,至少要有一個條件判斷:
if (true) {
console.log("Hello, if!");
}
🔸 非 A 及 B:
let agreement = true;
if (agreement) {
console.log("同意");
} else {
console.log("不同意");
}
🔸 多個判斷:
- JavaScript 中的 else if 需要空白隔開(其他程式語言有些是撰寫成 elseif)。
- else 非必要項目,在不符合所有的 if 或 else if 時執行。
let x = 100; if (x >= 10000) { /* do something */ } else if (money >= 1000) { /* do something */ } else if (money >= 100) { /* do something */ } else { /* do something */ }
🔸 巢狀判斷
- 可以在 if-else 內再加入 if-else 逐步判斷。
- 層級過多時不易閱讀。
if (temperature > 28) { console.log("stay home"); } else { if (humidity > 50) { console.log("stay home"); } else { if (traffic === 'nice') { console.log("stay home"); ...
💎 switch
🔸 基本結構:
- 條件數量可以自行增減。
- 每個條件結束後需加上 break 終止執行。
- default 不一定要放在最後,可以插在中間或最前面,不影響程式執行。
switch (要判斷的資料) { case 條件1: /* do something */ break; case 條件2: /* do something */ break; ... case 條件n: /* do something */ break; default: /* 上述條件都不符合時執行 */ break; }
🔸 switch 中的 break 不能遺漏
如果忘記在 case 結束時撰寫 break 來中斷,無論接下來的條件是否符合,都會一直執行到出現 break 或 switch 結束為止,這會是相當大的失誤。
var x = 0;
switch (x) {
case 0:
console.log(0); // 此處漏掉 break
case 1:
console.log(1); // 繼續執行,此處也漏掉 break
case 2:
console.log(2); // 繼續執行
break; // 終止執行
case 3:
console.log(3);
break;
default:
console.log('default');
}
---執行結果---
console:
0
1
2
💎 if 和 switch 簡單比較
整理了各種網路資源,歸納出以下表格:
|| if | switch |
|:-:|:-:|:-:|
| 易讀性 | 判斷條件少時較佳 | 判斷條件多時佳 |
| 效能 | 專案複雜時較差 | 專案複雜時較佳|
| 判斷方式 | 撰寫者決定嚴謹度 | 嚴格比較(===) |
| 使用時機 | 適合在少量決策、連續區間 | 適合大量決策、獨立區間 |
💎 延伸技巧
🔸 條件(三元)運算子
條件運算子像是 if...else 的簡化版,寫法如下:
/* 條件 ? 結果為truthy時執行 : 結果為falsy時執行 */
let a = 1;
a > 1 ? console.log('yes') : console.log('no');
條件運算子也可以做到 else if,但是可讀性不太好,寫起來也容易漏掉符號:
let a = 1;
a > 3 ? console.log(`${a} > 3`)
: a > 2 ? console.log(`${a} > 2`)
: a > 1 ? console.log(`${a} > 1`)
: console.log(`${a} <= 1`);
🔸 Early Return
當條件判斷多的時候,很容易寫出好幾層的巢狀判斷,不但不好閱讀,也降低執行效能。
這時可以挑出一些必要的條件,不符合就直接終止(return),可以減少巢狀、提高可讀性,也能提昇程式執行效率。
function doSomething(a, b){
// 不是數字就結束
if(isNaN(parseFloat(num1))||isNaN(parseFloat(num2))) return;
// 主要判斷邏輯
if(...){
if(...){
...
}
參考資料:
MDN-if...else
MDN-switch
Ray-JavaScript 的 if 跟 switch 效能
MDN-條件運算子
askie-五個小技巧讓你寫出更好的 JavaScript 條件語句