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