JavaScript 三元運算符(ternary conditional operator)與比較運算符(Comparison operator)

相等比較運算 == 與 === 的不同

兩個等號通常是拿來比較兩邊的==值==是否不同
三個等號除了判斷==值==是否相同，也會判斷==型別==是否相同。

兩個等於會引發諸多問題的原因是 JS 常會暗地裡幫我們將資料轉型別，所以常常莫名的就通過判斷。以至於很容易就會出現誤判型別而導致出現錯誤。在使用判斷比較時盡量或只使用三個等於會比較精確與安全。

// 以下的結果都是true
console.log(0 == '0');
console.log('0' == 0);
console.log(0 == '');
console.log('0' == 0);
console.log(0 == false);
console.log(false == 0);
console.log(1 == true);
console.log(true == 1);
console.log([] == 0);

產生 1 == true 的原因是在 Boolean 時，1 即表示 true，也就是 Boolean(1)理所當然 JS 就會把它視為相同。相反地 Boolean(0) 等於 false.

如果將 false 轉成數字型 Number(false) // 0 ，也可得到 0。

空字串也是如此，當我們把空字串轉成數字時 Number([]) // 0 也會得到 0。

將所有上述比較全換成三個等號，結果全都成了 false：

// 以下的結果都是 false
console.log(0 === '0');
console.log('0' === 0);
console.log(0 === '');
console.log('0' === 0);
console.log(0 === false);
console.log(false === 0);
console.log(1 === true);
console.log(true === 1);
console.log([] === 0);

由此可見，用三個等號來判斷兩變得值，還是比較準確與保險。看圖表來表示更清楚！三個等號比兩個等號規律多了，除非可以全背下兩個等號的變化，不然還是用三個等號來判斷比較保險。

唯一特例 NaN 不是 NaN

在 JavaScript 裡如果左右兩邊都是一樣且用三個等號來比較，結果通常是 True 但是 Nan 和自己相比，無論使用兩個或三個等號都是 false。

console.log(NaN === NaN); // false
console.log(NaN !== NaN); // true

var lettre = 'abc';
lettre / 10; // NaN

NaN -> 不是數字。何時會用到 NaN ?
如果把數字和不是數字做運算，便會返回 NaN 。

如果想知道一個變數是不是 NaN 可使用 isNaN() 來判斷是不是 NaN。

isNaN(NaN); // true

但是isNaN()也會悄悄幫你改型別。 明明 a 就不是數字…。

var a = 'a';
isNaN(a); // true
Number(a); // true

如果用 typeof 來看 NaN 會得到 number，也就是說，當我們用 isNaN() ，其實這個函式會先將()裡面用 Number()轉換。

isNaN(Number(NaN)); // true

圖表出處：一目了然的比較表

JS 三元運算子

「三元運算子」 又稱為「條件運算子」，也就是拿來處理條件判斷用的。
條件成立(true)-> 回傳第一個, 條件不成立(false)->回傳第二個

// 如果 true 這個條件成立，就返回 100，否則就回傳 50
var result = 100 < 1000 ? 100 : 50;
// 100 小於 1000 嗎？ 是 (true) -> 回傳 100

如何將一般的 if else 轉成三元運算子

var age = 16;
var title;
if (age >= 18) {
  if (age >= 45) {
    title = 'Middle-aged';
  } else {
    title = 'Adult';
  }
} else {
  title = 'Minor';
}
console.log(title);

三元運算子較簡短，但可讀性不高，應避免使用可讀性不高的寫法。

title = age >= 18 ? (age >= 45 ? 'Middle-aged' : 'Adult') : 'Minor';

console.log(title);