今天內容

• if...else
• if...else if...else
• switch case
• 三元運算子
• 課後小練習 (明日再解答)

筆記

• if...else：適用於判斷一個條件輸出兩種結果的情形。

  if (條件) {
     //條件true執行這一個區塊的內容，false到下一個else
  } else {
     //上面條件false執行這一個區塊的內容
  }
  

  這裡的{}我們用block來稱呼它而不是object。之後講解宣告的範疇還會講到！先筆記。MDN：block

  來一個情境比較好理解：小美想知道小明這次的分數有沒有及格？ (對，小美用看的看不出來，數學不會就是不會？)

  var score = 40
  if (score >= 60) {
     console.log("pass")
  } else {
     console.log("fail")
  }
  //fail
  

  如果括號內的條件判斷為true時，等等？你問什麼是true和false嗎？來 來 來，還記得第二天有提到的：在 javascript 裡面只要是 0、空字串""、null、false、undefined、NaN 都會被判定為 false。這件事嗎？ 打三顆星，很重要 但考試不會考 。當(score >= 60)執行跑出false，就不會執行裡面的block而是去執行else那一塊了。

  我一開始也不知道會出現什麼，但用console.log(score >= 60)，它就會告訴你了。請愛用 console.log 有益身體健康！解bug好快樂？。

  再來一個情境看看：小美又想知道小明這個分數是否有在70~80？數學會用未知數 X 來寫70 ≤ X ≤ 80。那程式碼呢，丟到console.log看看會印出什麼？

  var score = 75
  console.log(70 <= score <= 80)   //ture，直接看是ture沒有錯。
  
  //乍看之下好像沒錯，但把score變成40的話...
  
  var score = 40
  console.log(70 <= score <= 80)   //ture 這樣就錯了，我們從左到右去執行看看
  console.log(70 <= score)         //false
  console.log(false <= 80)         //true，問題就在這裡。
  
  //所以要用之前說過的邏輯運算來解：
  
  var score = 60
  if (70 <= score && score <= 80) {
   console.log("分數落在70~80之間")
  } else {
   console.log("分數不在70~80之間")
  }
  //&&：其中一個false就會執行false。這裡就會直接執行第二個block。
  

• if...else if...else：適用於判斷多個條件輸出多個結果的情形。

  if (條件1) {
     //條件1 true執行這一個區塊的內容，false到下一個else if (條件2)
  } else if (條件2) {
     //條件2 true執行這一個區塊的內容，false到下一個else if (條件3)
  } else if (條件3) {
     //條件3 true執行這一個區塊的內容，false到下一個else
  } else {
     //上面條件全部都false才會執行這一個區塊的內容
  }
  //會一個一個判斷，中間的else if(條件)可自行增減，上面的條件都不符合的話才會到最後一個else。
  

  那就再來個情境吧，今天小明想買個車票但他不知道要買什麼票？(1) 20歲以下學生票 (2) 21~64歲一般票 (3) 65歲以上老年票。

  var age = 18
  if (age >= 65 ) {
     console.log("老年票")
  } else if ( age >= 20 ) {
     console.log("一般票") 
  } else {
     console.log("學生票") 
  }
  

• switch case：適用於判斷更多個條件，輸出多個結果的情形，讓我們看 小明還有多少問題？ 情境：今天小明想知道某個月份的季節？

  var month = 6
  switch (month) {
     case 12:
     case 1:
     case 2:
        console.log("Winter")
        break
     case 3:
     case 4:
     case 5:
        console.log("Spring")
        break
     case 6:
     case 7:
     case 8:
        console.log("Summer")
        break
     case 9:
     case 10:
     case 11:
        console.log("fall")
        break
     default:  //都不符合的話
        console.log("輸入錯誤，請重新輸入")
  }
  // case可以一起也可以分開，使用break讓程式碼不會再往下跑，default會在上面都不符合時執行。
  

• 三元運算子：讓你的判斷式更精簡。直接上語法：(條件) ? (true回傳):(false回傳)。我們拿第一個if...else的情境來改：

  var score = 40
  var isPass = score >= 60 ? "pass" : "fail"
  console.log(isPass) //fail
  

• 課後小練習 (明日再解答)：小明的體重70公斤，身高177公分，請幫他計算他的BMI範圍所對照的結果多少？ BMI值的計算公式為： 體重 ／ 身高(公尺)＊身高(公尺)

  BMI範圍	對照結果

  BMI < 18.5 | 體重過輕
  18.5 ≤ BMI < 24 | 正常範圍
  24 ≤ BMI < 27 | 過重
  27 ≤ BMI < 30 | 輕度肥胖
  30 ≤ BMI < 35 | 中度肥胖
  35 ≤ BMI | 重度肥胖

參考資料

• MDN：if...else
• MDN：switch
• MDN：Conditional (ternary) operator
• 課後小練習題目一樣取自於 Lidemy鋰學院