[MTR04] W2 D4 JS 判斷式 if/else


Posted by Christy on 2020-06-22

看影片:
「我們只能往不同地方走去:判斷式」到「先做再說:do...while...」

[影片一] 我們只能往不同地方走去:判斷式

如果我說,愛我沒有如果:if/else statement

var number = 10
if (number % 5 === 0){
 console.log('是五的倍數')
} else {
 console.log('不是五的倍數')
}

number % 5 === 0 也可以寫成 !(number % 5),但可讀性比較差,所以寫前者比較好


不只一條活路:if/else if statement

如何在寫程式時候註解
//後面的東西就不會被執行

/*
這中間可以寫多行註解
*/

範例:

var age = 30
if (age >= 65){
 console.log('old man')
} 
if (65 > age && age >= 20)
 console.log('young')
}
if (age < 20)
 console.log('children')

或者可以用 if else

var age = 30
if (age >= 65){
 console.log('old man')
} else {
 if (age < 20) {          -> 這裡要縮排唷,為了層次感與可讀性
  console.log('children') -> 這裡要縮排唷,為了層次感與可讀性
 } else {
  console.log('young')
 }
}

這個也可以 if -> else if -> else,中間的 else if 可以很多個

var age = 30
if (age >= 65){
 console.log('old man')
} else if (age >= 20) {
 console.log('young')
} else (age < 20) {
 console.log('children')
}

太多太多的選擇:switch case

承上面的 else if 如果太多的話,可以用 switch case 取代

範例:

var month = 1
if month === 1 {
 console.log('一月')
} else if (month === 2){
 console.log('二月')
}

可以換成:

var month = 1
switch month {
  case: 1
   console.log('一月')
   break
  case: 2              
   console.log('二月')
   break               -> 加 break 才會停止
  default:             -> 如果前面都不符合的話,就會到這
   console.log('haha')
}

也可以寫兩個條件

var month = 1
switch month {
  case: 1      -> 兩個條件同樣輸出
  case: 2  
   console.log('一月')
   break              
  default:             
   console.log('haha')
}

如果輸出很固定的話,這樣寫會比較簡單:

var month_to_chinese = ['一月', '二月', ‘三月’]
console.log(month_to_chinese[month -1])

一、二、三:三元運算子(Ternary)

var score = 60
var message = ''

if(score >= 60){
 messge = 'pass'
} else {
 message = 'fail'
}

console.log(10 > 5 ? 'bigger' : 'smaller')

也可以這樣寫

var score = 60
var message = score >= 60 ? 'pass' : 'fail'
console.log(messge)
//問 score 是不是大於等於 60,是的話回傳 pass;不是的話回傳 fail
//語法:condition ? A : B

練習一:判斷是否及格
請你自己寫出一段程式碼,是判斷一個叫做 score 的變數是否及格
(超過或剛好 60 分),如果及格的話就輸出 pass,否則輸出 fail。
var score = 100
var message = score >= 60 ? 'pass' : 'fail'
console.log(message)

練習二:BMI 計算
BMI 值的計算公式為:體重 / 身高^2。

假設體重是 70,身高是 180(1.8m),BMI 就是 70/(1.8*1.8) = 21。

現在請你寫出一個簡單的 BMI 計算器,用兩個變數代表體重跟身高,
算出 BMI 之後判斷 BMI 是落在哪個範圍內並輸出相對應的字串。

體重過輕:BMI < 18.5

正常範圍:18.5 <= BMI < 24

過重:24 <= BMI < 27

輕度肥胖:27 <= BMI < 30

中度肥胖:30 <= BMI < 35

重度肥胖:35 <= BMI
var height = 188/100
var weight = 80
var BMI = weight/(height*height)

if (BMI < 18.5){
 console.log('體重過輕')
} else if (BMI >= 18.5 && BMI < 24) {
 console.log('正常範圍')
} else if (BMI >= 24 && BMI < 27) {
 console.log('過重')
} else if (BMI >= 27 && BMI < 30) {
 console.log('輕度肥胖')
} else if (BMI >= 30 && BMI < 35) {
 console.log('中度肥胖')
} else {
 console.log('重度肥胖')
}

? 今日卡卡 1:
影片「如果我說,愛我沒有如果:if/else statement」2'40 左右有提到,如果條件有兩個的話,不可以寫成 else if (24 <= BMI < 27),要用 && 寫成else if (BMI >= 24 && BMI < 27)。我在這裡卡了半小時有吧,可見影片看過去,我只是當下理解了,但根本就沒有記得,幸好有找到解答,不然去 slack 問這問題感覺我很不用心(?)

另外要特別注意,if/else if statement,寫到最後一個的時候,只會有 else 而且大括號 {} 裡面不會有條件!

? 今日卡卡 2:

var height = 168/100
var weight = 80
console.log(weight/(height*height))

我先寫了上面的計算器,可以把 BMI 值算出來了,
但不太知道要怎麼連接到下面「如果 BMI = 28,就輸出輕度肥胖」,
後來又再定義了一個變數,就解決問題了

var height = 168/100
var weight = 80
var BMI = weight/(height*height)
console.log(BMI) -> 最後結果就是上面那樣子,這行是多餘的,後來刪掉了

[影片二] 跟我一起跑操場:迴圈

迴圈的前世:label 與 goto

  • 迴圈就是重複一直做一樣的事,但會有終止條件
  • 會發生無窮迴圈就是沒有終止條件,或者終止條件設錯了
  • 還記得佳佳嗎?
    • i = i + 1 -> i += 1 -> i++
  • label 跟 goto 的語法在 Js 裡面是沒有的,但一些組合語言或其他程式語言裡面有。
  • 如果不小心寫出無窮迴圈的話,按 ctrl + c 可以中斷

先做再說:do...while...

看了一遍但不是很懂,明天從這裡開始看。










Related Posts

初探Robot Framework之Keyword設計原則 - 06

初探Robot Framework之Keyword設計原則 - 06

Leetcode 刷題 pattern - Fast & Slow Pointer

Leetcode 刷題 pattern - Fast & Slow Pointer

一看就懂的 React ES5、ES6+ 常見用法對照表

一看就懂的 React ES5、ES6+ 常見用法對照表


Comments