js 可选链操作符

我想在开发的时候，很多人都应该都写过这样的js判断：

let arr = res && res.data && res.data.list
if(res.data.type){
    
    ...}

是不是非常冗余但又不得不写，今天介绍的新语法就是为了解决这种问题的

介绍下可选链操作符 ?.

先配置chaining

// 安装依赖  npm install  @babel/plugin-proposal-optional-chaining -S
// @babel/plugin-proposal-nullish-coalescing-operator -S
// 在babel.config.js中  的 plugins中添加 "@babel/plugin-proposal-optional-chaining"

module.exports = {
    
    
  plugins: [
    '@babel/plugin-proposal-optional-chaining',  //可选链 ?.
    '@babel/plugin-proposal-nullish-coalescing-operator'  //空值合并 ??
  ]
}

let arr = res?.data?.list
if(res?.data?.list){
    
    ...}

介绍下可选链操作符 ??

要是想设置默认值,以前我们是这么写的

let arr = res && res.data || []

现在可以这样

let arr = res && res?.data ?? []

这个??的意思是当左边的值为null或undefined的时候 就取??右边的值 。

来一个长的

let arr = this.businessInfo?.typeInfo?.data?.length ?? 0

作用就是判断这个对象（this.businessInfo）下的（typeInfo）下的（data）下的（length）是否为null或者undefined，当其中一链为null或者undefined时就返回undefined，这样即使中间缺少一个属性也不会报错，双问号后面接的就是默认值