记录–不要再滥用可选链运算符(?.)啦！

const userName = data?.items?.[0]?.user?.name

const onClick = () => {     const user = props.data?.items?.[0]?.user     if (user) {         // use user to do something     } }

已这行代码为例，有个bug现象是点击按钮没反应，维护开发看到这块代码，就会想这一串链式属性里，是不是有可能有空值，所以导致了user是空值，没走进if里导致没反应。然后就继续分析上层组件props传输代码，看data值从哪儿传来的，看是不是哪块代码导致data或items空值了。。。

其实呢？从外部传过来的这一串属性里不会有空值的情况，导致bug问题根本不在这儿。

const user = props.data.items[0].user

那把?.都去掉呢？维护开发追踪问题看到这行代码，data items 这些属性肯定不能是空值，不然console就抛错了，但是bug现象里并没有抛错，所以只需要检查user能不能是空值就行了，很容易就排除了很多情况。

总结就是：给代码维护人员带来了很多分析代码的干扰，代码可读性和维护性都很差。

2. 隐式过滤了异常

api.get(...).then(result => {     const id = result?.id     // use id to do something })

api.get(...).then(result => {     const id = result.id     // use id to do something })

把?.去掉呢？如果api返回值有问题，这里会立即抛错，后面的流程也就不能进行下去了，无论开发还是生产环境都能在console里快速定位问题，即使是压缩混淆的也能从error看出一二，或者在一些前端监控程序里也能监听到。

其实这种现象跟 try catch 里不加 throw 类似，把隐式异常错误完全给过滤掉了，比如下面例子：

// 这个try本意是处理api请求异常 try {     const data = getSaveData() // 这段js逻辑也在try里，所以如果这个方法内部抛错了，页面上就没任何反应，很难追踪问题     const result = await api.post(url, data)     // result 逻辑处理 } catch (e) {     // 好点的给弹个框，打个log，甚至有的啥都不处理 }

// react class component const name = this.state?.name // 不需要?.  // react hooks const [items, setItems] = useState([]) items?.map(...) // 如果setItems没有赋值空值情况，则不需要?. setItems?.([]) // 不需要?.

const item1 = obj?.item1 // 不需要?. console.log(item1.name)

当然，写代码时还得多想一下属性是否可能是空值，会一定程度的影响开发效率，也一定有开发会觉得很烦，不理解，无脑写?.多容易啊，但是我从另外两个角度分析下：

1. 我觉得一个合格的开发应该对自己的代码逻辑很熟悉，应该有责任知道哪些值可能是空值，哪些不可能是空值（并不是说所有，也有大部分了），否则就是对自己的代码了解很少，觉得代码能跑就行，代码质量自然就低。
2. 想想在这个新特性出来之前大家是怎么写的，会对每个变量和属性都加if非空判断或者用逻辑与(&&)吗？不会吧。

总结

本文以一个 code reviewer 角度，分析了 可选链运算符(?.) 特性的滥用情况，以及“正确使用方式”，只是代表我本人的看法，欢迎大佬参与讨论，无条件接受任何反驳。

滥用的缺点：

1. 可读性、维护性：给代码维护人员带来了很多分析代码的干扰，代码可读性和维护性都很差。
2. 隐式过滤了异常：把异常给隐式过滤掉了，导致不能快速定位问题。
3. 编译后代码冗余。
4. 护眼：一串?.看着难受，特别是以一个code reviewer 角度看。

“正确用法”：

1. 避免盲目用，滥用，有个点儿就加问号，特别是在一个比较长的链式代码里每个属性后面都加。
2. 只有可能是空值，而且业务逻辑中有空值的情况，就用；其它情况尽量不要用。