第十五節：各種邏輯運算符總結(&&、||、?、??、&&=、||=、??=)

一. 各種運算符

1 . && 邏輯與

　含義：形如 x && y， x為ture的時候，返回y 或者 執行y (y可能是表達式，也可能是函數)，否則返回 x 。

　PS：除了 0、空字符串" "、NaN、false、null、undefined以外，都為 ture 。

{
    console.log("----------------1.&& 邏輯與-------------------");
    // 之前的寫法
    let msg1 = "ypf";
    let msg2 = 0;
    let msg3 = "";
    msg1 = msg1 && "default value";
    msg2 = msg2 && "default value";
    msg3 = msg3 && "default value";
    console.log(msg1); //ypf
    console.log(msg2); //0
    console.log(msg3); //空字符串""
}

 

2. || 邏輯或

　含義：形如 x || y, 左側x為false時返回y 或者 執行y (y可能是表達式，也可能是函數)，否則返回x。

　注意：如果使用 || 來為某些變量設置默認值，可能會遇到意料之外的行為。 比如 ' '、0、NaN、false，都認為是flase，不符合實際情況，是有bug的。（null 和 undefined認為是false是正常的）

{
    console.log("---------------- 2. || 邏輯或-------------------");
    // 先看一下||的弊端吧, 下面4種情況，都想原樣輸出，而不是輸出默認值
    console.log("" || "default value"); //default value
    console.log(0 || "default value"); //default value
    console.log(NaN || "default value"); //default value
    console.log(false || "default value"); //default value

    let msg1 = "ypf";
    let msg2 = 0;
    let msg3 = "";
    msg1 = msg1 || "default value";
    msg2 = msg2 || "default value";
    msg3 = msg3 || "default value";
    console.log(msg1); //ypf
    console.log(msg2); //default value  【0的bug】
    console.log(msg3); //default value  【空“”的bug】
}

 

3. 可選鏈 ? 【ES11-ES2020】

(1). 背景：

        多層級的對象時，調用內層的屬性或方法，需要加前置校驗，判斷是否存在，否則會導致程序報錯，中斷，無法執行下面的業務。

(2). 可選鏈的符號：?

(3). 可選鏈的用法：可選鏈中的 ? 表示【如果問號左邊表達式有值, 就會繼續查詢問號后面的字段， 如果沒有值，不會報錯，返回undefined】

      A. 對象中使用：調用屬性和方法

      PS：對於方法而言，注意一下下面的兩種寫法的含義的區別

       console.log(userInfo?.myChild2?.getMsg()); //undefined  (表示當userInfo存在且myChild2存在的時候調用getMsg())

       console.log(userInfo?.myChild2?.getMsg?.()); //undefined (和上邊有區別，這里表示當userInfo存在且myChild2存在且getMsg存在的時候才調用)

      B. 數組中使用

      C. 與空值運算符一起使用

注意：可選鏈不能用於賦值！！！！！！！

