ECMAScript2020 可选链操作符（?.）的应用

忘是亡心i 2022-11-20 11:00 298阅读 0赞

## 一、前言 ##

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

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

![在这里插入图片描述][20201028175305546.png_pic_center]

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

可能是这样的…

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是怎么描述的  
![在这里插入图片描述][20201028175815704.png_pic_center]  
那么当我们使用了可选链操作符，之前的代码就可以写成这样了：

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

## 四、总结 ##

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

--------------------

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

[博主主页 Poetic Code][Poetic Code]

[20201028175305546.png_pic_center]: /images/20221120/31d6a117fa1d4b04bd8c2d5faaccc2bf.png
[20201028175815704.png_pic_center]: /images/20221120/d637dc7d9e2f45d8bc651a87a974f52a.png
[Poetic Code]: https://blog.csdn.net/weixin_44253336