JavaScript里如何避免使用可能为null对象的属性

在JavaScript里,访问一个外面传入的对象的属性前,先判断这个对象是否为null或者undefined会是个很好的习惯。

勤快人的写法

function processData(data) {
    if (!data) {
        return; // 或者抛异常,等等...
    }
    
    if (data.user && data.user.address) {
        const city = data.user.address.city;
        // 继续其他的代码...
    }
}

一看这个代码,就知道写代码的人很严谨,为了获取city,把整个属性链上的对象都判断了一下是否为空,可以有效地防止程序出错。

有点懒的人的写法

但是,上面的写法有点要人太勤快了点,要敲好多代码来判断,并且一堆的if语句,看着不怎么爽。那怎么省事呢?我有lodash啊!这么写:

const _ = require('lodash');

function processData(data) {
    const city = _.get(data, 'user.address.city');
    // 继续其他的代码...
}

看起来是简单了很多,也少了if,只要用了lodash这个瑞士军刀,那么核心一行代码就搞定了!

真正懒人的写法

等等,上面“有点懒”的同学啊,好像这种写法还是有点那么不爽,到底哪里不爽呢?啊,发现了,这个属性链是个字符串类型的嘛,完全没法用IDE提供的智能提示了,还得靠自己手敲,并且敲正确才行。

怎么写才更好呢?用?.操作符:

function processData(data) {
    const city = data?.user?.address?.city;
    // 继续其他的代码...
}

嗯,这下子更简单了,连lodash都不用了,直接用"?."操作符就搞定了!

看起来很神奇,但是“?.”操作符算是什么东西呢?

我们来看MDN的解释:

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined

想进一步深入了解这个操作符,那么可以打开MDN的链接来阅读:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining

这个语法,最新的浏览器和Node.js里面都有实现,因此可以直接用,或者写好之后通过Babel编译就可以放心用了。