JS ||（或运算）详解

r囧r小猫 2024-03-31 10:05 18阅读 0赞

逻辑或运算`||`是布尔 OR 操作。如果两个操作数都为 true，或者其中一个为 true，就返回 true，否则就返回 false。具体如图所示。

<table> 
 <thead> 
  <tr> 
   <th>第一个操作数</th> 
   <th>第二个操作数</th> 
   <th>运算结果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>true</td> 
   <td>true</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>true</td> 
   <td>false</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>false</td> 
   <td>true</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>false</td> 
   <td>false</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

逻辑或也是一种短路逻辑，如果左侧表达式为 true，则直接短路返回结果，不再运算右侧表达式。运算逻辑如下：

*  第 1 步：计算第一个操作数（左侧表达式）的值。
 *  第 2 步：检测第一个操作数的值。如果左侧表达式的值可转换为 true，那么就会结束运算，直接返回第一个操作数的值。
 *  第 3 步：如果第一个操作数可以转换为 false，则计算第二个操作数（右侧表达式）的值。
 *  第 4 步：返回第二个操作数的值。

示例1

针对下面 4 个表达式：

> 1.  `var n = 3;`
> 2.  `(n == 1) && console.log(1);`
> 3.  `(n == 2) && console.log(2);`
> 4.  `(n == 3) && console.log(3);`
> 5.  `( ! n ) && console.log("null");`

可以使用逻辑或对其进行合并：

> 1.  `var n = 3;`
> 2.  `(n == 1) && console.log(1) ||`
> 3.  `(n == 2) && console.log(2) ||`
> 4.  `(n == 3) && console.log(3) ||`
> 5.  `( ! n ) && console.log("null");`

由于`&&`运算符的优先级高于`||`运算符的优先级，所以不必使用小括号进行分组。不过使用小括号分组后，代码更容易阅读。

> 1.  `var n = 3;`
> 2.  `((n == 1) && console.log(1)) ||`
> 3.  `((n == 2) && console.log(2)) ||`
> 4.  `((n == 3) && console.log(3)) ||`
> 5.  `(( ! n ) && console.log("null")) ||`

逻辑与和逻辑或运算符具有以下 2 个特点：

*  在逻辑运算过程中，临时把操作数转换为布尔值，然后根据布尔值决定下一步的操作，但是不会影响操作数的类型和最后返回结果。
 *  受控于第一个操作数，可能不会执行第二个操作数。

示例2

在下面条件分支中，由于 a=”string” 操作数可以转换为 true，则逻辑或运算就不再执行右侧的定义对象表达式。最后 console.log(b.a); 语句抛出异常。

> 1.  `if(a = "string" || (b = {`
> 2.  `a : "string"`
> 3.  `})`
> 4.  `) console.log(b.a); //调用b的属性a`

如果使用逻辑与运算，就可以避免上述问题。

> 1.  `if(a = "string" && (b = (`
> 2.  `a : "string"`
> 3.  `})`
> 4.  `) console.log(b.a); //调用b的属性a，返回字符串“string”`

示例3

下面代码设计了一个复杂的嵌套结构，根据变量 a 决定是否执行下一个循环。

> 1.  `var a = b = 2; //定义并连续初始化`
> 2.  `if(a){ //条件结果`
> 3.  `while(b ++ < 10){ //循环结构`
> 4.  `console.log(b++); //循环执行语句`
> 5.  `}`
> 6.  `)`

使用逻辑与和逻辑或运算符进行简化：

> 1.  `var a = b = 2; //定义并连续初始化`
> 2.  `while(a && b ++ < 10) console.log(b++); //逻辑与运算符合并的多条件表达式`