JS 链判断运算符(?.)

简介：

?.操作符：用于使用隐式空检查访问嵌套对象属性。

使用场景：

在使用后端返回的数据时，前端常常要对其进行判空操作，那么当嵌套属性比较多，写起来则会比较麻烦，如下：

if(data && data.obj && data.obj.name) {
    this.userName = data.obj.name;
}

或者更好的优化则可以将他们写成一行：

this.userName = data && data.obj && data.obj.name;

但是实际中后端返回的字段名会比较长，且属性嵌套也会比较多，那么代码看起来就会非常冗长、难以阅读。

下面用 ?. 来优化一下：

this.userName = data?.data.obj?.data.obj.name;

?. 是ES2020中引入的，相关用法如下：

obj.val?.pro  // 对象--如果`val`存在，则返回`obj.val.prop`，否则返回 `undefined`。

obj.func?.(args) // 函数--如果 obj.func 存在，则返回 `obj