JS010. 三元運算符擴展運用（多層判斷語句 / 多條表達式）

MDN - 三元運算符

語法

Condition ? exprIfTrue : exprIfFalse

用例：

function getFee(isMember) {
    return(isMember ? '$2.00' : '$10.00')
}

getFee(true)    // expected output: "$2.00"
getFee(false)   // expected output: "$10.00"
getFee(null)    // expected output: "$10.00"

多層判斷語句：

// 顏色越深條件層級越深
typeof arg == 'number' ? (arg > 0 ? (arg > 100 ? i = 'Num huge!' : 'Num small!') : i = 'Num is minus.') : (typeof arg == 'string' ? i = 'Arg is a Str.' : i = 'Arg unknow.')

等價於

if (typeof arg == 'number') { if (arg > 0) { if (arg > 100) { i = 'Num huge!' } else { i = 'Num small!' } } else { i = 'Num is minus.' } } else { if (typeof arg == 'string') { i = 'Arg is a Str.' } else { i = 'Arg unknow.' } }

一行解決，就是可讀性較差

多條執行語句

方法1：括號同上；方法2：匿名函數 + ES6箭頭函數

// 方法1 括號同上
isShow? (isShow = false, btn = 'show') : (isShow = true, btn = 'hide')

// 方法2 匿名函數 + ES6箭頭函數
isShow ? (() = > {
    isShow = false;
    btn = 'show';
})() 
: (() => {
    isShow = true;
    btn = 'hide';
})();

括號不可省略。

- END -