分类
JavaScript

JavaScript 中“.”操作符避坑指南

在 JavaScript 中,我们通常使用“.”操作符去访问对象的属性,当这个属性值是一个数组的时候,要访问数组长度的时候就需要注意了,容易掉坑里面。

前端通常是通过异步接口获取到一个 data 对象,假如 data 对象中有一个类型为数组的属性 list ,JavaScript 中会通过 data.list.length 去访问 list 的长度,正常情况下 list 有数据的时候,接口一般都会正常返回list 属性,JavaScript 脚本正常运行而不会报错,但是当 list 内可能没有任何数据,如果后端在 list 内没有数据的时候就不返回 list属性 或者返回的 list 属性值是 null,这时候直接访问 data.list.length 就会有问题了,因为在 JavaScript 访问一个未定义属性或者 null 的长度,JavaScript 脚本会报错。如何避免这个错误的发生呢?

在访问 list 属性的长度之前加个判断,存在 list 属性时才去访问 list 的长度:

data.list && data.list.length

这个问题在前端开发过程中很常见,不管是刚入门的菜鸟还是工作几年的老手,稍不注意就会掉这坑里。