副队长JavaScript教程(19)–逻辑运算符

点此查看所有教程、项目、源码导航

文章目录

• 1. 前言
• 2. 逻辑运算(布尔运算)
• • 2.1 非运算
  • 2.2 与运算
  • 2.3 或运算
• 3. 短路运算原理
• • 3.1 && 与运算短路规则
  • 3.2 || 或运算短路规则
• 4. 小结

1. 前言

我们在使用用户名、密码登录某网站时，首先网站得判断用户名和密码都不能为空，如果有一个为空网站就会提示我们用户名和密码都不能为空。

之前我们已经学习过了，表示判断可以使用关系操作符，如果使用变量 username 表示用户名，使用变量 password 表示密码，则可以使用关系操作符判断用户名不为空、密码不为空：

username!="";//判断用户名不是空字符串password!="";//判断密码不是空字符串

但是，如果判断两个同时都不为空呢？这就需要用到逻辑运算符。

2. 逻辑运算(布尔运算)

上面的两个判断结果都是布尔类型，判断两个结果同时成立，其实就是对布尔类型进行运算，这种运算被称为布尔运算，也就是高中时候学习过的逻辑运算。

看到这里不要慌，看似高大上的概念，其实就是不是、并且、或者的简单逻辑而已。逻辑运算也就分为非、与、或三种，我们来详细解释下。

2.1 非运算

非，表示相反的意思，JS 语言中对应的逻辑运算符是!，我们直接看例子，这样比较好理解：

vara=2>1;//判断为真，所以a的值为truevarb=!a;//非真，也就是假，所以b的值为falsevarc=!(2>1);// 2>1为真，所以c的值为非真，所以c的值为false

看完上面的例子，应该能体会，逻辑运算是对布尔值的运算，而布尔值只有 true、false 两个，所以逻辑运算就是对这两个值进行运算。

非运算会把 true 变为 false，把 false 变为 true，就这么简单。

2.2 与运算

与，表示一起、并列的意思，JS 语言中对应的逻辑运算符是&&。既然表示一起，那么只有当两个结果都是真时，与运算结果才是真的，只要有一个结果是假的，那么与运算结果就是假的了。看例子：

varusername="张三";//用户名varpassword="123456";//密码varresult=username!=""&&password!="";// 判断用户名和密码是否都不为空

第 1 行、第 2 行代码很好理解，就是给两个变量赋值。

第 3 行比较复杂，首先我们先计算赋值右边的部分，里面有逻辑运算符&&。然后逻辑运算两边是username!=""和password!=""，因为用户名、密码都不是空字符串，所以这两个运算结果都是 true。

然后对两个 true 进行与运算&&，与运算中两者均是真，则与运算结果为真。此时两个结果都是真，所以与运算结果是真的，即为 true。

所以最后，result 的值为 true。

2.3 或运算

或，表示或者的意思，JS 语言中对应的逻辑运算符是||。既然是或者，那么两个结果只要有一个是真，那么或运算的结果就是真的；两个结果都是假的，或运算结果才是假。
看例子：

varusername="张三";//用户名varpassword="123456";//密码varresult=username==""||password=="";// 判断用户名或密码是否有为空的

上面的例子中，第 1 行、第 2 行对变量进行赋值，第 3 行将或运算的结果赋值给 result。
因为或运算两边是判断字符串空，两个字符串都不是空，所以或运算的对象是 false、false，当两个结果都是假的时，或运算结果为假，所以最终 result 的值为 false。

3. 短路运算原理

短路是&&和||非常重要的特性，也是开发中高频使用的知识点。逻辑运算符并不会无脑把两边代码全部执行完，当左边表达式已经可以确定最终结果时，右边代码就不会执行了，这个现象就叫短路。

3.1 && 与运算短路规则

&&要求全部为真结果才为真。

如果左边表达式结果为 false，不管右边是 true 还是 false，整个表达式一定是 false。此时直接短路，右边代码不会执行。

只有左边为 true，才会继续执行、判断右边。

varnum=10;false&&(num=20);console.log(num);// 输出10，右边赋值代码没有执行，发生短路

3.2 || 或运算短路规则

||只要一个为真，结果就是真。

如果左边表达式结果为 true，整个表达式结果已经确定是 true，直接短路，右边代码不会执行。

只有左边为 false，才会继续执行、判断右边。

varnum=10;true||(num=20);console.log(num);// 输出10，右边赋值代码没有执行，发生短路

补充说明：短路不只是跳过代码执行，逻辑运算符最终返回的是停下位置那个表达式的值，不一定是布尔值，这个特性后面写代码的时候会经常用到。

4. 小结

1. 非运算!，true 变 false，false 变 true。
2. 与运算&&，a&&b，a 和 b 都为 true，结果为 true；有一个是 false，则结果为 false。左边为 false 触发短路，右侧不执行。
3. 或运算||，a||b，a 和 b 中至少有一个 true，结果为 true；都是 false，结果 false。左边为 true 触发短路，右侧不执行。
4. 短路是重点：当左边已经可以确定整体结果，右边表达式直接不再运行。

其实就是咱们说的不是、并且、或者的意思，短路特性在后面条件判断里会经常用到。