关系运算符

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

  • 默认情况下，我们在程序中写的每一句正确代码都会被执行。但很多时候，我们想在某个条件成立的情况下才执行某一段代码

  • 这种情况的话可以使用条件语句来完成，但是学习条件语句之前，我们先来看一些更基础的知识：如何判断一个条件成不成立。

• JavaScript中的真假性

  • 在JavaScript中，条件成立称为“真”，条件不成立称为“假”，因此，判断条件是否成立就是判断条件的“真假”。

  • 在JavaScript已经给我们定义好了一个Boolean类型的值, 取值是true和false, true代表真, false代表假

  • 而接下来我们要学习的关系运算符它的返回值正好就是Boolean类型的值, 也就是说关系运算符的返回值要么是true,要么是false

• 关系运算符

  • 在程序中经常需要比较两个量的大小关系,以决定程序下一步的工作。比较两个量的运算符称为关系运算符。

• 简单示例

    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); //falseconsole.log(1 >= false); //trueconsole.log(1 > "0"); //trueconsole.log(1 > null); //true

  • 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较, 而会分别比较字符串中字符的Unicode编码

  • null、undefined 、NaN比较

    console.log(null == 0); // falseconsole.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, 所以返回trueconsole.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则返回truevar result = true && true;
    
    //只要有一个false，就返回falseresult = 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); // 0result =  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，则返回falsevar result = false || false;
    
    //只有有一个true，就返回trueresult = 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); // 0result =  "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); // falsevar 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()函数一样

作者：极客江南
链接：https://www.jianshu.com/p/3cba884b99fa