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.func?.(args)`，否则返回 `undefined`。

obj.arr?.[index] // 数组--如果 obj.arr 存在，则返回 `obj.arr?.[index]`，否则返回 `undefined`。

访问属性，当属性不存在时： 

let obj = {
    name: 'zhangsan',
    age: "18",
}

两者对比

-  访问不存在的属性：

console.log(obj.address.city);
// Uncaught TypeError: Cannot read property 'city' of undefined

console.log(obj?.address?.city);
// undefined

- 访问不存在的方法：

console.log(obj.fun());
// TypeError: obj.fun is not a function

console.log(obj.fun?.());
// undefined

- 访问数组

let arr = [
    {name: 'zhangsan',age: "18"},
    {name: 'zlisi',age: "22"},
    {name: 'wangwu',age: "34"},
]

console.log(arr[0].name);  // zhangsan 
console.log(arr[4].name);  // Cannot read property 'name' of undefined
console.log(arr?.[4]?.name);  // undefined

更换默认返回值，不返回undefined

在开发中，有时我们并不需要返回undefined，而是需要一个默认值，那么可以用??操作符赋值一个默认的返回值。

let obj = {
    name: 'zhangsan',
    age: "18",
}
console.log(obj?.sex ?? "男");  // 男