iT邦幫忙

1

[野人獻曝] Javascript 中 switch 的彈性用法

  • 分享至 

  • xImage
  •  

在使用 switch 來判斷條件時,通常以一個變數來比對多種可能值,例如:

function checkColor(color){
  switch(color){
    case 'Red':
      return 'Red'
    case 'Green':
      return 'Green'
    case 'Blue':
      return 'Blue'
    default: 
      return 'Others'
  }
}

而當我們想利用 switch 來判斷表達式時該怎麼做呢?
先來個錯誤示範:

function checkAge(age){
  switch(age){
    case (age > 18):
      console.log('case 1')
      break
    case (age == 18):
      console.log('case 2')
      break
    case (age < 18):
      console.log('case 3')
      break
    default:
      console.log("didn't match any one")
      break
  }
}
checkAge(12) // didn't match any one

這是因為 switch 比對條件的過程相當於

age === (age > 18)
// 12 === true 

// return false

因此判斷的結果自動 Fall back 到 default 去了

也因為這個特性,所以可以倒過來用一個結果值來比對多種條件:

function checkAge(age){
  switch(true){               // 這行是關鍵,幫你畫重點
    case (age > 18):
      console.log('case 1')
      break
    case (age == 18):
      console.log('case 2')
      break
    case (age < 18):
      console.log('case 3')
      break
    default:
      console.log("didn't match any one")
      break
  }
}
checkAge(12) // case 3

知道這點以後,就可以用 switch 來做跟 if...else 一樣的事囉!


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

1 則留言

0
harutsuki
iT邦新手 5 級 ‧ 2019-07-08 18:18:11

boolean 不是只有單純的 true, false?

金大可 iT邦新手 5 級 ‧ 2019-07-11 11:28:08 檢舉

switch後面的括號中不傳入變數而是直接傳入true或false,
就可以比對各種case中條件式回傳的boolean值,
switch的用法變得更彈性。

harutsuki iT邦新手 5 級 ‧ 2019-07-12 15:25:39 檢舉

我不懂為什麼標題要加上boolean

金大可 iT邦新手 5 級 ‧ 2019-07-16 12:12:05 檢舉

標題確實是下得不太好,改一下好了

我要留言

立即登入留言