ES11-可选链式操作符 ?.

---

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有帮助的。

在前我们获取一个对象很深的子节点时，为了安全我们会写很多级的判断。如：

const config = {
    a: {
        b: {
            c: {
                d: {
                    e: 100
                }
            }
        }
    }
}, getE = (config) => {
    const _e = config && config.a && config.a.b && config.a.b.c && config.a.b.c.d && config.a.b.c.d.e;
    return _e;
}
console.log(getE(config));

但是有了可选链式操作符?.，我们就可以通过一下写法实现

// 只更改getE 函数，其他不变
const getE = (config) => {
    // const _e = config && config.a && config.a.b && config.a.b.c && config.a.b.c.d && config.a.b.c.d.e;
    const _e = config?.a?.b?.c?.d?.e;
    return _e;
}

由此可见，可选链式操作符?.简化了很多代码，减少了部分工作量，代码看起来也更加清晰。

使用方法：

1. 通过连接的对象的引用或函数可能是 undefined 或 null 时，可选链操作符提供了一种方法来简化被连接对象的值访问。

const config = {
    a: {
        b: {
            c: {
                d: {
                    e: 100
                }
            }
        }
    }
};
let _e = config?.a?.b?.c?.d?.e; // 100
let _e_ = config?.aa?.b?.c?.d?.e; // 返回 undefined 而没有报错，保证程序继续执行，而不是中断

2. 可选链与函数调用
   函数调用时如果被调用的方法不存在，使用可选链可以使表达式自动返回 undefined 而不是抛出一个异常。

const config = {
    aFun:()=>{
      return 100;
    }
};
let data = config.aFun?.();  // 100
let data = config.bFun?.();  // undefined

3. 可选链和表达式
   当使用中括号与属性名的形式来访问属性时，也可以使用可选链操作符

const config = {
    ab:100
};
let _ab = config?.['a' + 'b']; // 100

4. 可选链不能用于赋值语句：

const config = {};
config?.a= 100; // Uncaught SyntaxError: Invalid left-hand side in assignment

5. 可选链访问数组元素

const arr = [100, 200,300];
let item = arr?.[0]; // 100

6. 使用空值合并操作符 和||是一个效果
   空值合并操作符可以在使用可选链时设置一个默认值

const config = {
    a: 100
};
let _a = config?.a??100; // 100

成功的秘诀，在永不改变既定的目的。 ——卢梭