前言

在开发过程中拿到一个内嵌比较深的值需要做很多的判断，来保证没有数据而报错，比如：

const obj = {
            a: {
                b: {
                    c:"1"
                }
            }
        }
//取c
const cValue = (obj && obj.a && obj.a.b && obj.a.b.c) || ''

可选链操作符是ES2020中推出的新语法，直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。我们不再需要校验当前属性的类型去尝试访问子属性。

const cValue = obj?.a?.b?.c  //1 

在vue项目中使用可选链操作符语法时会出现编译报错unexpected token (.)的情况，需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中。

安装

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

安装过程中可能会出现"源文本中出现无法识别的标记"报错，是由于node版本的问题导致需要使用引号将插件名称包裹。

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

配置

在babel.config.js中添加:

module.exports = {
  presets: ['@vue/app'],
  plugins: ["@babel/plugin-proposal-optional-chaining"]
}

PS：如果以上都完成，还是报错，可以试着更新浏览器版本