{
    console.log(
        "---------------- 3. 可選鏈 ? 【ES11-ES2020】-------------------"
    );
    const userInfo = {
        name: "ypf",
        age: 18,
        getMsg() {
            return "hello world";
        },
        myChild: {
            cName: "lmr",
            cAge: 10,
            getMsg() {
                return "hello ypf";
            },
        },
    };

    // 一. 之前寫法
    //1. 想獲取myChild中的cAge屬性和getMsg方法，需要這么寫
    const cAge = userInfo && userInfo.myChild && userInfo.myChild.cAge;
    const cMsg = userInfo && userInfo.myChild && userInfo.myChild.getMsg();
    console.log(cAge);
    console.log(cMsg);

    //2. 想獲取myChild2中的cHeight屬性 和 getMsg()方法【實際上並沒有myChild2】
    //下面這種寫法直接報錯，並且會導致后續的代碼不能運行
    // TypeError: Cannot read properties of undefined (reading 'cHeight')
    /*     {
        const cHeight = userInfo.myChild2.cHeight;
        console.log(cHeight);
    } */

    // 所以我們就得這樣寫：獲取的是cHeight，我們就需要判斷到它的上一級是否存在，即myChild2
    // 結果：由於myChild2不存在, 所以無法進if內部，所以不影響后續代碼
    if (userInfo && userInfo.myChild2) {
        console.log(userInfo.myChild2.cHeight);
    }
    if (userInfo && userInfo.myChild2) {
        userInfo.myChild2.getMsg();
    }
    // 當然我們也可以這樣寫
    // 結果：輸出都是undefined，但不影響后續運行
    console.log(userInfo && userInfo.myChild2 && userInfo.myChild2.cHeight);
    console.log(userInfo && userInfo.myChild2 && userInfo.myChild2.getMsg());

    // 二. ES11中的寫法
    console.log("------------------ES11中的寫法-----------------------------");
    //1. 想獲取myChild中的cAge屬性和getMsg方法，需要這么寫  【對象中存在】
    console.log(userInfo?.myChild?.cAge); //10
    console.log(userInfo?.myChild?.getMsg()); //hello ypf

    //2. 想獲取myChild2中的cHeight屬性 和 getMsg()方法【實際上並沒有myChild2】
    console.log(userInfo?.myChild2?.cHeight); //undefined (表示當userInfo存在且myChild2存在的時候調用cHeight)
    console.log(userInfo?.myChild2?.getMsg()); //undefined  (表示當userInfo存在且myChild2存在的時候調用getMsg())
    console.log(userInfo?.myChild2?.getMsg?.()); //undefined (和上邊有區別，這里表示當userInfo存在且myChild2存在且getMsg存在的時候才調用)

    // 3. 數組中使用
    // 數組中使用(不常見，因為直接arr[42]也是undefined)
    let arr = [1, 2, 3];
    console.log(arr[42]); // undefined
    console.log(arr?.[42]); // undefined

    // 4. 與空值運算符??一起使用
    let customer = {
        name: "ypf",
    };
    console.log(customer?.city ?? "青島"); // "青島"

    // 5. 可選鏈不能用於賦值
    // {
    //      let obj1 = {};
    //  obj1?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
    // }

    console.log("--------------執行完畢----------------");
}

 

4. 空值合並運算符?? 【ES11-ES2020】

(1) 背景：

        解決了之前邏輯或操作符（||）的幾個弊端：

        ||的含義：左側操作數為假值時返回右側操作數。也就是說，如果使用 || 來為某些變量設置默認值，可能會遇到意料之外的行為。

        比如為假值（例如'',0,NaN,false）時

(2). 符號： ??

(3). 用法：當左側的操作數為 null或者undefined時，返回其右側操作數，否則返回左側操作數。

{
    console.log("----------------4. 空值運算符【符號：？】-----------------");
    // 先看一下||的弊端吧, 下面4種情況，都想原樣輸出，而不是輸出默認值
    console.log("" || "default value"); //default value
    console.log(0 || "default value"); //default value
    console.log(NaN || "default value"); //default value
    console.log(false || "default value"); //default value

    // 同樣上面的情況，再來看一下空值運算符?? 都是原樣輸出了，達到目的了
    console.log("" ?? "default value"); //空字符串""
    console.log(0 ?? "default value"); //0
    console.log(NaN ?? "default value"); //NaN
    console.log(false ?? "default value"); //false

    // 針對null 和 undefined， || 的結果，走的都是默認值，達到目的了
    console.log(null || "default value"); //default value
    console.log(undefined || "default value"); //default value

    // 針對null 和 undefined， ?? 的結果，走的都是默認值，達到目的了
    console.log(null ?? "default value"); //default value
    console.log(undefined ?? "default value"); //default value

    // 除了null和undefined外,??的結果都是本身
    console.log(1 ?? "default value"); //1
    console.log("msg" ?? "default value"); //"msg"
    console.log(["ypf1", "ypf2"] ?? "default value"); //["ypf1", "ypf2"]
}

 

