前几天有个小伙伴给我发了一段代码问我这样写有没有问题，代码如下：
const code = window.location.href === 'http://localhost:8888' || 'http://localhost:8989' ? '服务1' : '服务2';
看到代码总觉得哪里不对，然后我问他是不是要实现href只要满足等于'http://localhost:8888'或'http://localhost:8989'其中一个就返回 code = '服务1' 而其他情况返回 code = '服务2'，他说是的。我思考了片刻，如果是要实现他的这种需求这段代码总觉得哪里不对，如果是我写的话我可能会分开写写成下面的样子
const code = (window.location.href === 'http://localhost:8888' || 'window.location.href === 'http://localhost:8989') ? '服务1' : '服务2'
然后怀着好奇，我试着测试了一下他写的代码，发现不管什么情况，code 的最终结果都是服务1。然后，我又试着在他的代码上稍作修改
const code = window.location.href === ('http://localhost:8888' || 'http://localhost:8989') ? '服务1' : '服务2';
这时运行结果又不相同了。怀着好奇的态度，便去研究了一下逻辑或 || 的用法。
首先，我们先要了解 js 中运算符的优先级关系，下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。
image.png
下面是逻辑或的使用规则：
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 ""
现在我们清楚了 JavaScript 中的运算符优先级及逻辑或的使用规则，来分析一下那个小伙伴发来的代码：
const code = window.location.href === 'http://localhost:8888' || 'http://localhost:8989' ? '服务1' : '服务2';
根据运算符优先级的顺序，这段代码要先执行严格相等 '===' 运算
window.location.href === 'http://localhost:8888'
这里如果运算结果为 true ，代码变为
const code = true || 'http://localhost:8989' ? '服务1' : '服务2'
根据使用规则
o3 = true || false // t || f returns true
代码直接返回结果 code = '服务器1'，如果返回结果为 false，则要进行或运算，代码就变成了
const code = false || 'http://localhost:8989' ? '服务1' : '服务2'; //code = '服务1'
根据逻辑或的使用规则
o6 = false || 'Cat' // f || t returns "Cat"
代码
false || 'http://localhost:8989' // return 'http://localhost:8989'
返回 'http://localhost:8989'， 所以代码简化为
const code = 'http://localhost:8989' ? '服务1' : '服务2'; //code = '服务1' //return '服务1'
所以不论 window.location.href 是多少，结果都是 code = '服务1'。因此小伙伴的代码并不能实现他的需求。
所以在运用逻辑运算符的时候要谨慎，要先清楚运算符的优先级及使用规则，否则编写出的代码结果很可能不是你想要的样子。当然还有其他的逻辑运算这里列出来大家可以参考一下。
逻辑与（&&）
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
网友评论