JS 链判断运算符(?.)

向右看齐 2022-09-08 10:25 157阅读 0赞

简介：

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

使用场景：

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

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

\- 访问数组

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

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

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