允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(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;
}
由此可见，可选链式操作符?.简化了很多代码，减少了部分工作量，代码看起来也更加清晰。
使用方法：
- 通过连接的对象的引用或函数可能是 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 而没有报错，保证程序继续执行，而不是中断
- 可选链与函数调用
函数调用时如果被调用的方法不存在，使用可选链可以使表达式自动返回 undefined 而不是抛出一个异常。
const config = {
aFun:()=>{
return 100;
}
};
let data = config.aFun?.(); // 100
let data = config.bFun?.(); // undefined
- 可选链和表达式
当使用中括号与属性名的形式来访问属性时，也可以使用可选链操作符
const config = {
ab:100
};
let _ab = config?.['a' + 'b']; // 100
- 可选链不能用于赋值语句：
const config = {};
config?.a= 100; // Uncaught SyntaxError: Invalid left-hand side in assignment
- 可选链访问数组元素
const arr = [100, 200,300];
let item = arr?.[0]; // 100
- 使用空值合并操作符 和
||是一个效果
空值合并操作符可以在使用可选链时设置一个默认值
const config = {
a: 100
};
let _a = config?.a??100; // 100
成功的秘诀，在永不改变既定的目的。 ——卢梭
