JS中逻辑运算符 && 的理解

caiyongji 发布于2019-08-26 10:11 / 1801人阅读

摘要：然而，和运算符会返回一个指定操作数的值，因此，这些运算符也用于非布尔值。例如返回值为返回值为返回值为除此之外的值，都会让判断继续执行，直到最后一个值。

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"// !! 和 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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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