• JavaScript 逻辑与(&&) 与 逻辑或(||) 运算规则


    逻辑与(&&)

    逻辑与(&&)操作可以应用于任何的操作类型,不仅仅是布尔值,

    在有一个操作数不是布尔值的情况下,&&操作符就不一定返回布尔值:遵循下面规则:

    1.如果第一个操作数是对象(广义),则返回第二个操作数
    1alert('GeCan' && null)      // null
    2alert('GeCan' && NaN)       // NaN
    3alert('GeCan' && 0)         // 0
    4alert('GeCan' && false)     // false
    5alert('GeCan' && 'GeCan')   // "GeCan"
    6alert('GeCan' && undefined// undefined
    7alert('0' && 'GeCan')       // 'GeCan'
    8alert(1 && 'GeCan')         // 'GeCan'
    2.如果第二个操作数是对象,只有在第一个操作数求值为 true 的情况下才返回该对象

    第一个操作数求值为 true;返回该对象

    ---当第一个操作数是对象,也返回该对象(参考第一点)

    1alert(true && 'GeCan')      // 'GeCan'

    ---否则直接返回第一个数(短路操作)

    1alert(null && 'GeCan')      // null
    2alert(NaN && 'GeCan')       // NaN
    3alert(0 && 'GeCan')         // 0
    4alert(false && 'GeCan')     // false
    5alert(undefined && 'GeCan'// undefined
    6alert('' && 'GeCan')        // '';

    ---注意,当第一个操作数求值为 true, 但第二个操作数未定义时,会报错

    1alert(true && someUndefinedVariable) // error;someUndefinedVariable is not defined
    3.如果两个都是对象返回第二个(与上面规则有点重复)
    4.如果有一个操作数是 null, NaN,0,false 或 undefined 或 '',则返回它们自己

    ---第一种情况,这些操作符在第一个,参照上面第2条规则的第一点,直接返回它们自己(短路);

    ---第二种情况,这些操作符在第二个(第一个操作符求值为 true 之后),也返回它们自己;

    1alert(true && null)      // null
    2alert(true && NaN)       // NaN
    3alert(true && 0)         // 0
    4alert(true && false)     // false
    5alert(true && undefined// undefined
    6alert(true && '')        // ''

    上述规则总结

    逻辑与(&&)看左边的值是真还是假,如果是真,返回的是右边的值,如果是假返回的是左边的值(只有false 、0、NaN、null、undefined、空字符串为假, 其余都是真)


    逻辑或(||)

    逻辑或(||) 和 逻辑与(&&) 的操作相类似只要有一个不是布尔值,||也不一定返回布尔值,遵循下面规则:

    1.第一个是对象,就返回第一个(短路)
    1alert('GeCan' || undefined// "GeCan"
    2alert('GeCan' || 'KaiKai')  // "GeCan"
    2.第一个是 false, null, NaN ,0 或 undefined 或 '',则返回第二个操作数;

    ---第一个操作数求值结果为 false; 返回第二个操作数

    1alert(false || null)      // null
    2alert(false || NaN)       // NaN
    3alert(false || 0)         // 0
    4alert(false || false)     // false
    5alert(false || 'GeCan')   // "GeCan"
    6alert(false || undefined// undefined

    ---注意,当第一个操作数求值为 false,但第二个操作数未定义时,会报错

    1alert(false || someUndefinedVariable); // error; someUndefinedVariable is not defined

    第一个是 null; 返回第二个操作数

    1alert(null || null)       // null
    2alert(null || NaN)        // NaN
    3alert(null || 0)          // 0
    4alert(null || false)      // false
    5alert(null || 'GeCan')    // "GeCan"
    6alert(null || undefined)  // undefined

    第一个是 NaN; 返回第二个操作数

    1alert(NaN || NaN)         // NaN
    2alert(NaN || null)        // null
    3alert(NaN || 0)           // 0
    4alert(NaN || false)       // false
    5alert(NaN || 'GeCan')     // 'GeCan'
    6alert(NaN || undefined)   // undefined

    第一个是 0;返回第二个操作数

    1alert(0 || null)          // null
    2alert(0 || NaN)           // NaN
    3alert(0 || 0)             // 0
    4alert(0 || false)         // false
    5alert(0 || 'GeCan')       // "GeCan"
    6alert(0 || undefined)     // undefined

    第一个是 undefined; 返回第二个操作数

    1alert(undefined || null)       // null
    2alert(undefined  || NaN)       // NaN
    3alert(undefined || 0)          // 0
    4alert(undefined  || false)     // false
    5alert(undefined  || 'GeCan')   // "GeCan"
    6alert(undefined  || undefined// undefined

    第一个是 ''; 返回第二个操作数

    1alert('' || null)       // null
    2alert(''  || NaN)       // NaN
    3alert('' || 0)          // 0
    4alert(''  || false)     // false
    5alert(''  || 'GeCan')   // "GeCan"
    6alert('' || undefined)  // undefined

    上述规则总结,

    逻辑或(||) 首先看左边的值是真还是假,如果是真,返回的是左边的值,如果是假返回的是右边的值(只有 false 、0、NaN、null、undefined、空字符串为假, 其余都是真)


    关于逻辑与(&&)与逻辑或(||)只要记住下面两条规则就够了:

    逻辑与(&&)

    看左边的值是真还是假,如果是真,返回的是右边的值,如果是假返回的是左边的值
    (只有 false 、0、NaN、null、undefined、空字符串为假, 其余都是真)

    逻辑或(||)

    看左边的值是真还是假,如果是真,返回的是左边的值,如果是假返回的是右边的值
    (只有 false 、0、NaN、null、undefined、空字符串为假, 其余都是真)


    逻辑运算的应用

    1.利用逻辑或(||)
    例子一 操作DOM

    如果变量的值 不是 false, null, NaN ,0 或 undefined 或 '',则传入该变量;

     1function addMessage(message){
    2    message = message || 'default message';
    3
    4    var el = document.createElement('p');
    5    el.innerHTML = message;
    6
    7    document.body.appendChild(el);
    8}
    9
    10addMessage(); // 操作默认参数
    11addMessage('hello world'// 操作我们传入的参数

    ---谨慎使用 || 填充默认值 !!!

    例子二
    1function Foo(value){
    2    value = value || 'default value';
    3    return value;
    4}
    5
    6Foo() // 'default value' ;传递默认参数
    7Foo('你好'// '你好'

    注意:这里传入 false, null, NaN ,0 或 undefined 或 '' 等值,都会使用第二个默认参数!!!

    然而实际上只有 undefined 这一种情况才应该被认为是用户没有指定其值,需要使用后备的默认值。

    改进版本

    1function Foo(value){
    2    value = value !== undefined ? value : 'defaule value';
    3    return value;
    4}

    通过这种方式给参数设置默认值,只有在传入 undefined,它的值才会被强制替换为默认值

    1Foo(undefined)  // "defaule value"
    2//以下这些值,都不会被强制替换 (安全了许多!!!) 
    3Foo('')     // ''
    4Foo(0)      // 0
    5Foo(NaN)    // NaN
    6Foo(null)   // null
    7Foo(false)  // false

    补充 ES6 可以这样给参数设默认值

     1function Foo(value = 'default value'){
    2    return value;
    3}
    4// 替换为默认值
    5Foo(undefined)  // "default value"
    6// 没有替换;很安全
    7Foo('')     // ''
    8Foo(0)      // 0
    9Foo(NaN)    // NaN
    10Foo(null)   // null
    11Foo(false)  // false
    2.综合利用 逻辑与(&&) 和 逻辑或(||)
    例子一
    1function whatDoesItDo(mood){
    2    return mood && "I like this" || "I don't like this";
    3}

    当 mood 求值结果为 true, 返回 "I like this"(A来代替)

    当 mood 求值结果为 false, 返回 "I dont like this"(B来代替)

    当 mood 是对象,其也会显示 A。

    有点 升级版三元运算符 的感觉;

    例子二
    1...
    2this.canSeen(imglist[i]) && this.loadImage(imglist[i]i);
    3...

    缩写,相当于if true

    当第一个函数返回的布尔值为true,那么调用第二个函数

    1...
    2if(this.canSeen(imglis[i])) {
    3    this.loadImage(imglist[i], i)
    4}
    5...

    ---以上---

  • 相关阅读:
    关于加密程序
    C++11的新特性lambda的小试牛刀RAII
    自动生成makefile的脚本
    关于pcre正则表达式库libpcre
    利用PHP执行SQL文件,将SQL文件导入到数据库
    Linux 系统是否适合于您?
    一个少年电脑病毒作者的独白
    PHP编程效率的20个要点
    JVM源码分析之javaagent原理完全解读
    如何更好的利用Node.js的性能极限
  • 原文地址:https://www.cnblogs.com/rencoo/p/9384710.html
Copyright © 2020-2023  润新知