5. ||=  邏輯或賦值運算 【ES12-ES2021】

     含義: 形如 x ||= y 運算僅在 x 為false時，返回右側的值y，否則仍然返回值x， 實際上可以認為它是 x||(x=y) 的縮寫，所以 ||= 也存在一下意外的bug，比如：0、“”、NaN、false，都認為是false，都會執行 ||= 右側的代碼

     PS：針對null 和 undefined，執行右側代碼這是我們所需要的，是正確的。

{
    console.log("----------------5. ||=  邏輯或賦值運算-------------------");
    let msg1 = "ypf";
    let msg2 = 0;
    let msg3 = "";
    msg1 = msg1 || "default value";
    msg2 = msg2 || "default value";
    msg3 = msg3 || "default value";
    console.log(msg1); //ypf
    console.log(msg2); //default value  【0的bug】
    console.log(msg3); //default value  【空“”的bug】

    // 上述寫法等價於
    let msg11 = "ypf";
    let msg22 = 0;
    let msg33 = "";
    msg11 ||= "default value";
    msg22 ||= "default value";
    msg33 ||= "default value";
    console.log(msg11); //ypf
    console.log(msg22); //default value  【0的bug】
    console.log(msg33); //default value  【空“”的bug】
}

6. &&=  邏輯與賦值運算  【ES12-ES2021】

    含義：形如 x &&= y 運算僅在 x 為ture時，返回右側的值y，否則仍然返回值x， 實際上可以認為它是 x && (x=y) 的縮寫

    PS：除了 0、“”、NaN、false、null、undefined以外，都為ture

{
    console.log("----------------6. &&=  邏輯與賦值運算-------------------");
    // 之前的寫法
    let msg1 = "ypf";
    let msg2 = 0;
    let msg3 = "";
    msg1 = msg1 && "default value";
    msg2 = msg2 && "default value";
    msg3 = msg3 && "default value";
    console.log(msg1); //ypf
    console.log(msg2); //0
    console.log(msg3); //空字符串""

    // 上述寫法等價於
    let msg11 = "ypf";
    let msg22 = 0;
    let msg33 = "";
    msg11 &&= "default value";
    msg22 &&= "default value";
    msg33 &&= "default value";
    console.log(msg11); //ypf
    console.log(msg22); //0
    console.log(msg33); //空字符串""
}

 

 7. ??=  邏輯空賦值運算符  【ES12-ES2021】

     含義：形如 x ??= y 運算僅在 x 為null或undefined時，返回右側的值y，否則仍然返回值x， 實際上可以認為它是 x ?? (x=y) 的縮寫

{
    console.log("----------------7. ??=  邏輯空賦值運算-------------------");
    // 之前的寫法
    let msg1 = "ypf";
    let msg2 = 0;
    let msg3 = "";
    let msg4 = null;
    let msg5 = undefined;
    msg1 = msg1 ?? "default value";
    msg2 = msg2 ?? "default value";
    msg3 = msg3 ?? "default value";
    msg4 = msg4 ?? "default value";
    msg5 = msg5 ?? "default value";
    console.log(msg1); //ypf
    console.log(msg2); //0
    console.log(msg3); //空字符串""
    console.log(msg4); //"default value";
    console.log(msg5); //"default value";

    // 上述寫法等價於
    let msg11 = "ypf";
    let msg22 = 0;
    let msg33 = "";
    let msg44 = null;
    let msg55 = undefined;
    msg11 ??= "default value";
    msg22 ??= "default value";
    msg33 ??= "default value";
    msg44 ??= "default value";
    msg55 ??= "default value";
    console.log(msg11); //ypf
    console.log(msg22); //0
    console.log(msg33); //空字符串""
    console.log(msg44); //"default value";
    console.log(msg55); //"default value";
}

 

 

 

 

 

!

• 作       者 : Yaopengfei(姚鵬飛)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 聲     明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
• 聲     明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。