07-JavaScript基础-关系运算符和逻辑运算符

关系运算符

  • 为什么要学习关系运算符?

    • 默认情况下,我们在程序中写的每一句正确代码都会被执行。但很多时候,我们想在某个条件成立的情况下才执行某一段代码
    • 这种情况的话可以使用条件语句来完成,但是学习条件语句之前,我们先来看一些更基础的知识:如何判断一个条件成不成立。
  • JavaScript中的真假性

    • 在JavaScript中,条件成立称为“真”,条件不成立称为“假”,因此,判断条件是否成立就是判断条件的“真假”。
    • 在JavaScript已经给我们定义好了一个Boolean类型的值, 取值是true和false, true代表真, false代表假
    • 而接下来我们要学习的关系运算符它的返回值正好就是Boolean类型的值, 也就是说关系运算符的返回值要么是true,要么是false
  • 关系运算符

    • 在程序中经常需要比较两个量的大小关系,以决定程序下一步的工作。比较两个量的运算符称为关系运算符。
序号运算符结合性
1>大于左结合
2<小于左结合
3>=大于等于左结合
4<=小于等于左结合
5==判断值是否相等左结合
6!=判断值是否不相等左结合
7===判断值和类型是否相等左结合
8!==判断值和类型是否不相等左结合
  • 简单示例
    var a, b;
    a = 10;
    b = 10;
    console.log(a > b); // false
    console.log(a < b); // false
    console.log(a >= b); // true
    console.log(a <= b); // true
    console.log(a == b); // true
    console.log(a != b); // false
  • 特殊示例

    • 对于非数值进行比较时,会将其转换为数字然后在比较
      console.log(1 > true); //false
      console.log(1 >= false); //true
      console.log(1 > "0"); //true
      console.log(1 > null); //true
      
    • 如果符号两侧的值都是字符串时,不会将其转换为数字进行比较, 而会分别比较字符串中字符的Unicode编码
    • Unicode编码转换地址
      // a的Unicode编码是:0061
      // b的Unicode编码是:0062
      console.log("a" < "b");//true
      
      // 比较多位时则是从前往后一位一位比较
      // 第一位相同比较第二位, 直到比较到不一样或者结束为止
      // c的Unicode编码是:0063
      console.log("ab" < "ac");//true
      
    • null、undefined 、NaN比较
      console.log(null == 0); // false
      console.log(undefined == 0); // false
      // 永远不要判断两个NaN是否相等
      console.log(NaN == NaN); // false
      
      /*
       * 可以通过isNaN()函数来判断一个值是否是NaN
       *    如果该值是NaN则返回true,否则返回false
       */
      var num = NaN;
      console.log(isNaN(num)); // true
      
      // undefined 衍生自 null, 所以返回true
      console.log(null == undefined); // true;
      console.log(null === undefined); // false;
      
      // == 判断值是否相等
      // == 会进行数据类型转换
      console.log("123" == 123); // true
      // === 判断值和类型时候同时相等
      // === 不会进行数据类型转换
      console.log("123" === 123); // false
      
  • 练习

计算下列表达式的值
3 > 4 + 7
(3>4) + 7
5 != 4 + 2 * 7 > 3 == 10

-Tips: 利用Unicode编码可以在控制台和网页中输出一些牛逼的符号

// 在控制台中直接使用Unicode编码即可
console.log("\u2764"); // ❤
// 在网页中需要以&#开头, 然后将十六进制2764转换为十进制
<div>&#10084</div>

逻辑运算符

  • 为什么要学习逻辑运算符?
    • 有时候,我们需要在多个条件同时成立的时候才能执行某段代码
    • 比如:用户只有同时输入了QQ和密码,才能执行登录代码,如果只输入了QQ或者只输入了密码,就不能执行登录代码。这种情况下,我们就要借助于JavaScript提供的逻辑运算符。
    • JavaScript中提供了三种逻辑运算符:
        &&(与运算)
        ||(或运算)
        !(非运算)
      

