&& ，|| 超越了我的认知

[[314118]]

今天的课程诞生于一个 bug，有一段代码：

const person = { 
    name: 'suyan', 
    getName() { 
        return this.name; 
    } 
}; 
 
function isSuyan()  
    if (person.name === 'suyan' && person.getName) { 
        return true; 
    } 
    return false; 
} 

随手对这段代码进行了重构：

function isSuyan()  
    return person.name === 'suyan' && person.getName; 
} 

执行下面打的代码，结果是什么?

let isTrue = isSuyan(); 
console.log(isTrue); 

结果是一个函数，可能出乎你我的意料：

遇到问题立马在百度一下：

看到一段解释：

意思：逻辑运算符如果使用的都是布尔值，则结果也是布尔值。然而，在 && 和 || 中， 当操作数是非布尔值的时候结果可能是非布尔值。

理解起来有点绕开，看个例子：

&& 运算符从左到右进行计算，如果为真，继续往后走，直到遇到为 false 的，或者到了最后一个操作数。如果操作数是布尔值结果返回布尔值，如果操作数是非布尔值结果返回非布尔值。

const a = 10; 
const b = -5; 
const c = 1; 
console.log(a && b); // -5 
console.log(a > 0 && b); // -5 
console.log(a < 0 && b); // false 
console.log(a && b < 0); // true 
console.log(a && b > 0); // false 
console.log(a > 0 && b < 0); // true 
console.log(a && b && c); // 1 

|| 运算符，只要遇到一个真值便停止计算，结果的规则和 && 运算符一致。

console.log(a || b); // 10 
console.log(a > 0 || b); // true 
console.log(a < 0 || b); // -5 
console.log(a || b < 0); // 10 
console.log(a || b > 0); // 10 
console.log(a > 0 || b < 0); // true 
console.log(a || b || c); // 10 

扩散几个知识点：

1.可以被转换成 false 的值：null、NaN、0、空字符串 "", '',``、undefined。

2.&& 的优先级大于 || 的优先级。

true || false && false      // returns true, because && is executed first 
(true || false) && false    // returns false, because operator precedence cannot apply 

3.!和 !! 操作符返回的值永远是布尔值，上面的例子可以改为下面这样，返回值永远是布尔值：

function isSuyan() { 
    return !!(person.name === 'suyan' && person.getName); 
} 

4. 优先级

假如有个 Label 显示用户的名称，显示规则为：默认值是前端小课，如果用户定义了别名就用别名，如果用户定义了真实的名字就用真实的名字，优先级为真实名字 > 昵称 > 默认名字。我以前这样写：

function showName() { 
    let showName; 
    let trueName = '真名'; 
    let nickName = '别名'; 
    if (trueName) { 
        showName = trueName; 
    } 
    else if (nickName) { 
        showName = nickName; 
    } 
    else { 
        showName = '前端小课'; 
    } 
    return showName; 
} 

学完这节课程我这样写，两个函数的结果是一样的，但代码量从 15 行缩减到了 6 行：

function showName2() { 
    let defaultName = '前端小课'; 
    let trueName = '真名'; 
    let nickName = '别名'; 
    return trueName || nickName || defaultName; 
} 

这节课程主要学习了 JavaScript 中的 && 、||、! 和 !!，如果使用不当可能会引发bug。大家加油!!!