谈下javascript中逻辑与，或(&&，||)的一个陷阱

不少从java或其他后端在写javascript的逻辑与，或容易犯的一个错误是：

javascript的&&,||不光返回true，false，还可以是其他字符：

打开chrome的console，在上面打上：

?

1 2 3 4 5 6 7 8 9 10 11

>8||7 <-8   >true || 8 <-true   >'sss' && true <-true   >true && 'sss' <-"sss"<br><br>

 >8 && true
<- true

>true && 8
<- 8

逻辑或 || 的话第一个expression是true就返回true，逻辑与&&就比较奇怪了，两个expression顺序不同返回的值还不同。

查官方文档，其中MDN上是这么来描述的（https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals）：

?

1 2

&& — AND; allows you to chain together two or more expressions so that all of them have to individually evaluate to true for the whole expression to return true. || — OR; allows you to chain together two or more expressions so that one or more of them have to individually evaluate to true for the whole expression to return true.

　这里也只说了什么情况返回true，而没有说只能返回true和false。

这个问题不注意容易导致bug，看下面这段代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<q-btn   v-if="<strong>isCouponTaobaoPwd(coupon)</strong> == false"   target="_blank"   color="accent"   text-color="white"   :size="buttonSize"   unelevated   class="text-weight-bold"   @click="takeCouponClick(detail.urlCode, coupon.index)" >   领取 </q-btn>   <q-btn   v-if="<strong>isCouponTaobaoPwd(coupon)</strong> === true"   target="_blank"   color="accent"   text-color="white"   :size="buttonSize"   unelevated   class="text-weight-bold"   @click="takeCouponClick(detail.urlCode, coupon.index)" >   不领取 </q-btn>

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

isTaobaoPwd() {    var ua = window.navigator.userAgent.toLowerCase();    // console.log(ua);    if (      ua.match(/MicroMessenger/i) == 'micromessenger' &&      /(淘宝|天猫|聚划算)\W*/g.test(this.detail.mall)    ) {      return true;    } else {      return false;    }  },   <strong> isCouponTaobaoPwd(coupon)</strong> {    let <strong>result = this.isTaobaoPwd() && coupon.taobaoPwd;</strong>    <strong>console.info('result is ' + result);</strong>    return result;  },

　这里coupon.taobaoPwd=‘¥sLsssz¥’,是一串字符串，

?

1	<strong>当 this.isTaobaoPwd()==true时</strong>，<strong>result=¥sLsssz¥’，所以 </strong>v-if="<strong>isCouponTaobaoPwd(coupon)</strong> === true"就不会被触发，想让它触发得改成v-if="<strong>isCouponTaobaoPwd(coupon)",MDN上提到中：<br></strong>

We wanted to make a special mention of testing boolean (true/false) values, and a common pattern you'll come across again and again. Any value that is not false, undefined, null, 0, NaN, or an empty string ('') actually returns true when tested as a conditional statement, therefore you can use a variable name on its own to test whether it is true, or even that it exists (that is, it is not undefined.) So for example:

?

1	<strong>当 this.isTaobaoPwd()==false时，result=false，这个倒是符合期望</strong>

 -------------

注：其实这些问题如果仔细看了MDN的文档就都不是问题，在javascript的reference上都有详细说明：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND

https://developer.mozilla.org/en-US/docs/web/javascript/reference/operators