不要再滥用可选链运算符(?.)啦！
前言
之前整理过 整理下最近做的产品里 比较典型的代码规范问题，里面有一个关于可选链运算符(?.)的规范，当时只是提了一下，今天详细说下想法，欢迎大佬参与讨论。 可选链运算符(?.)，大家都很熟悉了，直接看个例子：const result = obj?.a?.b?.c?.d
很简单例子，上面代码?前面的属性如果是空值（null或undefined），则result值是undefined，反之如果都不是空值，则会返回最后一个d属性值。
本文不是讲解这种语法的用法，主要是想分析下日常开发中，这种语法 滥用、乱用 的问题。
滥用、乱用
最近在code review一个公司项目代码，发现代码里用到的可选链运算符，很多滥用，用的很无脑，经常遇到这种代码：
const userName = data?.items?.[0]?.user?.name
↑ 不管对象以及属性有没有可能是空值，无脑加上?.就完了。
// react class component
const name = this.state?.name
// react hooks
const [items, setItems] = useState([])
items?.map(...)
setItems?.([]) // 真有这么写的
↑ React框架下，this.state 值不可能是空值，初始化以及set的值都是数组，都无脑加上?.
const item1 = obj?.item1
console.log(item1.name)
↑ 第一行代码说明obj或item1可能是空值，但第二行也明显说明不可能是空值，否则依然会抛错，第一行的?.也就没意义了。
if (obj?.item1?.item2) {
const item2 = obj?.item1?.item2
const name = obj?.item1?.item2?.name
}
↑ if 里已经判断了非空了，内部就没必要判断非空了。
问题、缺点
如果不考虑 ?. 使用的必要性，无脑滥用其实也没问题，不会影响功能，优点也很多：
不用考虑是不是非空，每个变量或属性后面加 ?. 就完了。
由于不用思考，开发效率高。
不会有空引用错误，不会有页面点点就没反应或弹错问题。
但是问题和缺点也很明显，而且也会很严重。分两点分析下：
可读性、维护性：给代码维护人员带来了很多分析代码的干扰，代码可读性和维护性都很差。
隐式过滤了异常：把异常给隐式过滤掉了，导致不能快速定位问题。
编译后代码冗余。
护眼：一串?.看着难受，特别是以一个code reviewer 角度看。
1. 可读性、维护性
可读性和维护性其实是一回事，都是指不是源代码作者的开发维护人员，在捋这块代码逻辑、修改bug等情况时，处理问题的效率，代码写的好处理就快，写的烂就处理慢，很简单道理。
const onClick = () => {
const user = props.data?.items?.[0]?.user
if (user) {
// use user to do something
}
}const user = props.data.items[0].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
})// 这个try本意是处理api请求异常
try {
const data = getSaveData() // 这段js逻辑也在try里，所以如果这个方法内部抛错了，页面上就没任何反应，很难追踪问题
const result = await api.post(url, data)
// result 逻辑处理
} catch (e) {
// 好点的给弹个框，打个log，甚至有的啥都不处理
}总结就是：把异常给隐式过滤掉了，导致不能快速定位问题。
3. 编译后代码冗余
如果代码是ts，并且编译目标是ES2016，编译后代码会很长。可以看下 www.typescriptlang.org/play 效果。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
