JavaScript可选链操作符

前言：

最近面试遇到知识盲区面试题:let arr = res?.data?.list用了什么语法？含义是什么？

博主立刻启动大脑进行收录 与大家交流分享 

借鉴于mdn文档：可选链运算符（?.） - JavaScript | MDN

什么是可选链操作符：

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

云里雾里吗？没关系 我们用代码表达

const obj = {
   province:{
     city:{
       area1:"朝阳区",
       area2:"海淀区"
     }
   }
}
//当我们需要拿到area1时 需要链式调用
console.log(obj.province.city.area1); //朝阳区

但这只是理想状态 有时我们可能没有city这个属性 这时候再调用city代码就会报错

const obj = {
   province:{
  
   }
}

console.log(obj.province.city.area1); //错误

这种情况在es5我们是这样解决
 

const obj = {
   province:{
     city:{
       area1:"朝阳区",
       area2:"海淀区"
     }
   }
}

console.log(obj.province && obj.province.city &&  obj.province.city.area1); //朝阳区

//当city删除，查询不到返回underfined

但是代码显的很臃肿 读写比较麻烦 这时可选链闪亮登场

const obj = {
   province:{
     city:{
       area1:"朝阳区",
       area2:"海淀区"
     }
   }
}

console.log(obj?.province?.city?.area1); //朝阳区
//查询到返回值 当有一层查询不到返回underfined

//当你不想返回underfined 可以使用 ||
console.log(obj?.province?.city?.area3 || "西城区"); //朝阳区
console.log("注意这里我调用的是-->area3")

解读：首先代码会查询obj下面province存在与否？找到继续往下找city有无 有一层找不到返回underfined

通过连接的对象的引用或函数可能是 undefined 或 null 时，可选链运算符提供了一种方法来简化被连接对象的值访问。

参考资料

MDN Web Docs

最后

 以上这段面试题便有了解答 但其实可选链操作符还可以与很多有关联操作

可以锁定mdn文档进行学习

博主前端菜鸟，说法比较浅显 如有不足请前辈指正，交流学习