JavaScript 中逻辑运算符的使用规则

前几天有个小伙伴给我发了一段代码问我这样写有没有问题，代码如下：

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