支持 es6 可选链(?.)

前言

在vue项目中对象会有空指针的问题，可以使用 es6 的 ?.（可选链）语法，一行简单的配置可以简化很多不必要的判断，用了以后就回不去了。

解决方法

只需要在项目的 babel 配置中增加 plugin-proposal-optional-chaining 和 plugin-proposal-nullish-coalescing-operator 两个插件即可。

在命令行执行命令

npm install @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator --save-dev
复制代码

在 babel.config.js 文件配置插件

module.exports = {
  // 其余配置...
  plugins: [
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator',
  ],
};
复制代码

使用

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

let obj=null;
console.log(obj?.name); //undefined

let obj1={
    name:'aa'
};
console.log(obj1?.name);//aa
console.log(obj?.age);//undefined

结语

可选链（?.）空指针的情况下返回的是undefined,如果是其它的判断情况下请注意使用