简单运用

逻辑且(&&)：左右必须都满足 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 逻辑且(&&)和逻辑或(||)的妙用
文章地址：http://myzitong.com/article/dsojggi.html