首页 > 编程笔记 > JavaScript笔记

JS &&、||、!逻辑运算符及用法

逻辑表达式需要使用逻辑运算符对表达式进行逻辑运算。使用逻辑运算符可将多个关系表达式组合成一个复杂的逻辑表达式。表达式中包含关系表达式时,将首先运算关系表达式,然后再对关系表达式的结果进行逻辑运算。逻辑运算符包括单目运算符和双目运算符,见表 1。

表 1:逻辑运算符
运算符 描述 类型 示例
取反(逻辑非) 单目运算符 !3  //返回值为 false
&& 与运算(逻辑与) 双目运算符 true && true  //返回值为 true
|| 或运算(逻辑或) 双目运算符 false || true   //返回值为 true

1. 逻辑&&运算符

&&运算符执行逻辑与运算,可以实现任意类型的两个操作数的逻辑与运算,运算结果可能是布尔值,也可能是非布尔值。&&运算符的操作数既可以是布尔值,也可以是除了 true 和 false 以外的其他真值和假值。所谓“假值”是指 false、null、undefined、0、-0、NaN 和空字符串"";“真值”就是除假值以外的任意值。

在实际使用时,常常使用&&连接关系表达式,此时会先计算关系表达式的值,最后再计算逻辑表达式的值。使用&&运算符计算表达式时遵循以下两条规则:
  1. 如果&&运算符左边的操作数为 true 或其他真值,将继续进行右边操作数的计算,最终结果返回右边操作数的值;
  2. 如果&&运算符左边的操作数为 false 或其他假值,将不会进行右边操作数的计算,最终结果返回左边操作数的值。该规则也称为“短路”规则。

【例1 】逻辑&&运算符的使用。
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>逻辑&&运算符的使用</title>
  6. <script>
  7. console.log("true && true 的结果是 ", true && true);
  8. console.log("true && false 的结果是 ", true && false);
  9. console.log("(1 == 1) && false 的结果是 ", (1 == 1) && false) ;
  10. console.log("(5 == '5') && ('6'>5) 的结果是 ", (5 == '5') && ('6' > 5)) ;
  11. console.log("'A' && false 的结果是 ", 'A' && false);
  12. console.log("true && 'A' 的结果是 ", true && 'A');
  13. console.log("'A' && true 的结果是 ", 'A' && true);
  14. console.log("'A' && 'B' 的结果是 ", 'A' && 'B');
  15. console.log("'A' && '' 的结果是 ", 'A' && '');
  16. console.log("false && true 的结果是 ", false && true);
  17. console.log("false && false 的结果是 ", false && false);
  18. console.log("false && 'A' 的结果是 ", false && 'A');
  19. console.log("(5 != '5') && 'A' 的结果是 ", (5 != '5') && 'A') ;
  20. console.log("null && 'B' 的结果是 ",null && 'B');
  21. console.log('NaN && 3 的结果是 ',NaN && 3);
  22. </script>
  23. </head>
  24. <body>
  25. </body>
  26. </html>
上述代码在 Chrome 浏览器的控制台中的运行结果如图 1 所示。
逻辑与运算表达式结果
图 1:逻辑与运算表达式结果

从图 1 的运行结果可看出,逻辑与表达式的值既可以是布尔值,也可以是非布尔值。表达式的值由左边的操作数决定,如果左边操作数为 true 或其他真值,则表达式的值等于右边操作数的值;如果左边操作数为 false 或其他假值,则表达式的值等于左边操作数的值。

2. 逻辑||运算符

||运算符执行逻辑或运算,和&&运算符一样,可以实现任意类型的两个操作数的逻辑或运算,运算结果可能是布尔值,也可能是非布尔值。||运算符的操作数既可以是布尔值,也可以是除 true 和 false 外的其他真值和假值。在实际使用时,常常使用||连接关系表达式,此时会先计算关系表达式的值,最后再计算逻辑表达式的值。

使用||运算符计算表达式时遵循以下两条规则:
  1. 如果其中一个或两个操作数是真值,表达式返回真值;如果两个操作数都是假值,表达式返回假值;
  2. 如果||运算符左边的操作数为 true 或其他真值,将不会进行右边操作数的计算,最终结果返回左边操作数的值(该规则也称为逻辑或运算的“短路”规则);否则继续计算右边操作数的值,并返回右边操作数的值作为表达式的值。

【例 2】逻辑||运算符的使用。
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>逻辑||运算符的使用</title>
  6. <script>
  7. console.log("true || true 的结果是 ", true || true);
  8. console.log("true || false 的结果是 ", true || false);
  9. console.log("true || (1 != '1') 的结果是 ", true || (1 != '1'));
  10. console.log("'A' || false 的结果是 ", 'A' || false);
  11. console.log("true || 'A' 的结果是 ", true || 'A');
  12. console.log("'A' || true 的结果是 ", 'A' || true);
  13. console.log("'A' || 'B' 的结果是 ", 'A' || 'B');
  14. console.log("false || 'A' 的结果是 ", false || 'A');
  15. console.log("false || true 的结果是 ", false || true);
  16. console.log("false || false 的结果是 ", false || false);
  17. console.log("(5 < '5' || true 的结果是 ", (5 < '5') || true);
  18. </script>
  19. </head>
  20. <body>
  21. </body>
  22. </html>
上述代码在 Chrome 浏览器的控制台中的运行结果如图 2 所示。
逻辑或运算表达式结果
图 2:逻辑或运算表达式结果

从图 2 的运行结果可看出,逻辑或表达式的值既可以是布尔值,也可以是非布尔值。整个表达式的值由左边的操作数决定,如果左边操作数为 true 或其他真值,则表达式的值等于左边操作数的值;如果左边操作数为 false 或其他假值,则表达式的值等于右边操作数的值。

3. 逻辑!运算符

!运算符执行逻辑非运算,是单目运算符,它的操作数只有一个。和其他逻辑运算符一样,其操作数可以是任意类型,但逻辑非运算只针对布尔值进行运算。所以,!运算符在执行运算时,首先将操作数转换为布尔值,然后再对布尔值求反。也就是说,!运算总是返回 true 或 false 布尔值。

【例 3】逻辑运算符!的使用。
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>逻辑!运算符的使用</title>
  6. <script>
  7. console.log("!true 的结果是 ", !true);
  8. console.log("!false 的结果是 ", !false);
  9. console.log("!'A' 的结果是 ", !'A'); //字符串A是真值,转换为true布尔值
  10. console.log("!12 的结果是 ", !12); //数字12是真值,转换为true布尔值
  11. console.log("!0 的结果是 ", !0); //0是假值,转换为false布尔值
  12. console.log("!'' 的结果是 ", !''); //空字符串是假值,转换为false布尔值
  13. </script>
  14. </head>
  15. <body>
  16. </body>
  17. </html>
上述代码在 Chrome 浏览器的控制台中的运行结果如图 3 所示。
逻辑非运算表达式结果
图 3:逻辑非运算表达式结果

从图 3 可看出,不管操作数的类型是什么,最终逻辑非表达式的值都是布尔值。

所有教程

优秀文章