逻辑与

  • 格式: 条件A && 条件B

  • 运算结果:

    • 只有当条件A和条件B都成立时,结果才为true;其余情况的结果都为false。因此,条件A或条件B只要有一个不成立,结果都为false
    • 口诀:一假则假
  • 逻辑与运算过程

    • 总是先判断条件A是否成立
    • 如果条件A成立,接着再判断条件B是否成立:如果条件B成立,“条件A && 条件B”的结果就为true,如果条件B不成立,结果就为false
    • 如果条件A不成立,就不会再去判断条件B是否成立:因为条件A已经不成立了,不管条件B如何结果肯定是false
      //如果两个值都是true则返回true
      var result = true && true;
      
      //只要有一个false,就返回false
      result = true && false;
      result = false && true;
      result = false && false;
      
  • 逻辑与短路现象

      //第一个值为true,会检查第二个值
      true && alert("这哥们来了!!");
    
      //第一个值为false,不会检查第二个值
      false && alert("这哥们不会来了!!");
    
  • 注意点:

    • 对于非Boolean类型的数值, 逻辑与会将其悄悄咪咪转换为Boolean类型来判断
    • 如果条件A不成立, 则返回条件A的数值本身
    • 如果条件A成立, 不管条件B成不成立都返回条件B数值本身
      var result =  "123" && "abc";
      console.log(result); // "abc"
      result =  "123" && 0;
      console.log(result); // 0
      result =  null && 0;
      console.log(result); // null
      

逻辑或

  • 格式: 条件A || 条件B

  • 运算结果:

    • 当条件A或条件B只要有一个成立时(也包括条件A和条件B都成立),结果就为true;只有当条件A和条件B都不成立时,结果才为false
    • 口诀:一真为真
  • 逻辑或运算过程

    • 总是先判断条件A是否成立
    • 如果条件A成立,就不会再去判断条件B是否成立:因为条件A已经成立了,不管条件B如何结果肯定是1,也就是true
    • 如果条件A不成立,接着再判断条件B是否成立:如果条件B成立,“条件A || 条件B”的结果就为true,如果条件B不成立,结果就为false
      //两个都是false,则返回false
      var result = false || false;
      
      //只有有一个true,就返回true
      result = true || false;
      result = false || true ;
      result = true || true ;
      
  • 逻辑或短路现象

      //第一个值为false,则会检查第二个值
      false || alert("123");
    
      //第一个值为true,则不再检查第二个值
      true || alert("123");
    
  • 注意点:

    • 对于非Boolean类型的数值, 逻辑与会将其悄悄咪咪转换为Boolean类型来判断
    • 如果条件A不成立, 则不管条件B成不成立都返回条件B数值本身
    • 如果条件A成立, 则返回条件A的数值本身
      var  result =  null || 0;
      console.log(result); // 0
      
      result =  "123" || "abc";
      console.log(result); // "123"
      result =  "123" || 0;
      console.log(result); // "123"
      

逻辑非

  • 格式: ! 条件A

  • 运算结果:

    • 其实就是对条件A进行取反:若条件A成立,结果就为false;若条件A不成立,结果就为true。也就是说:真的变假,假的变真。
    • 口诀:真变假,假变真
      var bool1 = true;
      var res1 = !bool1;
      console.log(res1); // false
      
      var bool2 = false;
      var res2 = !bool2;
      console.log(res2); // true
      
  • 注意点:

    • 对一个值进行两次取反,它不会变化
      var bool = true;
      var res = !!bool;
      console.log(res); // true
      
    • 对非布尔值进行元素,则会将其转换为布尔值,然后再取反
      var num = 10;
      var res = !num; // 先将10转换为true, 然后再取反
      console.log(res); // false
      
    • 所以, 要想将其它类型转换为Number类型除了Boolean()函数, 还可以使用 !!数值;
    • 值得注意的是!!数值;的形式,实现原理和Boolean()函数一样

学习交流方式:
1.微信公众账号搜索: 李南江(配套视频,代码,资料各种福利获取)
2.加入前端学习交流群:
302942894 / 289964053 / 11550038

    原文作者:极客江南
    原文地址: https://www.jianshu.com/p/3cba884b99fa
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