JavaScript 逻辑运算符 ||、&& 与 ! 的运算规则及短路机制详解

JavaScript 逻辑运算符概述

在 JavaScript 开发中，逻辑运算符是极为常用的操作符，主要包括逻辑与（&&）、逻辑或（||）以及逻辑非（!）。

当使用 && 和 || 连接多个语句时，JavaScript 引擎会先将两边的操作数转换为布尔类型（Boolean），随后依据特定的运算规则执行计算。具体的运算逻辑如下所示：

逻辑与（&&）的运算规则

1. 逻辑与（&&）

1.1 只有当两侧的操作数均为 true 时，最终结果才为 true； 1.2 只要其中有一个操作数为 false，最终结果即为 false； 1.3 若第一个条件判断为 false，则后续的条件不再进行判断（即短路）。

注意：当数值参与逻辑与运算时，若最终结果为 true，返回的将是第二个为真的值；若结果为 false，返回的将是第一个为假的值。

逻辑或（||）的运算规则

2. 逻辑或（||）

2.1 只要有一个条件为 true，最终结果即为 true； 2.2 仅当两个条件均为 false 时，结果才为 false； 2.3 若遇到一个条件为 true，则后续的条件不再进行判断。

注意：当数值参与逻辑或运算时，若结果为 true，会返回第一个为真的值；如果结果为 false，则返回第二个为假的值。

逻辑非（!）的运算规则

3. 逻辑非（!）

3.1 当条件为 false 时，结果为 true；反之，当条件为 true 时，结果为 false。

代码示例与优先级分析

以下通过代码示例进行说明：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>demo</title> 
  <script> 
    console.log( 5 && 4 );//当结果为真时，返回第二个为真的值4 
    console.log( 0 && 4 );//当结果为假时，返回第一个为假的值0 
    console.log( 5 || 4 );//当结果为真时，返回第一个为真的值5 
    console.log( 0 || 0 );//当结果为假时，返回第二个为假的值0 
    console.log((3||2)&&(5||0));//5 
    console.log(!5);//false 
  </script> 
</head> 
<body> 
 
</body> 
</html> 

补充说明：逻辑与（&&）的优先级高于逻辑或（||）。

例如执行 console.log(3||2&&5||0)，根据优先级会先计算 2&&5，其值为 5；接着计算 3||5，结果为 3；最后计算 3||0，最终结果为 3。

表达式求值与短路机制详解

补充内容

表达式 a && 表达式 b：首先计算表达式 a（也可以是函数调用）的运算结果； 如果结果为 True，则执行表达式 b（或函数），并返回 b 的结果； 如果结果为 False，直接返回 a 的结果；

表达式 a || 表达式 b：首先计算表达式 a（也可以是函数调用）的运算结果； 如果结果为 False，则执行表达式 b（或函数），并返回 b 的结果； 如果结果为 True，直接返回 a 的结果；

类型转换规则与实际应用

类型转换规则如下：

对象被视为 true； 非零数字被视为 true；

零（0）被视为 false；

非空字符串被视为 true； 空字符串被视为 false； 其他类型被视为 false；

例如： var a = obj || " " ; // 如果 obj 为空（假值），a 就赋值为 " " ； var a = check() && do(); // 如果 check() 返回真值，就执行 do()，并将 do() 的结果赋值给 a;

构造函数中的默认值赋值实践

其他网友的补充观点

今天复习 JavaScript 继承机制时发现了一个问题，先展示相关代码：

<script type="text/javascript">
 window.onload = function () {
  var mama,
  mama1,
  test = function (name) {
  debugger;
  this.name = name || 'mama';
  };
  debugger;
  mama = new test();
  mama1 = new test("mama1");
  alert(mama.name);//name = mama
  alert(mama1.name);// name = mama1
 }

 </script>

在执行构造函数时，若未传参，返回的 name 属性值为 'mama'；若传入参数，实例的 name 则为该参数值。 此时不禁让人疑惑，为什么逻辑运算符 || 可以这样使用？ 由于作者有 C# 开发背景，对 JavaScript 中 || 的这种用法感到陌生。 既然不懂，便通过实验来探究其原理。

var b, c, d;
  b = true || 0;//b=true;
  c = false || 0;//c=0;
  d = 1 || 0;//d=1;

如果换成其他类型的操作数呢？

var b, c, d;
  b = 1-1 || 1+1; //b=2
  c = function () { return undefined } || function () { return 1};//c=function();
  d = c();//d=undefined

var b, c, d;
  b = 1-1 || 1+1; //b=2
  c = function () { return 1 } || function () { return undefined};//c=function();
  d = c();//d=1

b = {} || { a: 1, getA: function () { return this.a}}; //b=object

var b, c, d;
  b = { a: 1, getA: function () { return this.a } } || {}; //b=object
  c = b.getA();//c=1;

不同语言中逻辑运算符的行为差异

通过上述几个实验可以看出，JavaScript 的 || 运算符并不像 C# 中的 || 那样单纯返回一个布尔类型。 众所周知，JavaScript 中布尔类型的判定规则是：对象为 true，非零数字为 true，非空字符串为 true，其余均为 false。

逻辑或（||）的取值规律总结

由此可以总结出： 逻辑或 || ： var a = 表达式1 || 表达式2

表达式1 表达式2 a取值 1 0 表达式1结果值 1 1 表达式1结果值 0 1 表达式2结果值 0 0 表达式2结果值

逻辑与（&&）的取值规律总结

逻辑与 && ： var a = 表达式1 && 表达式2

表达式1 表达式2 a取值

1 0 表达式2结果值 1 1 表达式2结果值 0 1 表达式1结果值 0 0 表达式1结果值

这主要是因为短路机制：逻辑或 || 在遇到前面一个真值时，便不再看后面的表达式直接停止计算；逻辑与 && 同理。 然后进行赋值操作时，和我们平时一样，只获取最新的一次计算结果值。

例如：

b = (1 + 1, 2 + 2, 3 + 3);//b=6;

以上仅为个人猜测。 内容仅供参考，欢迎指正。