前端很容易遇到的一个大坑

   日期:2020-05-30     浏览:74    评论:0    
核心提示:前端开发时,我们经常会通过.操作符来获取属性值,这里有一个很容易。比如,后端接口定义中data字段类型为数组,前端

避坑指南:在对一个对象取属性的时候(特别是对数组length属性时),写代码前的第一步是保证该对象不为null或者undefined,确认对象为“真”的情况下再做取对应属性值的操作。

前端开发时,我们经常会通过.操作符来获取属性值,这里有个坑很容易产生bug,特别是对数组length属性时,一不小心可能就会造成JS执行出错(这里先保密,后面具体说)导致页面崩溃

举个例子,比如后端接口返回数据中的data字段类型为数组,我们对该数组遍历进行一些处理的常用方式:

for(let i = 0; i < data.length; i++) {
	// doSomething...
}

以上代码在后端正常返回数组的情况下一点问题都没有。

但是,后端返回data为null时,JS执行相关代码时就会报错了:Uncaught TypeError: Cannot read property 'length' of null,页面直接白屏。这种错误在测试的时候很容易遗漏,从而导致线上bug产生。

所以,在工作中,我们在对一个对象取属性的时候,我们一定要注意:首要处理是保证该对象不为null或者undefined,确认对象为真的情况下再取对应的属性。 如下:

// 或者 if(data){ ... },保证data为“真值”,再进行下一步处理
if(Array.isArray(data)) {
	const len = data.length
	//doSomething...
}

这种类型的bug也给了我们一个警示:我们前端一定要有防御性编程的思维,后端定义的字段我们不能100%去信任它,而是要做好充分的错误和异常处理,这样就可以避免很多潜在的bug,提高我们前端代码的健壮性。

现实没我们预设的那么完美,其实80%的代码量都用在异常处理上了。

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服