iT邦幫忙

0

為了轉生而點技能-JavaScript,day5(Falsy、Truthy、&&、||、!

  • 分享至 

  • xImage
  •  

前言:

本篇為介紹邏輯運算子,並搭配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

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言