Js 新特性:可选链

为什么我们需要它

const person = {
    details: {
        name: {
            firstName: "xiaoming",
            lastName: "xiaohua",
        }
    }
}
const personFirstName = person.details.name.firstName;

如上，为了获取firstName ，我们会这么获取，但是如果不知道firstName是否存在的情况时可能导致报错undefined，所以一般都会加上判断来获取：

if( person && person.details && person.details.name ) {
        const personFirstName = person.details.name.firstName || ‘123’;
}

|| 代表 如果irstName undefined时则取默认值 ‘123’。

为了简便来做可以用可选链来做：

const personFirstName = person?.details?.name?.firstName;

默认值

然后取默认值的话是：

const personFirstName = person?.details?.name?.firstName ?? 'stranger';

以上内容：这个运算符就是 ??，如果它左侧表达式的结果是 undefined，firstName，就会取右侧的 stranger。

特别注意：
这种 如果是 || 时候结果就是无，正常来说应该是0才对！！！所有用 ?? 号可以解决这种问题

我的工资：<span id= "salary"></span>
window.onload = function(){
   const salary= 0;
   document.getElementId('salary').innserHtml == salary ?? '无' 
}

赋值

如果x为null或者为undefined则会把8赋值给x.

 x??=8

动态属性

const name= 'name';
const secondJob = person?.details?.[name] ?? ‘’;

函数方法

const currentDetails = person?.getDetails?.() ?? '';

兼容性

新特性 兼容性很差 可以用babel类插件来兼容它 如 babel-plugin-proposal-optional-chaining