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

链判断运算符 ?. 

业务场景:

 1 // 假设data是个数组,如果data没有值,为undefinded,则直接复制会报错,因为没有length这个属性
 2 
 3 const dateCount = data.length // 报错
 4 
 5 // 正常的处理情况是,加个判断
 6 if (data) {
 7     const dateCount = data.length
 8 }
 9 
10 
11 // 使用链判断符,就可一步到位
12 const dataCount = data?.length  // data不存在时,直接返回undefined

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

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

1 const name = (data && data.person && data.person.name) || 'no name'
2 // 这样的判断机制非常麻烦
3 
4 // 使用链判断符
5 const name = data?.Person?.Name || 'no name'
6 // 非常精简

注意点:

一、短路

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, 默认值也会生效

 1 const name = data.name ?? 'tom' 

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

以梦为马
原文地址:https://www.cnblogs.com/lsAxy/p/12845462.html