vue项目中使用可选链 ( ?. )和双问号 ( ??）详解

1.安装插件

vue安装插件 @babel/plugin-proposal-optional-chaining

npm install --save-dev @babel/plugin-proposal-optional-chaining

2.配置babel

.babelrc 或者 babel.config.js 文件添加 plugins 配置

{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

3.使用

配置完了,就可以在项目中使用可选链 ( ?. ) 和双问号 ( ??)

3.1 ?. 的使用 和 ?? 的使用

let obj = {}
let a = obj ?. user?. name ?? '张三'     
console.log(a)  // 张三

解析：创建了一个 obj 对象，user?. 判断是否存在 user 对象，如果存在取 user.name 属性，如果不存在则??设置默认值张三

let obj = {
    user: {
        name:'xiaoming'
    }
}
let a = obj ?. user?. name ?? '小明'
console.log(a)  // 小明

解析：创建了一个 obj 对象，user?. 判断是否存在 user 对象，如果存在取 user.name 属性，如果不存在则`?? 设置默认值张三，如果存在值则取对象定义的name值 xiaoming

4. 作用

解决了数据结构复杂，多层级的数据结构时，如果直接取值数据并没有改对象或者属性时。页面报错阻塞显示问题