?. 可选链

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

一、 基本用法:

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

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

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

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

二、其他用法

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

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