[JS] if 和 switch 的使用時機

發表於 更新於 分類於 閱讀次數：

if 和 switch 時常會被拿來比較，無論是可讀性、嚴謹性、效能…等，在比較前先了解基本的撰寫結構。

💎 if…else 的寫法

  • 基本結構，至少要有一個條件判斷：

    1
    2
    3
    if (true) {
        console.log("Hello, if!");
    }

  • 非 A 及 B（二選一）：

    1
    2
    3
    4
    5
    6
    let agreement = true;
    if (agreement) {
        console.log("同意");
    } else {
        console.log("不同意");
    }

  • 多個判斷：

    • JavaScript 中的 else if 需要空白隔開（其他程式語言有些是連在一起的elseif）。
    • else 不是必要項目，會在不符合所有的 if 或 else if 時執行。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      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 逐步判斷。
    • 層級過多時不易閱讀。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      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 不一定要放在最後，可以插在中間或最前面，不影響程式執行。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      switch (要判斷的資料) {
        case 條件1:
          /* do something */
          break;
        case 條件2:
          /* do something */
          break;
        ...
        case 條件n:
          /* do something */
          break;
        default:
          /* 上述條件都不符合時執行 */
          break;
      }

  • switch 中的 break 不能遺漏
    如果忘記在 case 結束時撰寫 break 來中斷，無論接下來的條件是否符合，都會一直執行到出現 break 或 switch 結尾為止，這會是相當嚴重的錯誤。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    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 的簡化版，寫法如下：
    1
    2
    3
    4
    /* 條件 ? 結果為truthy時執行 : 結果為falsy時執行 */

    let a = 1;
    a > 1 ? console.log('yes') : console.log('no');
  • 條件運算子也可以做到 else if，但是可讀性不太好，寫起來也容易漏掉符號：
    1
    2
    3
    4
    5
    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

以上是我對 if 和 switch 的一點認知，如有錯誤或是需要補充的知識點，也歡迎大家不吝指教，謝謝！