【JavaScript】 短路运算的妙用 || &&

短路运算的妙用

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

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

• 如果第一个值为 false，则不会执行后面的内容。

• 如果第一个值为 true，则继续执行第二条语句，并返回第二个值。

举例：

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

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

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

• 如果第一个值为 true，则不会执行后面的内容。

• 如果第一个值为 false，则继续执行第二条语句，并返回第二个值。

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

举例1：

const result; // 请求接口时，后台返回的内容
let errorMsg = ''; // 前端的文案提示
if (result && result.retCode == 0) {
  errorMsg = '恭喜你中奖啦~'
}

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

if (!result) {
	// 接口挂掉时
	errorMsg = '网络异常，请稍后再试';
}

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

if (result.retCode == 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 作为兜底图片。这种写法，在实际开发中经常用到。