链判断运算符 ?.
业务场景:
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
上面代码使用了?.
运算符,直接在链式调用的时候判断,左侧的对象是否为null
或undefined
。如果是的,就不再往下运算,而是返回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时,才会使用默认值