可选链操作符

问号点函数调用后加问号 ?. father:: 运算符

梗概

• obj?.name
• obj?.[prop]

实例说明:

当你需要访问一个嵌套多层对象的某个深层级的属性，但是又不能保证哪个属性是一定存在的，那么我们可能需要进行如下判断：

const animal = {
    cat: {
        name: 'kitty',
        color: 'black'
    },
    dog: {
        name: 'doggie'
    }
}
const catName = animal && animal.cat && animal.cat.name

使用可选链操作符（?.），我们可以这样：

// 可选链操作符将会使表达式更短、更简明
const catName = animal?.cat?.name;//只要链中任意一个属性为undefined, 表达式的返回值都是undefined

使用了可选链操作符（?.），JavaScript会在尝试访问 animal.cat.name 之前，先对 animal进行判断，如果 animal 为 null 或 undefined，表达式会进行短路计算直接返回 undefined，以此类推。如果animal 不为 null 或 undefined，animal.cat 为 null 或 undefined 也是同样的道理。