JS ||（或运算）详解图片看不了？点击切换HTTP 返回上层

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

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

针对下面 4 个表达式：

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

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

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

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

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

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

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

if(a = "string" || (b = {
    a : "string"
    })
) console.log(b.a);  //调用b的属性a

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

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

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

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

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

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

如果转换为如下嵌套结构就不能够继续使用上述表达式进行简化，因为下面的代码时先执行循环体，后执行条件检测。

while(b ++ < 10){  //先执行循环
    if(a){  //再判断条件
        console.log(b++);
    }
}

JS ||（或运算）详解 图片看不了？点击切换HTTP 返回上层