[[314118]]

今天的課程誕生于一個 bug，有一段代碼：

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

隨手對這段代碼進行了重構(gòu)：

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

執(zhí)行下面打的代碼，結(jié)果是什么?

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

結(jié)果是一個函數(shù)，可能出乎你我的意料：

遇到問題立馬在百度一下：

看到一段解釋：

意思：邏輯運算符如果使用的都是布爾值，則結(jié)果也是布爾值。然而，在 && 和 || 中， 當操作數(shù)是非布爾值的時候結(jié)果可能是非布爾值。

理解起來有點繞開，看個例子：

&& 運算符從左到右進行計算，如果為真，繼續(xù)往后走，直到遇到為 false 的，或者到了最后一個操作數(shù)。如果操作數(shù)是布爾值結(jié)果返回布爾值，如果操作數(shù)是非布爾值結(jié)果返回非布爾值。

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 

|| 運算符，只要遇到一個真值便停止計算，結(jié)果的規(guī)則和 && 運算符一致。

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.可以被轉(zhuǎn)換成 false 的值：null、NaN、0、空字符串 "", '',``、undefined。

2.&& 的優(yōu)先級大于 || 的優(yōu)先級。

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. 優(yōu)先級

假如有個 Label 顯示用戶的名稱，顯示規(guī)則為：默認值是前端小課，如果用戶定義了別名就用別名，如果用戶定義了真實的名字就用真實的名字，優(yōu)先級為真實名字 > 昵稱 > 默認名字。我以前這樣寫：

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

學(xué)完這節(jié)課程我這樣寫，兩個函數(shù)的結(jié)果是一樣的，但代碼量從 15 行縮減到了 6 行：

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

這節(jié)課程主要學(xué)習(xí)了 JavaScript 中的 && 、||、! 和 !!，如果使用不當可能會引發(fā)bug。大家加油!!!