[04] JavaScript 入門 - 強制轉型、Truthy & Falsy、條件式


keywords: coercion,truthy,falsy,if-else,switch,ternary operator

強制轉型 ( Coercion )

強制轉型會在某些情況下產生一些令人意外的結果,事實上,大多數的情況都是合理且可理解的,只是我們不懂它的原則,如果能充分理解 Coercion 甚至可增進程式碼的可讀性。

Coercion 強制轉型有分兩種

  • 明確的 ( explicit ):能很明顯的看出從某個型別轉換到另一個型別,就是明確的強制轉型。
    ex:let b = Number('42')
  • 隱含的 ( implicit ):型別的轉換是伴隨某些其他作業所發生的不明顯的副作用 ( side effect ),那就是隱含的強制轉型。
    ex:

      1+1+'42'+1  // 2421 string
    
      '42'*1  // 42 number
    

Truthy & Falsy

🚩很重要的一點是:非 boolean 值只有實際被強制轉型為一個 boolean 時才會遵循這種規則。
我的建議是把四項七個 falsy 記起來,上次後端同事問我的時候竟然就用上了😏

  • JavaScript 中的「falsy」值如下:
    1. ''
    2. 0、-0、NaN ( 無效的數字 )
    3. null、undefined
    4. false
  • 不在上方的清單的值都是「truthy」,其中比較特別的有:
    1. []
    2. {}
    3. function foo () {}
    4. '0' 注意是文字的 0
    5. ' ' 注意是有包含空白的引號

條件式

最常見的就是 if-else 、 switch 及 三元運算子 ( ternary operator )

if-else

if(a==5){
    // do something
}
else if(a==15){
    // do something else
}
else if(a==45){
    // do something cool else
}
else{
    // if something not above 
}

switch

switch(a) {
    case 5:
        // do something
        break;
    case 15:
        // do something else
        break;
    case 45:
         // do something cool else
         break;
    default:
        // if something not above 
        break;
}

如果 a 是 5 or 15 都要執行同一個事情,就像 if(a==5 || a==15) 可以像下方這樣寫,這種行為叫做 「 fall through 落穿而過 」

switch(a) {
    case 5:
    case 15:
        // do something
        break;
    case 45:
         // do something cool else
         break;
    default:
        // if something not above 
        break;
}

三元運算子

它就像更簡潔的單一 if-else 述句

let a = 60;
let b = ( a >100 )? 'over 100' : 'less 100'

similar to:

if(a>100){
    b='over 100'
}
else{
    b='less 100'
}
#coercion #truthy #falsy #if-else #switch #ternary operator
「你所不知道的 JS 」系列書籍閱讀心得,未閱讀前對於 JavaScript 皆是懵懵懂懂,因面試時發現自己很多觀念都不正確不清楚,所以這次一探 JavaScript 的運作方式。 * 系列一開始會先把大方向簡短的整理,之後會以每個項目做詳細的筆記






Related Posts

使用 TensorFlow 來做簡單的手寫數字辨識

使用 TensorFlow 來做簡單的手寫數字辨識

[ 前端工具 ] - jQuery

[ 前端工具 ] - jQuery

【Day01】用tkinter製作圖形視窗介面(GUI)

【Day01】用tkinter製作圖形視窗介面(GUI)



Comments