关于使用'&&'进行判断的一些思考

接触项目代码的时候经常可以看到例如这样的代码：

 this.props.planeList && 
 this.props.planeList.differentialConfig &&
 this.props.planeList.differentialConfig.lowPriceRule && 
      this.props.planeList.differentialConfig.lowPriceRule.reasonlib.map(i => i.id);

这是确保在数据可能出现字段丢失时常用的代码逻辑，刚开始很困惑，为什么不直接判断最后一个而要写这么长把每一步都判断呢？

this.props.planeList.differentialConfig.lowPriceRule.reasonlib && 
      this.props.planeList.differentialConfig.lowPriceRule.reasonlib.map(i => i.id);

经过自己写的几个deme，发现这样写的好处就是可以避免报错影响后面代码执行。这里贴上我的例子：

//获得的数据
var data = {
	a:{
		b:true,
		c:true
	}
}
//数据正常情况
data && data.a && data.a.b && console.log('Bingo');	//Bingo

//数据出错情况，字段中不存在data.a.c
//直接判断最后一步，当找不到时会代码直接报错
data.a.c && console.log('Bingo'); 	//Error！报错
console.log('next');				//不输出
//逐步判断，当找不到时不会报错只是不往后执行
data && data.a && data.a.c && console.log('Bingo'); 	//undefined
console.log('next');									//next

其实很好解释，js中&&是从前往后判断，当前一个值为true时继续往后执行，并返回第一个为false之前的那个值，但如果访问值的时候报错就会直接中断执行，抛出错误。这里推荐用|| ''来做一个错误避免的方式

data && data.a && data.a.c && console.log('Binggo') || ''