ES2020: 可选链式操作符(?.)

我心飞翔 分类:javascript

定义

可选链式操作符(?.)允许读取位于连接对象链深处的属性值, 而不必明确验证链中的每个引用是否有效。

咳咳咳, 很难听懂的样子, 翻译如下:

该操作符跟.链式操作符类似, 不同之处在于引用为null或者undefined的情况下不会引起报错, 不存在返回值是undefined.

还是有点点难理解, 那么请往下👇看!

优势

    在查询具有多个层级的对象时、不再需要进行冗余的前置校验.

链式操作符(.)

弊端: 当需要访问嵌套在对象内部好几层的属性时、会需要做大量类似繁琐的前置校验操作。
目的: 为避免报错、在访问obj.info.isNotUse、要把整obj.info既不是null也不是undefined。

const obj = null
let status = obj && obj.info && obj.info.isNotUse
console.log(status,'运算结果') // null 运算结果
 

紧接着运行下如下代码:

const obj = null
let status  = obj.info.isNotUse
console.log(status,'运算结果') // error
 

我们会发现:若不先确认obj跟obj.info的值是非null, 那么经常会出现如下错误:

image.png

可选链式操作符(?.)

让我们看看有了可选链式操作符、是不是能简化上述繁琐的前置操作:

const obj = null
let status  = obj?.info?.isNotUse
console.log(status,'运算结果') // null 运算结果
 

优点: 通过可选链式操作符(?.), 在访问obj.info.xx时, 不需要再明确校验obj.info的状态了, 会通过短路计算获取到最终结果:

若该obj或者obj.info为null/undefined, 则会直接返回undefined;

传送门

最近在学习ES2020的新特性, 下面是同系列文章, 感兴趣的可戳!

ES2020: 空值合并运算符?: juejin.cn/post/694059…

转载于掘金

回复

我来回复
  • 暂无回复内容