提姆寫程式

0%

JS 筆記 - 重新認識 switch 用法

發表於 分類於 Disqus：
switch 基本用法、return 使用時機、以及共用判斷的結果

column

最近專案看到同事的一個寫法，想說來研究一下，寫法如下：

1
2
3
4
5
6
7
8
9
10
function travel(){
  const result;
  switch (params) {
    case one:
    case two:
      result = form && to ? `${from}-${to}` : null;
    break;
  }
  return result
}

咦?

怎麼第一個 case 沒有需要執行的程式碼，但卻可以讀到與 case two 相同的結果？

基礎用法

switch 會根據不同的條件來值不同的程式碼，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
switch (expression) {
  case value1:
    // 程式碼塊 1
    break;
  case value2:
    // 程式碼塊 2
    break;
  case value3:
    // 程式碼塊 3
    break;
  // 可以繼續加入更多的 case
  default:
    // 如果上述所有 case 都不符合，則執行此程式碼
    break;
}

給個實際範例，要透過 switch 判斷今天是星期幾：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
let day = new Date().getDay();
let dayName;

switch (day) {
  case 0:
    dayName = "Sunday";
    break;
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  default:
    dayName = "Unknown";
    break;
}

console.log("Today is " + dayName);

今天會透過傳入的 day 去判斷符合的條件顯示對應的程式碼，只要找到就會因為 break 停下來，若都沒有符合的條件，就會跳至 default 並顯示 Unknow。

使用 return 獲得符合條件的程式碼

把上方範例用 return 改寫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function getValue(day) {
  switch (day) {
    case 0:
      return "Sunday";
    case 1:
      return "Monday";
    case 2:
      return "Tuesday";
    case 3:
      return "Wednesday";
    case 4:
      return "Thursday";
    case 5:
      return "Friday";
    case 6:
      return "Saturday";
    default:
      return "Unknown";
  }
}

console.log(getValue(1)); // 輸出: "Monday"

以上述的例子來說，結果會跟基本寫法相同，但是 return 會有以下幾個問題：

  1. 邏輯錯誤：若有多個 case 需要執行相同的程式碼，但其中一個 case 要返回不同的值，那這樣可能會造成邏輯錯誤，因為 switch 的特性也是從頭跑到尾，找到符合的條件就會停止，但使用 return 是把結果直接拋出使用，這樣可能會找到符合的條件，但會丟出不同的結果。
  2. 無法共用程式碼區塊：如下方範例若有相同條件判斷但要得到相同的程式碼區塊時，如果使用 return 就無法共用相同的程式碼，會導致程式碼較為冗長。

舉個透過 switch 判斷平日與假日的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function getValue(day) {
  let dayName;

  switch (day) {
    case 0:
      dayName = "Sunday";
      break;
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
      dayName = "Weekday";
      break;
    case 6:
      dayName = "Saturday";
      break;
    default:
      dayName = "Unknown";
      break;
  }

  return dayName;
}

console.log(getValue(2)); // 輸出: "Weekday"

因為平日是週一到週五，故條件如果符合 1-5 時，則共用結果為 weekday，這樣也比較易讀且不會造成程式碼冗長。

以上就是關於 switch 基本用法以及 return 使用時機以及需要注意的地方。