美文网首页js css html
JavaScript--详解&&和||

JavaScript--详解&&和||

作者: 蒜泥捣莓 | 来源:发表于2022-07-26 20:05 被阅读0次

    一、&&和||的简单介绍

    1、&&(逻辑与)

    逻辑与操作符由两个和号(&&)表示。

    2、||(逻辑或)

    逻辑或操作符由两个管道符(||)表示。

    二、深入理解&&和||

    1、用法

    && 和 || 运算符的返回值并不一定是布尔类型,而是两个操作数其中一个的值。例如:

    var a = 42;
    var b = "abc";
    var c = null;
    a || b; // 42 
    a && b; // "abc"
    c || b; // "abc" 
    c && b; // null
    

    1) || 和 && 首先会对第一个操作数(a 和 c)执行条件判断,如果其不是布尔值(如上例)就先进行ToBoolean 强制类型转换,然后再执行条件判断。
    2)对于 ||来说,如果条件判断结果为 true就返回第一个操作数(a 和 c)的值,如果为false 就返回第二个操作数(b)的值。
    3)&&相反,如果条件判断结果为 true 就返回第二个操作数(b)的值,如果为 false 就返回第一个操作数(a 和 c)的值。
    4)|| 和 && 返回它们其中一个操作数的值,而非条件判断的结果(其中可能涉及强制类型转换)。c && b 中 c 为 null,是一个假值,因此 && 表达式的结果是 null(即 c 的值),而非条件判断的结果 false。

    2、亦可换种角度来理解(有一个细微的差别):

    a || b;
    // 大致相当于(roughly equivalent to):
    a ? a : b;
    
    a && b;
    // 大致相当于(roughly equivalent to):
    a ? b : a;
    

    3、十分常见的||用法如下:

    function foo(a,b) {
     a = a || "hello";
     b = b || "world";
     console.log( a + " " + b );
    }
    
    foo(); // "hello world"
    foo( "yeah", "yeah!" ); // "yeah yeah!"
    

    a = a || "hello"(又称为 C# 的“空值合并运算符”的 JavaScript 版本)检查变量 a,如果还未赋值(或者为假值),就赋予它一个默认值("hello")。

    4、再来看看 &&:

    function foo() {
     console.log( a );
    }
    
    var a = 42;
    a && foo(); // 42
    

    foo() 只有在条件判断 a 通过时才会被调用。如果条件判断未通过,a && foo() 就会悄然终止(也叫作“短路”,short circuiting),foo() 不会被调用。

    5、注意:

    你大概会有疑问:既然返回的不是 true 和 false,为什么 a && (b || c) 这样的表达式在if 和 for 中没出过问题?

    这或许并不是代码的问题,问题在于这些条件判断表达式最后还会执行布尔值的隐式强制类型转换
    例如:

    var a = 42;
    var b = null;
    var c = "foo";
    
    if (a && (b || c)) {
     console.log( "yep" );
    }
    

    这里 a && (b || c) 的结果实际上是 "foo" 而非 true,然后再由 if 将 foo 强制类型转换为布尔值,所以最后结果为 true。

    扩展-----布尔值隐式强制类型转换

    1)if (..) 语句中的条件判断表达式。
    2)for ( .. ; .. ; .. ) 语句中的条件判断表达式(第二个)。
    3)while (..) 和 do..while(..) 循环中的条件判断表达式。
    4)? : 中的条件判断表达式。
    5)逻辑运算符 ||(逻辑或)和 &&(逻辑与)左边的操作数(作为条件判断表达式)。

    以上情况中,非布尔值会被隐式强制类型转换为布尔值,遵循ToBoolean 抽象操作规则。
    例如:

    var a = 42;
    var b = "abc";
    var c;
    var d = null;
    
    if (a) {
     console.log( "yep" ); // yep
    }
    
    while (c) {
     console.log( "nope, never runs" );
    }
    
    c = d ? a : b; 
    c; // "abc"
    
    if ((a && d) || c) {
     console.log( "yep" ); // yep
    }
    

    相关文章

      网友评论

        本文标题:JavaScript--详解&&和||

        本文链接:https://www.haomeiwen.com/subject/xgzoirtx.html