逻辑与(&&)

逻辑与（&&）操作可以应用于任何的操作类型，不仅仅是布尔值，

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

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

---以上---