[ JavaScript 03 ] 判斷式

if/else

if (true) {
   console.log(123)
}

< 123

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

< pass

but

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

< 條件是 false ，所以沒有印出來
// 看起來 if 裡面條件對，但為何最後是 false

因為三個條件跟我們想的可能不太一樣，執行時是由左到右

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

// 70 >= score 是 true 所以變成下面這樣
var score = 65
if (true >= 60) {
   console.log('pass')
}

// 但是 true >= 60 這個條件是 false ，所以當然不會執行 console.log('pass')

如果要用兩組以上條件怎麼辦，請愛用 && 或 else if

var score = 65
if ( score >= 60 && score <= 70 ) {
   console.log('pass')
}


var score = 90
if ( score >= 80 ) {
   console.log('good')
}else if ( score >= 60 ){
console.log('pass')
}

新手常犯錯誤，想要判斷 score 是否為 65 ，是的話印出

var score = 65
if ( score = 65) {
   console.log('pass')
}

<pass
// 但其實條件不管寫 score = 70 ， score = 90 
// 結果都會執行到 if 裡面的程式

因為程式會這樣執行

// if ( score = 65 )
// 裡面執行 score = 65 => score 
var score = 65
if ( score ) {
   console.log('pass')
}

// 因為 score 不是 0 不是 null 不是 false 
// 因此會執行到 if 裡面的程式

因此想要判斷 score 是否為 65 ，不要忘記是要用 == ===
== === 差別在那，複習JavaScript變數

var score = 65
if ( score == 65 ) {
   console.log('pass')
}

< pass

!(not)使用

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


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

/* 
number % 5 是 1 
!(1) 代表 1 是 true，那不是 true ，結果是 false 
因此不執行 if 裡面的程式，執行下一行 else 裡面的程式

如果 number 是 10， 10 % 5 是 0 
!(0) 代表 0 是 false，那不是 false ，結果是 true 
因此執行 if 裡面的程式
雖然使用 ! 可以減少程式碼，但可讀性較差，所以判斷還是用 number % 5 === 0 比較好讀
*/

判斷簡化

var score = 65
var isPass = false

// 直覺我可能這樣寫
if ( score >= 60 ) {
   isPass = true
}else{
   isPass = false
}

簡化

var score = 65
var isPass = score >= 60
// 也可以括弧起來，但沒差。 var isPass = (score >= 60)
console.log(isPass)

< true

如果是以下程式，發現無法簡化@@"

var score = 65
var message = ' '

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

所以就要呼叫三元運算子(Ternary)來簡化了
三元運算子(Ternary)的語法

condition ? A : B
/* 
接 ? 是固定用法
如果是 true  會接 A 這個值
如果是 false 會接 B 這個值
*/

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

< pass

可以巢狀判斷

var score = 65
var message = score >= 60 ? (score === 100 ? '滿分' : 'pass') : 'fall'
console.log(message)

< pass

/* 
先判斷是否 score >= 60
true，進入到判斷 (score === 100 ? '滿分' : 'pass') 。 false，輸出'fall'
true，輸出滿分 。false，輸出'pass'
*/

不過三元運算子的巢狀判斷可讀性又降低，所以當條件太多時，還是回到 if/else 會比較好讀

太多太多的選擇：switch case

當有太多條件時，一直用 else if 太冗長，因此可以選擇用 switch case ， 會更簡單明瞭
記得要加 break 不然會一直執行下去
所有的條件都不符合，可以加 default，有點像是 if 判斷式的 else
default 不一定需要
switch 架構

switch (變數名稱或運算式) { 
    case 符合數字或字元: 
        陳述句一; 
        break; 
    case 符合數字或字元: 
        陳述句二; 
        break; 
    default: 
        陳述三; 
}

var month = 1

switch(month){
  case 1 :
     console.log('一月')
     break
  case 2 :
     console.log('二月')
     break
  case 3 :
     console.log('三月')
     break
  default :   
     console.log('hey')
}

字元用 'b' 或 "b" 包起來都可以

var month = 'b'

switch(month){
  case 'a' :
     console.log('一月')
     break
  case 'b' :
     console.log('二月')
     break
  case 'c' :
     console.log('三月')
     break
  default :   
     console.log('hey')
}

case 可以合在一起

var month = 1

switch(month){
  case 2 :
  case 3 :
  case 4 :
  case 5 :
     console.log('春')
     break
  case 6 :
  case 7 :
  case 8 :
  case 9 :
     console.log('夏')
     break
  default :   
     console.log('秋冬')
}

但其實......用陣列就可以取代 switch case ㄏㄏ

var month = 1

var month_to = ['一月','二月','三月']
console.log(month_to[month])

< 二月