JavaScript 逻辑与(&&) 与 逻辑或(||) 的逻辑运算规则理解

Posted rencoo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 逻辑与(&&) 与 逻辑或(||) 的逻辑运算规则理解相关的知识,希望对你有一定的参考价值。

逻辑与(&&)

逻辑与(&&)操作可以应用于任何的操作类型,不仅仅是布尔值,
在有一个操作数不是布尔值的情况下,&&操作符就不一定返回布尔值:遵循下面规则:

1. 如果第一个操作数是对象(广义),则返回第二个操作数

alert(‘GeCan‘ && null)      // null
alert(‘GeCan‘ && NaN)       // NaN
alert(‘GeCan‘ && 0)         // 0
alert(‘GeCan‘ && false)     // false
alert(‘GeCan‘ && ‘GeCan‘)   // "GeCan"
alert(‘GeCan‘ && undefined) // undefined
alert(‘0‘ && ‘GeCan‘)       // ‘GeCan‘
alert(1 && ‘GeCan‘)         // ‘GeCan‘

2. 如果第二个操作数是对象,只有在第一个操作数求值为 true 的情况下才返回该对象
第一个操作数求值为 true;返回该对象
// 当第一个操作数是对象,也返回该对象(参考第一点)

alert(true && ‘GeCan‘)      // ‘GeCan‘

否则直接返回第一个数(短路操作)
alert(null && ‘GeCan‘)      // null
alert(NaN && ‘GeCan‘)       // NaN
alert(0 && ‘GeCan‘)         // 0
alert(false && ‘GeCan‘)     // false
alert(undefined && ‘GeCan‘) // undefined
alert(‘‘ && ‘GeCan‘)        // ‘‘;

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

alert(true && someUndefinedVariable) // error;someUndefinedVariable is not defined

3. 如果两个都是对象返回第二个(与上面规则有点重复)

4.如果有一个操作数是 null, NaN,0,false 或 undefined 或 ‘‘,则返回 它们自己
第一种情况,这些操作符在第一个,参照上面第2条规则的第一点,直接返回它们自己(短路);
第二种情况,这些操作符在第二个(第一个操作符求值为 true 之后),也返回它们自己

alert(true && null)      // null
alert(true && NaN)       // NaN
alert(true && 0)         // 0
alert(true && false)     // false
alert(true && undefined) // undefined
alert(true && ‘‘)        // ‘‘

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

---------------------------------------------------------------------------------------------------------------------------

逻辑或(||)

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

1. 第一个是对象,就返回第一个(短路)

alert(‘GeCan‘ || undefined) // "GeCan"
alert(‘GeCan‘ || ‘KaiKai‘)  // "GeCan"

2. 第一个是 false, null, NaN ,0 或 undefined 或 ‘‘,则返回第二个操作数;

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

alert(false || null)      // null
alert(false || NaN)       // NaN
alert(false || 0)         // 0
alert(false || false)     // false
alert(false || ‘GeCan‘)   // "GeCan"
alert(false || undefined) // undefined

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

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

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

alert(null || null)       // null
alert(null || NaN)        // NaN
alert(null || 0)          // 0
alert(null || false)      // false
alert(null || ‘GeCan‘)    // "GeCan"
alert(null || undefined)  // undefined

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

alert(NaN || NaN)         // NaN
alert(NaN || null)        // null
alert(NaN || 0)           // 0
alert(NaN || false)       // false
alert(NaN || ‘GeCan‘)     // ‘GeCan‘
alert(NaN || undefined)   // undefined

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

alert(0 || null)          // null
alert(0 || NaN)           // NaN
alert(0 || 0)             // 0
alert(0 || false)         // false
alert(0 || ‘GeCan‘)       // "GeCan"
alert(0 || undefined)     // undefined

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

alert(undefined || null)       // null
alert(undefined  || NaN)       // NaN
alert(undefined || 0)          // 0
alert(undefined  || false)     // false
alert(undefined  || ‘GeCan‘)   // "GeCan"
alert(undefined  || undefined) // undefined

·第一个是 ‘‘; 返回第二个操作数

alert(‘‘ || null)       // null
alert(‘‘  || NaN)       // NaN
alert(‘‘ || 0)          // 0
alert(‘‘  || false)     // false
alert(‘‘  || ‘GeCan‘)   // "GeCan"
alert(‘‘ || undefined)  // undefined

上述规则总结,

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

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

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

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

---------------------------------------------------------------------------------------------------------------------------

逻辑运算的应用

1. 利用逻辑或(||)
// 例子一 操作DOM
如果变量的值 不是 false, null, NaN ,0 或 undefined 或 ‘‘,则传入该变量;

function addMessage(message){
    message = message || ‘default message‘;

    var el = document.createElement(‘p‘);
    el.innerhtml = message;

    document.body.appendChild(el);
}

addMessage(); // 操作默认参数
addMessage(‘hello world‘) // 操作我们传入的参数

 

请注意 谨慎使用 || 填充默认值 !!!
// 例子二

function Foo(value){
    value = value || ‘default value‘;
    return value;
}

Foo() // ‘default value‘ ;传递默认参数
Foo(‘你好‘) // ‘你好‘

注意:这里传入 false, null, NaN ,0 或 undefined 或 ‘‘ 等值,都会使用第二个默认参数!!!
          然而实际上只有 undefined 这一种情况才应该被认为是用户没有指定其值,需要使用后备的默认值。

改进版本

function Foo(value){
    value = value !== undefined ? value : ‘defaule value‘;
    return value;
}

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

Foo(undefined)  // "defaule value"

以下这些值,都不会被强制替换 (安全了许多!!!)

Foo(‘‘)     // ‘‘
Foo(0)      // 0
Foo(NaN)    // NaN
Foo(null)   // null
Foo(false)  // false

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

function Foo(value = ‘default value‘){
    return value;
}

// 替换为默认值
Foo(undefined)  // "default value"

// 没有替换;很安全
Foo(‘‘)     // ‘‘
Foo(0)      // 0
Foo(NaN)    // NaN
Foo(null)   // null
Foo(false)  // false

2. 综合利用 逻辑与(&&) 和 逻辑或(||)

function whatDoesItDo(mood){
    return mood && "I like this" || "I don‘t like this";
}

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

当 mood 是对象(广义),其也会显示 A。

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

以上。

 



















以上是关于JavaScript 逻辑与(&&) 与 逻辑或(||) 的逻辑运算规则理解的主要内容,如果未能解决你的问题,请参考以下文章

javaScript 中的布尔运算符 && 和 ||

JavaScript 按位与和逻辑与

JavaScript逻辑运算符(操作数运算符)

javascript中逻辑运算符总结

JavaScript语言精髓之语法概要拾遗(转)

JavaScript || 和 && 的总结