前幾天有個(gè)小伙伴給我發(fā)了一段代碼問(wèn)我這樣寫有沒(méi)有問(wèn)題，代碼如下：
const code = window.location.href === 'http://localhost:8888' || 'http://localhost:8989' ? '服務(wù)1' : '服務(wù)2';
看到代碼總覺(jué)得哪里不對(duì)，然后我問(wèn)他是不是要實(shí)現(xiàn)href只要滿足等于'http://localhost:8888'或'http://localhost:8989'其中一個(gè)就返回 code = '服務(wù)1' 而其他情況返回 code = '服務(wù)2'，他說(shuō)是的。我思考了片刻，如果是要實(shí)現(xiàn)他的這種需求這段代碼總覺(jué)得哪里不對(duì)，如果是我寫的話我可能會(huì)分開(kāi)寫寫成下面的樣子
const code = (window.location.href === 'http://localhost:8888' || 'window.location.href === 'http://localhost:8989') ? '服務(wù)1' : '服務(wù)2'
然后懷著好奇，我試著測(cè)試了一下他寫的代碼，發(fā)現(xiàn)不管什么情況，code 的最終結(jié)果都是服務(wù)1。然后，我又試著在他的代碼上稍作修改
const code = window.location.href === ('http://localhost:8888' || 'http://localhost:8989') ? '服務(wù)1' : '服務(wù)2';
這時(shí)運(yùn)行結(jié)果又不相同了。懷著好奇的態(tài)度，便去研究了一下邏輯或 || 的用法。
首先，我們先要了解 js 中運(yùn)算符的優(yōu)先級(jí)關(guān)系，下表按從最高到最低的優(yōu)先級(jí)列出JavaScript運(yùn)算符。具有相同優(yōu)先級(jí)的運(yùn)算符按從左至右的順序求值。
下面是邏輯或的使用規(guī)則：
o1 = true || true // t || t returns true
o2 = false || true // f || t returns true
o3 = true || false // t || f returns true
o4 = false || (3 == 4) // f || f returns false
o5 = 'Cat' || 'Dog' // t || t returns "Cat"
o6 = false || 'Cat' // f || t returns "Cat"
o7 = 'Cat' || false // t || f returns "Cat"
o8 = '' || false // f || f returns false
o9 = false || '' // f || f returns ""
現(xiàn)在我們清楚了 JavaScript 中的運(yùn)算符優(yōu)先級(jí)及邏輯或的使用規(guī)則，來(lái)分析一下那個(gè)小伙伴發(fā)來(lái)的代碼：
const code = window.location.href === 'http://localhost:8888' || 'http://localhost:8989' ? '服務(wù)1' : '服務(wù)2';
根據(jù)運(yùn)算符優(yōu)先級(jí)的順序，這段代碼要先執(zhí)行嚴(yán)格相等 '===' 運(yùn)算
window.location.href === 'http://localhost:8888'
這里如果運(yùn)算結(jié)果為 true ，代碼變?yōu)?/p>
const code = true || 'http://localhost:8989' ? '服務(wù)1' : '服務(wù)2'
根據(jù)使用規(guī)則
o3 = true || false // t || f returns true
代碼直接返回結(jié)果 code = '服務(wù)器1'，如果返回結(jié)果為 false，則要進(jìn)行或運(yùn)算，代碼就變成了
const code = false || 'http://localhost:8989' ? '服務(wù)1' : '服務(wù)2'; //code = '服務(wù)1'
根據(jù)邏輯或的使用規(guī)則
o6 = false || 'Cat' // f || t returns "Cat"
代碼
false || 'http://localhost:8989' // return 'http://localhost:8989'
返回 'http://localhost:8989'， 所以代碼簡(jiǎn)化為
const code = 'http://localhost:8989' ? '服務(wù)1' : '服務(wù)2'; //code = '服務(wù)1' //return '服務(wù)1'
所以不論 window.location.href 是多少，結(jié)果都是 code = '服務(wù)1'。因此小伙伴的代碼并不能實(shí)現(xiàn)他的需求。
所以在運(yùn)用邏輯運(yùn)算符的時(shí)候要謹(jǐn)慎，要先清楚運(yùn)算符的優(yōu)先級(jí)及使用規(guī)則，否則編寫出的代碼結(jié)果很可能不是你想要的樣子。當(dāng)然還有其他的邏輯運(yùn)算這里列出來(lái)大家可以參考一下。
邏輯與（&&）
a1 = true && true // t && t returns true
a2 = true && false // t && f returns false
a3 = false && true // f && t returns false
a4 = false && (3 == 4) // f && f returns false
a5 = 'Cat' && 'Dog' // t && t returns "Dog"
a6 = false && 'Cat' // f && t returns false
a7 = 'Cat' && false // t && f returns false
a8 = '' && false // f && f returns ""
a9 = false && '' // f && f returns false
邏輯或 (||)
o1 = true || true // t || t returns true
o2 = false || true // f || t returns true
o3 = true || false // t || f returns true
o4 = false || (3 == 4) // f || f returns false
o5 = 'Cat' || 'Dog' // t || t returns "Cat"
o6 = false || 'Cat' // f || t returns "Cat"
o7 = 'Cat' || false // t || f returns "Cat"
o8 = '' || false // f || f returns false
o9 = false || '' // f || f returns ""
邏輯非 （!）
n1 = !true // !t returns false
n2 = !false // !f returns true
n3 = !'' // !f returns true
n4 = !'Cat' // !t returns false
雙非 (!!)
n1 = !!true // !!truthy returns true
n2 = !!{} // !!truthy returns true: any object is truthy...
n3 = !!(new Boolean(false)) // ...even Boolean objects with a false .valueOf()!
n4 = !!false // !!falsy returns false
n5 = !!"" // !!falsy returns false
n6 = !!Boolean(false) // !!falsy returns false
