「JavaScript」非布尔值的与或运算and短路运算的妙用

虽简单，但重要。

在实际开发中，我们经常用这种代码做容错处理或者兜底处理。

非布尔值的与或运算：

非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，但返回结果是原值。比如说：

 var result = 5 && 6; // 运算过程：true && true;
 console.log('result：' + result); // 打印结果：6（也就是说最后面的那个值。）

上方代码可以看到，虽然运算过程为布尔值的运算，但返回结果是原值。

那么，返回结果是哪个原值呢？我们来看一下。

与运算的返回结果：（以多个非布尔值的运算为例）

• 如果第一个值为 false，则执行第一条语句，并直接返回第一个值；不会再往后执行。
• 如果第一个值为 true，则继续执行第二条语句，并返回第二个值（如果所有的值都为 true，则返回的是最后一个值）。

或运算的返回结果：（以多个非布尔值的运算为例）

• 如果第一个值为 true，则执行第一条语句，并直接返回第一个值；不会再往后执行。
• 如果第一个值为 false，则继续执行第二条语句，并返回第二个值（（如果所有的值都为 false，则返回的是最后一个值）。

实际开发中，我们经常是这样来做「容错处理」的：

当前端成功调用一个接口后，返回的数据为 result 对象。这个时候，我们用变量 a 来接收 result 里的图片资源。通常的写法是这样的：

 if (result.resultCode == 0) {
     var a = result && result.data && result.data.imgUrl ||'http://img.smyhvae.com/20160401_01.jpg';
 }

上方代码的意思是，获取返回结果中的result.data.imgUrl这个图片资源；如果返回结果中没有 result.data.imgUrl 这个字段，就用 http://img.smyhvae.com/20160401_01.jpg 作为兜底图片。这种写法，在实际开发中经常用到。

非布尔值的 ! 运算

非布尔值进行非运算时，会先将其转换为布尔值，然后再运算，但返回结果是布尔值。

举例：

 let a = 10;
 a = !a;
 ​
 console.log(a); // false
 console.log(typeof a); // boolean

短路运算的妙用：

下方举例中的写法技巧，在实际开发中，经常用到。这种写法，是一种很好的「容错、容灾、降级」方案，需要多看几遍。

1、JS 中的&&属于短路的与：

• 如果第一个值为 false，则不会执行后面的内容。
• 如果第一个值为 true，则继续执行第二条语句，并返回第二个值。

举例：

 const a1 = 'qianguyihao';
 //第一个值为true，会继续执行后面的内容
 a1 && alert('看 a1 出不出来'); // 可以弹出 alert 框
 ​
 const a2 = undefined;
 //第一个值为false，不会继续执行后面的内容
 a2 && alert('看 a2 出不出来'); // 不会弹出 alert 框

2、JS 中的||属于短路的或：

• 如果第一个值为 true，则不会执行后面的内容。
• 如果第一个值为 false，则继续执行第二条语句，并返回第二个值。

举例：

 const result; // 请求接口时，后台返回的内容
 let errorMsg = ''; // 前端的文案提示
 ​
 if (result && result.retCode != 0) {
 // 接口返回异常码时
 errorMsg = result.msg || '活动太火爆，请稍后再试'; // 文案提示信息，优先用 接口返回的msg字段，其次用 '活动太火爆，请稍后再试' 这个文案兜底。
 }
 ​
 if (!result) {
 // 接口挂掉时
 errorMsg = '网络异常，请稍后再试';
 }