JS中邏輯運算符 && 的理解

caiyongji 發布于2019-08-26 10:11 / 1835人閱讀

摘要：然而，和運算符會返回一個指定操作數的值，因此，這些運算符也用于非布爾值。例如返回值為返回值為返回值為除此之外的值，都會讓判斷繼續執行，直到最后一個值。

JS中邏輯運算符 && 的理解 從一個場景開始

我們試想這樣一個場景，有這樣一個對象，其數據結構為：

const obj = {
    a: {
        b: {
            c: "i am c"        
        }
    }
}

要求是，寫一個函數 printLast(value)，將上述的對象的 obj.a.b.c 的值返回出來，否則，就返回 "nothing"。
對于一個初學者，代碼可能是這樣的：

function printLast (obj) {
    if (obj != null) {
        if (obj.a != null) {
            if (obj.a.b != null) {
                if (obj.a.b.c != null) {
                    return obj.a.b.c
                }
            }
        }
    } else {
        return "nothing"
    }
}

還有一種不太嚴謹的寫法：

function printLast (obj) {
    try {
        if (obj.a.b.c != null) {
            return obj.a.b.c
        } else {
            return "nothing"
        }
    } catch (error) {
        return "nothing"
    }     
}

對于稍有經驗的開發者，代碼可能是這樣的：

function printLast (obj) {
    if (obj != null && obj.a != null && obj.a.b !=null && obj.a.b.c != null) {
        return obj.a.b.c
    } else {
        return "nothing"
    }
}

或者

function printLast (obj) {
    if (obj && obj.a && obj.a.b && obj.a.b.c) {
        return obj.a.b.c
    } else {
        return "nothing"
    }
}

最后一種寫法才是比較成熟的，但是其作者不一定知道 && 的執行邏輯。

步入正題

首先，我們回顧以下 && 的執行邏輯。

&& 的執行邏輯

官方的描述：

邏輯運算符通常用于布爾型（邏輯）值。這種情況下，它們返回一個布爾值。然而，&& 和 || 運算符會返回一個指定操作數的值，因此，這些運算符也用于非布爾值。這時，它們也就會返回一個非布爾型值。

大概的意思就是：&& 不僅可以用于布爾型的值，還可以用于非布爾值，并且返回的結果可以是任何類型的值，例如：

let bool = true && (3 === 4)  // 返回值為 true
let bool = true && "haha" // 返回值為"haha"
let bool = true && (() => { return "haha" }) // 返回值為一個匿名函數: () => { return "haha" }

這樣的話，問題來了，什么樣的值才能讓 && 短路呢？

官方的描述，以下這些值能讓 && 判斷短路：

null；

NaN；

0；

空字符串（"" or "" or ``）；

undefined。

例如：

let bool = "haha" && 1 && null && true // 返回值為 null
let bool = "haha" && 1 && 0 && true // 返回值為 0
let bool = "haha" && 1 && "" && true // 返回值為 ""

除此之外的值，都會讓 && 判斷繼續執行，直到最后一個值。

簡單使用

根據上述，我們如何解決一開始的問題呢？答案是：很簡單，請看：

function printLast (obj) {
    let res = obj && obj.a && obj.a.b && obj.a.b.c // 如果obj.a.b.c存在返回其值，否則，返回undefined
    return !!res ? res : "nothing"http:// !! 和 if 一樣，能將各種類型的值轉化為布爾量
}

或者

function printLast (obj) {
    return (obj && obj.a && obj.a.b && obj.a.b.c) || "nothing" // 如果obj.a.b.c存在返回其值，否則，返回"nothing"
}

因為 && 的執行是短路的，所以當遇到undefined時，就會停止判斷。
在這里，沒有討論js的邏輯運算符 || ，原因是只要理解了 && 的執行邏輯， || 的也就理解了，不是嗎？

云服務器 GPU云服務器 asp &amp&amp邏輯 js中 &ampamp js中&amplt php 運算符&amp

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105744.html

深入理解JS中邏輯或（||）和邏輯與（&amp;&amp;）

摘要：如果第一項的值為時，則執行后面一項的運算，返回的是第二項執行運算后的值再來看多一個例子，自己多動手嘗試看看就明白了。先來看一個關于邏輯或的例子： var b = 0 var a = b++ || b++ console.log(b) // 2 var c = ++b || ++b console.log(a) // 1 console.log(c) //...

sanyang 2019-08-23 14:24 評論0 收藏0
ES2018 學習筆記（2）&amp;&amp; 和 || 的運算優先級

摘要：為什么比優先級高起因偶然在網上搜索運算符優先級，幾乎每個版本都告訴讀者比優先級更高，包括這樣的權威網站也不例外。這與自己經驗不符它們應該是優先級一樣的。為什么 && 比 || 優先級高？起因偶然在網上搜索 js 運算符優先級，幾乎每個版本都告訴讀者 && 比 || 優先級更高，包括 MSN 這樣的權威網站也不例外。 MDN Operator_Precedence 這與自己經驗不符...

james 2019-08-23 10:47 評論0 收藏0
JS中的邏輯運算符&amp;&amp;、||，位運算符|，&amp;

摘要：中的符號運算方法只要前面為不管后面是還是，都返回后面的值。舉個栗子位運算符運算方法兩個位只要有一個為，那么結果都為。否則就為繼續舉栗子運算符還能進行取整運算位運算符運算方法兩個數值的個位分別相與，同時為才得，只要一個為就為。 1、JS中的||符號：運算方法：只要||前面為false,不管||后面是true還是false，都返回||后面的值。只要||前面為true,不管||后...

DDreach 2019-08-23 16:28 評論0 收藏0
js中的｜與 &amp;&amp; 運算符詳解

摘要：這個時候我就有點犯迷糊了，為什么邏輯運算符能這么用呢由于是出身，所以對這樣用感覺很奇怪。這篇文章主要介紹了js中的 || 與 && 運算符詳解,需要的朋友可以參考下一 js中邏輯運算符在開發中可以算是比較常見的運算符了，主要有三種：邏輯與&&、邏輯或||和邏輯非！。當&&和|| 連接語句時，兩邊的語句會轉化為布爾類型（Boolean），然后再進行運算，具體的運算規則如下：兩邊條...

baoxl 2019-08-23 13:02 評論0 收藏0
js中的｜與 &amp;&amp; 運算符詳解

摘要：這個時候我就有點犯迷糊了，為什么邏輯運算符能這么用呢由于是出身，所以對這樣用感覺很奇怪。這篇文章主要介紹了js中的 || 與 && 運算符詳解,需要的朋友可以參考下一 js中邏輯運算符在開發中可以算是比較常見的運算符了，主要有三種：邏輯與&&、邏輯或||和邏輯非！。當&&和|| 連接語句時，兩邊的語句會轉化為布爾類型（Boolean），然后再進行運算，具體的運算規則如下：兩邊條...

jsyzchen 2019-06-28 16:46 評論0 收藏0