iT邦幫忙

0

【JavaScript】在JavaScript中使用switch(true)

WM 2021-05-08 14:39:341688 瀏覽

開發專案時,在其中的某個環節,想說除了switch之外,是否有更好的寫法,上網一查發現,還有switch(true)這種用法,感覺還蠻新奇的,第一次接觸到的人或許會對expression裡面怎會是true感到疑惑。

首先,我們先來討論以下情境:
請依照分數高低,分配SABCD級距。

一般的情況都會這樣寫:

if (score === 100) {
  level = 'S';
} else if (score >= 90 && score < 100) {
  level = 'A';
} else if (score >= 80 && score < 90) {
  level = 'B';
} else if (score >= 70 && score < 80) {
  level = 'C';
} else if (score >= 60 && score < 70) {
  level = 'D'
} else {
  level = '不及格'
}

使用條件(三元)運算子,更簡潔

level =
  score === 100 ? 'S' : score >= 90 && score < 100 ?
    'A' : score >= 80 && score < 90 ?
      'B' : score >= 70 && score < 80 ?
        'C' : score >= 60 && score < 70 ?
          'D' : '不及格'

最後是今天要討論的主題switch(true)

switch (true) {
  case score === 100:
    level = 'S';
    break;
  case score >= 90 && score < 100:
    level = 'A';
    break;
  case score >= 80 && score < 90:
    level = 'B';
    break;
  case score >= 70 && score < 80:
    level = 'C';
    break;
  case score >= 60 && score < 70:
    level = 'D';
    break;
  default:
    level = '不及格';
}

為何switch (true)可行,答案其實很簡單:case條件是用來跟expression匹配的

switch不只是用來比對stringnumber,也可以比對boolean

至於可讀性,第二種相對會比較差。

個人會比較喜歡第三種,你們覺得呢?


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
Luis-Chen
iT邦新手 4 級 ‧ 2021-05-09 10:39:50

我現在更喜歡這種寫法
大家怎麼看?

const level= ((score) => {
    if(typeof score !== 'number') return 'NAN'
    if(score===100) return 'S'
    if(score >= 90 && score < 100) return  'A';
    if(score >= 80 && score < 90)  return 'B';
    if(score >= 70 && score < 80)  return 'C';
    if(score >= 60 && score < 70)  return 'D
    if(score < 60) return 'F'
})(100)
WM iT邦新手 3 級 ‧ 2021-05-11 23:21:20 檢舉

這用法不錯,我倒是沒想到可以用IIFE,又學到一招了,感謝提供

Luis-Chen iT邦新手 4 級 ‧ 2021-05-12 22:03:10 檢舉

符合 FP的風格,First-class Function 的應用

WM iT邦新手 3 級 ‧ 2021-05-16 16:24:41 檢舉

了解,感謝補充說明

0
tunin
iT邦新手 4 級 ‧ 2021-05-10 18:14:37

我比較偏好第一種寫法,閱讀上比較直覺,而且 switch 的寫法,有 case 中的 break 忘了寫的風險,這種錯誤比較不容易發現。

WM iT邦新手 3 級 ‧ 2021-05-11 23:27:15 檢舉

第一種是最好理解的,只是個人不太喜歡一堆else if,比較傾向switch case,沒有好壞,每個人都有自己的coding style,重點是團隊的夥伴要能接受

我要留言

立即登入留言