（26）es6——es11新增可选链式调用?.

链式调用属性的痛点

当我们读取比较深的对象属性时可能会编写出下面的代码
console.log(person.hobby.category); // 读取人的爱好中的类别属性

前置知识：
	1、我们知道js去读取一个对象不存在的属性时，返回值为undefined。
	2、js去读取undefined的xxx属性时会报错。

那么此时console.log(person.hobby.category);实际开发时，person对象很有
可能是动态对象（比如从接口中读取的），那么就很有可能person中的hobby不存在，
此时person.hobby.category就变成了undefined.category。程序报错。（ps:可能在当
时开发时，接口中是有值的，当时后期可能后端接口的改动导致代码出错，因此大家发现
这不是一段十分健壮的代码。）那么我们可以怎么做呢？

没有链式调用怎么解决痛点

可以使用嵌套三元表达式的形式来实现。

const person = { hobby: { category: { c: 1 } } };
const result = person ?
    person.hobby ?
    person.hobby.category ?
    person.hobby.category :
    undefined :
    undefined :
    undefined;
console.log(result); // {c: 1}

我们发现嵌套起来的结构实在是不便于阅读。

链式调用解决痛点

const person = {hobby:{category:"哺乳动物"}};
const result = person?.hobby?.category;
const errResult = person?.a;
console.log(result);
console.log(errResult);

链式调用的好处

通过前面我们知道链式调用主要有两个好处
1、强化代码的健壮性
2、同时易于阅读

链式不只是用来调用对象属性

调用函数

const obj = {
    a: {
        b: {
            fn: function() {
                return { c:1}
            }
        }
    }
}
// 判断fn函数是否存在，如果存在就调用它
const result = obj?.a?.b?.fn?.().c;
console.log(result);

调用动态属性

const obj = {
    a: {
        b: {
            fn: function() {
                return { c:1}
            }
        }
    }
}

const vari = "b";

const result = obj?.a?.[vari].fn?.();
console.log(result);

可选链式有三个属性

短路

/* 可选链式当访问不存在的属性时，将直接终止这个链式的调用，错误位置后面的逻辑
将不会被执行。*/
function clg(){
    console.log("clg");
}
const obj = {};
let result = obj?.a?.clg?.();
console.log(result);

堆叠

可选链式?.可以在一条链式调用中使用多次

可选删除

// 可以搭配delete语句使用
const obj = {
    a: {
        b: {
            c: 1,
            d: 2
        }
    }
}

delete obj?.a?.b?.c;
console.log(obj);