js ?. 可选链

?. 可选链

当位于 ?. 前面的值为 undefined 或 null 时，会立即阻止代码的执，返回undefined

一、 基本用法：

使用?.可选链访问data.name属性即使对象不存在也不会报错

let obj = {}
console.log(obj.data ?. name) // undefined

如果使用传统的写法下面代码将会报错

let obj = {}
console.log(obj.data.name) // Uncaught TypeError:

二、其他用法

上面说到，在可选链中 ?. 前面的部分值为 null 或 undefined 时，会立即停止执行。
所以，如果在其后面如果有函数的调用，或者其他操作，都不会执行。

let userInfo = null;
userInfo ?. getData()
function getData(){ console.log('1111')  } // 不会执行

?. 可以与 delete 操作符共用

let paging = {
  page: 1,
  limit: 10,
  loadMore: true
}
delete paging ?. loadMore
console.log(paging) // {limit: 10, page: 1}

三、注意事项

• 位于 ?. 前的变量必须被显示声明，如果 obj 这个变量根本没有被声明，那么 obj?.data 将会触发一个错误

  console.log(paging ?. page)
  // Uncaught ReferenceError: paging is not defined
  

• 使用 ?. 可以进行删除和读取操作，但是不能进行赋值操作

  let paging = {}
  paging ?. page = 1 // Uncaught SyntaxError
  

原文地址：https://blog.xiaobaicai.fun/2022/09/13/js-%e5%8f%af%e9%80%89%e9%93%be.html