JS可选链操作符 (?.)

可选链操作符( ?. )

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) 
(null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。

与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。

在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有帮助的。

用法

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

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

const obj = {
    info: {
        name: 'zhangsan',
        age: 20
    }.
    datails: {}
}

let someBody = obj.info?.name //zhangsan
let otherInfo = obj.infos?.name // 返回undefined 而不是报错异常

2.可选链与函数调用

// 函数调用时如果被调用的方法不存在
// 使用可选链可以使表达式自动返回 undefind 而不是抛出一个异常
let data = someInterface.someMethod?.()

3.可选链和表达式

// 当使用中括号与属性名的形式来访问属性时，也可以使用可选链操作符
let nestedProp = obj?.['prop' + 'Name']

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

const someObj?.name = "zhangsan" // 报错

5.可选链访问数组元素

let arr = ['zhangsan', 20, 'male']
let item = arr?.[0] // 'zhangsan'

6.可选链用于短路计算

// 当在表达式中使用可选链时，如果左操作数是 null 或 undefined，表达式将不会被计算
const profile = {
    name: 'zhangsan',
    details: {
        gender: 'Female',
        age: 20
    }
}
let add = profile.details?.address?.province // 没有报错返回undefined

7.使用空值合并操作符 和 | 是一个效果

// 空值合并操作符可以在使用可选链时设置一个默认值
let person = {
  name: "zhangsan",
  details: { age: 20 }
}
let add = person?.city ?? '默认值';
console.log(add) // '默认值'