逻辑运算符 || (或)

最新推荐文章于 2024-07-24 10:40:52 发布

fishmemory7sec

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量11

点赞数

分类专栏： JavaScript学习笔记文章标签：前端 javascript

原文链接：https://zh.javascript.info/logical-operators

版权

JavaScript学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

JavaScript 中有四个逻辑运算符：||（或），&&（与），!（非），??（空值合并运算符）。

在日常的开发工作中，我们主要用到的是 ||（或），&&（与），!（非）。

在写代码的时候可以麻溜的写，并不意味着吃透了他们的概念，比如我…因为失业没事干，想着从头过一遍基础，然后发现真的很有必要再学一次，用的麻溜不代表理论也麻溜！

||（或）

result = a || b;

在传统的编程中，逻辑或仅能够操作布尔值。如果参与运算的任意一个参数为 true，返回的结果就为 true，否则返回 false。
在 JavaScript 中，逻辑运算符更加灵活强大。但是，首先让我们看一下操作数是布尔值的时候发生了什么。

下面是四种可能的逻辑组合：

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

正如我们所见，除了两个操作数都是 false 的情况，结果都是 true。

如果操作数不是布尔值，那么它将会被转化为布尔值来参与运算。

例如，数字 1 被作为 true 处理，数字 0 则被作为 false：

if (1 || 0) { // 工作原理相当于 if( true || false )
  alert( 'truthy!' );
}
// 浏览器弹窗展示“truthy”

大多数情况下，逻辑或 || 会被用在 if 语句中，用来测试是否有任何给定的条件为 true。
例如：

let hour = prompt('How old are you?', 9);
if (hour < 10 || hour > 18) {
  alert( 'The office is closed.' );
}

我们可以传入更多的条件：

let hour = prompt('How old are you?', 9);
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
// 以上条件 任一 为true，则执行
  alert( 'The office is closed.' ); // 是周末
}

或运算寻找第一个真值

上文提到的逻辑处理多少有些传统了。下面让我们看看 JavaScript 的“附加”特性。

拓展的算法如下所示。

给定多个参与或运算的值：

result = value1 || value2 || value3;

或运算符 || 做了如下的事情：

从左到右依次计算操作数。
处理每一个操作数时，都将其转化为布尔值。如果结果是 true，就停止计算，返回这个操作数的初始值。
如果所有的操作数都被计算过（也就是，转换结果都是 false），则返回最后一个操作数。

返回的值是操作数的初始形式，不会做布尔转换。

换句话说，一个或运算 || 的链，将返回第一个真值，如果不存在真值，就返回该链的最后一个值。

例如：

alert( 1 || 0 ); // 1（1 是真值）

alert( null || 1 ); // 1（1 是第一个真值）
alert( null || 0 || 1 ); // 1（第一个真值）

alert( undefined || null || 0 ); // 0（所有操作数转换结构都是false，返回最后一个值）

与“纯粹的、传统的、仅仅处理布尔值的或运算”相比，这个规则就引起了一些很有趣的用法。

1.获取变量列表或者表达式中的第一个真值。

例如，我们有变量 firstName、lastName 和 nickName，都是可选的（即可以是 undefined，也可以是假值）。

我们用或运算 || 来选择有数据的那一个，并显示出来（如果没有设置，则用 “Anonymous”）

let firstName = "";
let lastName = "";
let nickName = "SuperCoder";
alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder
// 变量nickName = "SuperCoder"是一个真值，转换结果为true
// 停止计算，返回 nickName 的初始值 "SuperCoder"

alert(firstName || lastName || "Anonymous");  // Anonymous
// firstName / lastName 转换为布尔值都为false，结果就是 "Anonymous"

2.短路求值（Short-circuit evaluation）。

或运算符 || 的另一个用途是所谓的“短路求值”。

这指的是，|| 对其参数进行处理，直到达到第一个真值，然后立即返回该值，而无需处理其他参数。

如果操作数不仅仅是一个值，而是一个有副作用的表达式，例如变量赋值或函数调用，那么这一特性的重要性就变得显而易见了。

在下面这个例子中，只会打印第二条信息“printed”：

true || alert("not printed");  
false || alert("printed");

在第一行中，或运算符 || 在遇到 true 时立即停止运算，所以 alert 没有运行。

有时，人们利用这个特性，只在左侧的条件为假时才执行命令。

拓展

alert( null || 2 || undefined ); // 结果是 2，这是第一个真值。

alert( alert(1) || 2 || alert(3) );
// 答案：首先是 1，然后是 2。

解析：对 alert 的调用没有返回值。或者说返回的是 undefined。

第一个或运算 || 对它的左值 alert(1) 进行了计算。这就显示了第一条信息 1。
函数 alert 返回了 undefined，所以或运算继续检查第二个操作数以寻找真值。
第二个操作数 2 是真值，所以执行就中断了。2 被返回，并且被外层的 alert 显示。
这里不会显示 3，因为运算没有抵达 alert(3)。