一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。
本题难度：⭐
答：
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。
当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。
你是否经常遇到过这种问题，后端给你返回的数据本来是一个对象，但是它给你返回了一个默认值 null
const res = {
data: {
userInfo: null
}
}
const userInfo = res.data.userInfo
console.log(userInfo.name)
比如上面代码示例中，访问 userInfo.name，就报错了。
然后 js 代码被阻断，整个页面白屏了，然后用户反馈系统崩溃了，然后领导开始疯狂批斗你。
遇到这样的线上 bug，着实令人很无语，充分相信了后端返回的数据，结果后端捅了你一刀。
要解决这个问题，可以这么写：
const res = {
data: {
userInfo: null
}
}
const userInfo = res.data.userInfo
console.log(userInfo && userInfo.name) // 先判断一下有没有 userInfo，有才执行后面逻辑
但是后端返回的数据总会出其不意，有时候 res 可能为 null ，res.data 也可能为 null，为了防止可能出现的bug，你可能会写出类似的代码：
const userName = res && res.data && res.data.userInfo && res.data.userInfo.userName
这样的代码写出来着实非常令人难受😣。
其实，JS 有解决这种问题的方案，可以用可选链操作符( ?. )来解决类似问题。
const res = {
data: {
userInfo: null
}
}
const userInfo = res.data.userInfo
console.log(userInfo?.name) //注意这里的写法
遇到多层的情况，每一层都可以加可选链操作符：
const userName = res?.data?.userInfo?.userName
去 caniuse 上查一下兼容性，chrome >= 80 才行，不是很好。
但是现在的前端项目一般都引了 babel，去 babel 上测试一下，一般比较标准化的配置是支持的，所以兼容性问题不是很担心。
结尾
可选链的写法确实非常 nice 的，但是有时候忘了写，还是可能会中招，要根治这样的问题，还是得用 TS。
推荐一篇我的文章，可以由浅入深地学习 TS。
「1.9W字总结」一份通俗易懂的 TS 教程，入门 + 实战！
阿林水平有限，文中如果有错误或表达不当的地方，非常欢迎在评论区指出，感谢～
如果我的文章对你有帮助，你的👍就是对我的最大支持^_^
你也可以关注《前端每日一问》这个专栏，防止失联哦～
我是阿林，输出洞见技术，再会！
上一篇：
下一篇：
