JS中使用邏輯符 && 來簡化爲空判斷

js中使用邏輯判斷符（&&）簡化爲空判斷

在js代碼中，你會如何進行爲空判斷？

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

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

要求是，寫一個函數printLast(value)，將上述的對象的obj.a.b.c的值返回出來，如果obj.a.b.c不存在的話，就返回'nothing'，前提是：printLast(value)的參數可能有各種情況，比如：null, undefined, {}, {a: {}}, ......

對於一個初學者，代碼可能是這樣的：

    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'
                    }
                } else {
                    return 'nothing'
                }
            } else {
                return 'nothing'
            }
        } 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'
        }     
    }

這種寫法可以達到目的，但是不好。

步入正題，使用 && 簡化爲空判斷

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

&& 的執行邏輯

官方的描述：

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

大概的意思就是： && 不僅可以用於布爾型的值，還可以用於表達式，例如：

    let bool = true && (3 === 4)  // 返回 false

其中，3 === 4 是一個表達式，你也可以這樣寫：

    function f (a, b) {
        return a === b
    }
    
    let bool = true && f(3, 4)

我們這樣猜想：&& 將 f 函數的值作爲返回值，驗證一下，如果 f 返回值只是布爾量呢？

    function f (a, b) {
        return a + b
    }
    
    let bool = true && f(3, 4) // 返回值爲7

&& 的爲空判斷

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

    function printLast (obj) {
        let res = obj && obj.a && obj.a.b && obj.a.b.c // 如果obj.a.b.c存在返回其值，否則，返回undefined
        if (!res) return 'nothing'
        return res
    }

因爲 && 的執行是短路的， 所以當遇到undefined時，就會停止判斷。