为了转生而点技能-JavaScript，day5(Falsy、Truthy、&&、||、!

前言：

本篇为介绍逻辑运算子，并搭配if做解释。
逻辑运算子的短路特性：
若单看运算子左运算元，就可以推断出整个结果时，此时会略过右运算元

if结构：当符合条件後为true，开始执行码；不符合条件为false，不动作。

if (条件){
   执行码;
}

1. 当符合条件後为true，开始执行码；不符合条件为false，不动作。
2. 条件 == true，开始执行码。
3. 但是判断式括号内的数值都不一定要是布林值，也可以是物件或字串。因为里面的值会被 JS 自动转型；条件为(a > 5)，代表a小於5不运作，若写成(0)，则会直接不运作。
4. JavaScript 里面，每个数值都有其对应的布林值。
5. Falsy：0、NaN、'' (空字串)、false、null、undefined
6. Truthy：除了Falsy以外都是。
7. 参考图：https://dorey.github.io/JavaScript-Equality-Table/

&&：

> 'left' && 'right';
'right' //回传值：左运算元非空字串，会当作结果成立，所以再判断右运算元，也非空字串，所以判断整个 && 成立，由於是停在第二个运算元，所以传回 'right'。

> 0 && 'right';
0     //回传值：会被当作不成立，此时不用判断右运算元，就可判断整个 && 运算不成立，所以直接传回 0。

> 'left' && 0;
0    //回传值：由於左运算元非空字串，会当作结果成立，所以再判断右运算元为 0，所以当作不成立，整个&&运算此时确认不成立，传回0。
>

例子：

var a = 1 ;
var b = 2 ;
var c = 0 ;
console.log(a && b && c); //0

试解：

1. 运算子&&的相依性，为由左至右。
2. a && b，b是最後造成成立的，所以回传2。
3. 2 && c，C是falsy值0，所以最後会回传0。

||：

if( 0 || 1 ){};

运作方式：

1. 0 || 1 只要有一为true，就会成立，并true值。
2. 先检验0 是否为true，为true则直接回传值，否则不用进行1之检验。
3. 依照Falsy值的种类，0是false值，尚需进行1之检验。
4. 依照Falsy值的种类，1不是false值，成立，回传true值。

• if( 0 || 1 )的前提下：回传的只有true或是false两种。
• 0 || 1的前提下：回传的就是当true的时候，造成成立的值，此例就会回传1。

var a = 0 ;
var b = 1 ;
console.log(0 || 1)//回传1，非true或是false。

例子1：

function doSome(arg) {
    var option = arg || 'default';
    return option;
}

console.log(doSome());              // default
console.log(doSome('caterpillar')); // caterpillar

解：

1. 回传值default：
   先找出arg || 'default'是否成立。
   先判断|| 的左侧arg || 'default'，因无参数填入函式，arg不成立。
   再判断|| 的右侧'default'，'default'为字串不属於falsy，成立并回传值default。

2. 回传值caterpillar：
   先找出arg || 'default'是否成立。
   先判断|| 的左侧arg || 'default'，因有参数填入函式，arg成立，传回值caterpillar。

• 补充：表达式arg || 'default'，通常'default'代表为该式在无参数时的预设值。

例子2：

var a = 1 ;
var b = 2 ;
var c = 0 ;
console.log(c || c && c || a); //1

解：

1. 表达式c || c && c || a中，依照运算子的优先性，先执行c && c。
2. c && c，皆为0且皆为falsy，但是还是会为传值0。
3. c || 0 || a，依照相依性，由左至右。
4. c || 0，皆为0且皆为falsy，但是还是会回传值0。
5. 0 || a，0为falsy，验证a，a为truthy，回传回传值1。

!

if( !0 ){};

运作方式：

1. 先检验0回传的值为true或是false.
2. 依照Falsy值的种类，0是false值，回传false。
3. !把回传的值false改成相反的true值。

陷阱：

let age =30;

if(age = 18){
    console.log("符合条件")  //会印出符合条件
};

因为(age = 18) 的结果是18,不属於falsy家族
且(age = 18)等同18

参考资料：

1. JavaScript 语言核心（5）操弄数值的运算子：https://openhome.cc/Gossip/CodeData/EssentialJavaScript/Operator.html