JavaScript 逻辑且(&&)和逻辑或(||)的妙用

简单运用

逻辑且(&&):左右必须都满足 true 才返回 true;逻辑或(||):左右其中一个满足 true 就返回 true。

10年积累的成都网站建设、网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先建设网站后付款的网站建设流程,更有馆陶免费网站建设让你可以放心的选择与我们合作。

逻辑且和逻辑或常用在 if、while、for 等语句中,进行逻辑运算:

let user = localStorage.getItem("user");

if (user && user.age > 10) {
  // ...
}

当 user 存在时,也就是 user 是真值,即true;且 user 的 age 字段大于 10。if得到的布尔值是 true 才执行作用域内的代码。

进阶运用

逻辑且

上面都是逻辑且和逻辑或的简单使用,其实它们大有用处,还能简化代码。运算符操作的对象称之为操作数(Operand)。

左边操作数结果 右边操作数结果 执行的操作数
true true
false true
true false
false false

左操作数是假值,就执行左操作数的表达式;左操作数是真值,就执行右操作数的表达式。左假左,左真右。

有趣的是,逻辑且给人一种经不起挫折的感觉。当一来就遇到 false,它就明白继续这样下去就是没有意义的了,直接就“摆烂”了。如果第一次尝到甜头了,它就继续往下走。

如下代码:

function fun(callback) {
  // ...
  callback && callback();
}

fun(() => console.log("execute callback function.")); // 控制台打印了字符串!
fun(); // 什么也没有发生!

如果给 fun 函数传递了回调函数就执行,否则就不执行回调函数。一般想到的是用 if 条件语句,或者三元运算符简化 if 条件语句。

逻辑或

左边操作数结果 右边操作数结果 执行的操作数
true true
false true
true false
false false

左操作数是假值,就执行右操作数的表达式;左操作数是真值,就执行左操作数的表达式。左假右,左真左。

逻辑或给人是一种“点到为止”和“坚持不懈”的感觉,如果第一次遇到的是 true,也就是一来就尝到甜头了,它就收手不继续下去了。如果第一次遇到的是 false,它不甘心,不管未来如何都要继续走下去。

逻辑且提供默认值

function fun(x) {
  x = !x && "default value";
}

fun(undefined); // "default value"
fun("inject a value"); // false

我的要求:如果没有给函数的参数传递值,就应该使用默认值。所以,对第一个操作数进行取反操作。当传入的 x 是假值,也就是没有给参数传递值,加上对 x 做了一次取反操作,此时的 x 就是真值,因此,执行第二个操作数,返回一个字符串“default value”。当传入的 x 是真值,也就不需要默认值了,因为对 x 做了一次取反操作,变成了假值,因此,执行第一个操作数,所以最后返回了一个布尔值 false。

逻辑或提供默认值

function fun(x) {
  x = x || "default value";
}

fun(undefined); // "default value"
fun("inject a value"); // inject a value

当 x 传入的是一个真值时,也就也是提供了参数,就不执行第二个操作数。当 x 传入的是一个假值时,就执行第二个操作数,为 x 设置默认值。

属性的默认值

setTitle(options.title || 'untitled');

在给函数传递参数时,如果 options.title 是 null 或者其他之类的假值,就提供字符串untitled给函数。

函数结果的默认值

function countOccurrences(regex, str) {
  return (str.match(regex) || []).length;
}

match()方法会返回一个数组或 null。得益于逻辑或(||),在后一种请看下可以设置一个默认值。因此,在这两种情况下你都可以安全地访问 length 属性。


网站标题:JavaScript 逻辑且(&&)和逻辑或(||)的妙用
文章URL:http://scyanting.com/article/dsojggi.html