JavaScript 逻辑或(||) 和 逻辑与(&&)

259 阅读3分钟

JavaScript 逻辑或(||) 和 逻辑与(&&)

总结

  • ||(逻辑或):当两个操作数都为false时返回false,否则返回true。如果第一个操作数为true,则不会执行第二个操作数。
  • &&(逻辑与):当两个操作数都为true时返回true,否则返回false。如果第一个操作数为false,则不会执行第二个操作数。

简单运用

逻辑且(&&):左右必须都满足 true 才返回 true;逻辑或(||):左右其中一个满足 true 就返回 true。 这样简单的运用是整体返回一个布尔值,适合在语句判断的时候用:

let user = localStorage.getItem("user);
if(user && user.age > 10){
    //...
}

上述代码的含义是,当user的age存在时(即true),且user的age字段大于10,if语句得到的布尔值才是true,条件表达式执行。

进阶运用

除了在条件语句中判断布尔值为true或者false,还可以用来简化代码。运算符操作的对象称之为操作数(Operand)。

逻辑且&&

左边操作数结果右边操作数结果执行的操作数整体结果
truetruetrue
falsetruefalse
truefalsefalse
falsefalsefalse

根据上表格得出一个结论:

  • 如果左操作数的结果是一个 true,就执行右操作数。
  • 如果左操作数的结果是一个 false,就执行左操作数。

假设传入了回调函数就执行,否则跳过不执行。一般想到的是用 if 条件语句,或者三元运算符简化 if 条件语句。然而,利用逻辑且(&&)的特性可以进一步简化代码:

this.skipLoading && this.skipLoading.close();

用于在执行this.skipLoading.close()方法之前先检查this.skipLoading是否存在。如果this.skipLoading存在且不为假值(比如nullundefined0false 等),则会调用this.skipLoading.close()方法;如果this.skipLoading为假值,则不会执行this.skipLoading.close()方法。 以上代码说明,当使用 && 连接两个表达式时,它会首先计算第一个表达式的值,如果第一个表达式的值为真(truthy),则继续计算第二个表达式的值,并返回第二个表达式的值;如果第一个表达式的值为假(falsy),则直接返回第一个表达式的值,不再计算第二个表达式。
这种用法通常被称为“短路求值”,它可以帮助避免在可能为nullundefined的情况下调用对象的方法而导致出错。

逻辑或||

左边操作数结果右边操作数结果执行的操作数整体结果
truetruetrue
falsetruetrue
truefalsetrue
falsefalsefalse
根据上表得出结论:
  • 如果左操作数的结果是一个 true,就执行左操作数。
  • 如果左操作数的结果是一个 false,就执行右操作数。 简而言之,逻辑或(||)一旦遇到操作数的结果是 true,就执行这个操作数,而另一个操作数直接忽略不执行,即“短路”。 逻辑或可以用来提供默认值,在在传递的值为null或undefined或其他之类的假值,就取供默认值,如:
userInfo.customerName || "--"

当userInfo.customerName不为空时显示userInfo.customerName,为空时则显示'--'。

其他

在JavaScript中,?是可选链(Optional Chaining)操作符。这个操作符允许你在尝试访问一个对象的属性时可安全地读取嵌套的子属性,而无需显示地检查父属性是否存在。
假设有一个对象a,要访问a.b.c,但不确定a.b.c是否存在,通常需要写代码来判断a.b是否为nullundefined。如果使用可选链,则可以简写为a.b?.c,即使a.b不存在,表达式a.b?.c的结果是undefined,不会报错。\