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...
---以上---