ECMAScript2020 可选链操作符(?.)的应用

一、前言

    const programmer = {
        user: 'lin',
        department: {
            name: '技术部',
            getSite() {
                return '***'
            }
        }
    }

在以前的语法中,想要获得深层次的属性或方法,如果不做前置校验的话,那么就很容易出现这种错误↓ 这可能会导致你整个应用奔溃…

在这里插入图片描述

二、如果是你的话会以怎样的写法进行判断呢?

可能是这样的…

const site = programmer && programmer.department &&  programmer.department.getSite && programmer.department.getSite()
console.log(site);

也可能是这样的…

const site = programmer ? (programmer.department ? (programmer.department.getSite ? (programmer.department.getSite()) : '') : '') : ''
console.log(site);

显然,这些写法并不是很优雅,而且可读性也差。

那么还有怎样优雅的写法?

三、可选链操作符(?.)的应用

让我们来看看MDN是怎么描述的
在这里插入图片描述
那么当我们使用了可选链操作符,之前的代码就可以写成这样了:

    const site = programmer?.department?.getSite?.()
    console.log(site);

四、总结

可以看出,在探索一个对象的内容时,如果不能确定哪些属性必定存在,可选链操作符也是很有帮助的,而且还可以大量简化类似繁琐的前置校验操作,更加安全。


如果您也正在学习前端的路上,记得关注该博主,学习更多关于前端的知识~

博主主页 Poetic Code

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页