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