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

避坑指南：在对一个对象取属性的时候（特别是对数组取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，提升咱们前端代码的健壮性。