JS ||(或运算)详解
admin
2024-02-06 20:26:10

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

第一个操作数第二个操作数运算结果
truetruetrue
truefalsetrue
falsetruetrue
falsefalsefalse

逻辑或也是一种短路逻辑,如果左侧表达式为 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++); //逻辑与运算符合并的多条件表达式

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

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

相关内容

热门资讯

山水皆有情!丽江两山一江的千年... 去过丽江、走过虎跳峡的人,大概率都听过哈巴雪山和金沙江的传说。很多人站在峡谷之下,望着奔腾不息的金沙...
活力中国调研行丨“殷”你而来 ... 9月12日,游客在殷墟博物馆“甲骨文展厅”内参观。位于河南省安阳市的殷墟博物馆新馆是首个全景式展现商...
浦江之夜赴美好相逢,第37届上... 9月12日晚,黄浦江畔灯火璀璨,第37届上海旅游节大巡游在外滩中山东一路上演。不少观众早早便来到外滩...
美丽中国丨秋韵紫鹊界 梯田入画... 这是9月11日拍摄的紫鹊界梯田(无人机照片)。 金秋九月,湖南省娄底市新化县紫鹊界梯田稻谷渐次成熟。...
中国之巅奏响《共同的节日》,千... 千吨阻尼器,“迎世赛、游上海旅游节”。9月13日,由上海市文化和旅游局指导推出上海旅游·会客│巅峰之...