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编译就可以放心用了。