ES2020链判断运算符?.和Null判断运算符??

链判断运算符 ?. 

业务场景：

// 假设data是个数组，如果data没有值，为undefinded，则直接复制会报错，因为没有length这个属性

const dateCount = data.length // 报错

// 正常的处理情况是，加个判断
if (data) {
    const dateCount = data.length
}


// 使用链判断符，就可一步到位
const dataCount = data?.length  // data不存在时，直接返回undefined

上面代码使用了?.运算符，直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。

这样好像没有链的感觉，再举个例子

const name = (data && data.person && data.person.name) || 'no name'
// 这样的判断机制非常麻烦

// 使用链判断符
const name = data?.Person?.Name || 'no name'
// 非常精简

注意点：

一、短路

a?.[++x]
// 等同于
a == null ? undefined : a[++x]

// 假如为Ture，右侧永不执行

由于短路的机制，使用delete运算符时，如果为true，则无法执行。

二、括号影响

const name = (data?.person).name
// 不管data是否为空，.name一定会执行，所以不推荐使用链运算符的时候使用括号

三、右侧不能是十进制数值

这是为了兼容三元与运算符。a ? .3 : 0,如果按照?.作为链运算符的话，就会冲突到

四、禁止场合

1、禁止在构造函数（new）的时候使用

2、？.右侧有模板字符串``

3、?.左侧是super

4、?.用于赋值运算的左侧。（右侧可）

 

null 判断运算符？？

业务场景：

设置变量默认值的时候，正常使用||进行赋值。

const name = data.name || 'tom'

原意是data,name为空，则使用tom这个默认值，但是如果data.name为false或者0, 默认值也会生效

 const name = data.name ?? 'tom' 

使用??来处理，则data.name必须是null或者undefined时，才会使用默认值