2021-04-26

[Lichen5221]

if...else

if ( ) {

} else {

}

基本款。

如果小括弧裡面的條件有兩個，利用 && 。

if ( ) {

} else {
   if ( ) {

   } else {

   }
}

多種條件寫法一

if ( ) {

} else if {

} else if {

} else { //上述條件都不成立的時候

}

多種條件寫法二

[Lichen5221]

Switch case

當條件太多的時候使用。

switch ( ) {
  case 某東西:
    執行什麼內容
  case 某東西:
    執行什麼內容
}

var month = 7
switch ( month ) {
  case 1:
    console.log( " 一月 " )
    break // 加入才會在符合條件後不執行後半部
  case 2:
    console.log( " 二月 " )
    break
  default: // 如果前面都不符合的話
    console.log( ' error ' )
//依此類推

以顯示月份為例

var month = 1
switch(month) {
  case 1:
  case 2:
    console.log( ' 一月 ' )
    break

將兩個條件放在一起，如此當變數值為 1 or 2 皆會顯示 「 一月 」。

[Lichen5221]

透過陣列

var month = 3
var month_ch = [一月, 二月, 三月]
console.log(month_ch[month -1])

[Lichen5221]

Ternary

var score = 60
var isPass = false
if (score >= 60) {
  isPass = true
} else {
  isPass = false
}

//簡化
var score = 60
var isPass = score >= 60

利用三元運算子的時機

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

//沒辦法簡化

condition ? A : B  //condition 如果為 true ，執行 A ，如果為 false ， 執行 B 。

console.log(10 > 5 ? ' Bigger ' : ' Smaller ')

var score = 60
var message = score >= 60 ? ' pass ' : ' fail '
console.log(message)

通常用在兩個條件的情況下，但要形成巢狀也可以。

var score = 60
var message = score >= 60 ? (score === 100 ? ' perfect ' : ' good ') : ' fail '
console.log(message)

但因為不好讀，所以不建議這樣寫，如果要多條件還是利用 if...else 會更好。

[Lichen5221]

練習一：判斷是否及格

請你自己寫出一段程式碼，是判斷一個叫做 score 的變數是否及格（超過或剛好 60 分），如果及格的話就輸出 pass，否則輸出 fail。

回答：

var score = 70
if (score >= 60){
  console.log( ' pass ' )
} else {
  console.log( ' fail ' )
}

除了判斷是否及格以外，也請你對滿分做出特別判斷，如果是 100 分的話就輸出 you are no1!

回答：

var score = 100
if (score === 100 ) {
  console.log( ' you are no.1! ' )
} else if (score >= 60){
  console.log( ' pass ' )
} else {
  console.log( ' fail ' )
}

[Lichen5221]

練習二：

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 cm = 180
var m = cm / 100
var kg = 70
var BMI = kg / (m ** 2)
console.log(BMI)

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

[Lichen5221]

迴圈的前世

迴圈的定義：重複同樣的事情，直到終止條件完成。

label 與 goto，JS 中無法執行，會有其他的指令代替。

var i = 1

label:
console.log(i)
i++
if (i <= 100) {
goto label
} else { //其實可以不用這行
   console.log('finished!') //可以只留這行，如果用 console.log('i=', i)，會顯示 101 。
}

無窮迴圈：如果沒有終止條件會不斷執行，吃電腦資源或是讓電腦當機。

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

var i = 1
do {
  console.log(i)
  i++
} while (i <= 100)

console.log(' i= ', i)

寫法一

var i = 1
do {
  console.log(i)
  i++
  if (i > 100) {
    break //跳出迴圈
  }
} while (true)

console.log(' i= ', i) // break 的話會直接執行區塊外的指令

寫法二

額外還有 continue 的用法，我覺得這個比較需要一點時間跟練習才不會打結。

var i = 1
do {
  console.log(i)
  i++
  if (i % 2 === 1) {
    continue //如果是奇數跳過下面指令直接回到 do 繼續迴圈。
  }
  console.log('i++', i) //如果是偶數則會執行這一行
} while (true)

console.log(' i= ', i)

跑迴圈要有電腦思維，將電腦跑的過程一行一行寫下來。

1. i = 1
2. console.log(1)
3. i => 2
4. while(i <= 100) true
5. do
6. console.log(2)
7. i => 3
8. while(i <= 100) true
9. ... ... i=>101 ... console.log('i=', i)

可以透過 Google Chrome Tool 來 debug 。

<script>
  debugger
  var i = 1
  do {
    console.log(i)
    i++
  } while (i <= 100)
  console.log(' i= ', i)
<script> //正確寫法： </script> ，犯蠢的紀念。

我放進去 .html 檔之後，打開 source 卻沒辦法像影片中的可以按 step ，目前不了解為什麼， google 相關字詞好像也沒有解答。

結果我自己發現問題了，就是最後一行的 script 我前面沒有一個 / 。

自己最大的敵人果然就是自己。

while ...

跟 do ... while ... 的差別在於先設立條件才開始執行。有確定第一個必須要先做的事情才會使用 do ... while ... 迴圈。

var i = 1
while(i <= 100) {
  console.log(i)
  i++
}

for 迴圈

var i = 1 //初始值
while(i <= 100) { //終止條件
  console.log(i) 
  i++ //i 每圈要做的事情
}

套用到 for 迴圈上，如下：

for (var i = 1; i <= 100; i++) {
  console.log(i)
}

與陣列合作

var scores = [1, 2, 3, 4]
for (var i = 0; i <= 4; i++) {
  console.log(scores[i])
}

使用 < 的好處：可直接使用陣列長度，不必親手算陣列長度。

var scores = [1, 2, 3, 4]
for (var i = 0; i < scores.length ; i++) {
  console.log(scores[i])
}

for 通常使用在你已經知道會有多少圈的情況下。

[Lichen5221]

函式

function test( ) { //test為函數名稱

}

小括弧內放參數，大括弧內放想呈現的東西。

回傳：

function test( ) { 
  return
}

函式名稱可以隨便命名。

return 後面一定要有東西，否則會回傳 undefined ，因此在使用物件或是換行時需注意。