可选链?.、双问号??的应用以及配置

可选链目前在绝大多数浏览器的新版本已经支持，但是千万不要认为本地开发没问题就肆无忌惮的使用可选链和双问号，因为针对于IE以及旧版本的浏览器，需要做一些配置才能使用可选链和双选链，否则会带来一些问题；

@vue/cli-plugin-babel 4.5.0以及以上版本默认集成了可选链、双问号的编译插件，不需要再额外配置。

可选链和双问号中文文档以及浏览器兼容性情况

可选链： developer.mozilla.org/zh-CN/docs/…

双问号： developer.mozilla.org/zh-CN/docs/…

插件官方文档

可选链插件文档：babel.docschina.org/docs/en/7.1…

双问号插件文档：babeljs.io/docs/en/bab…

如何使用

可选链

obj1是一个后端返回的数据，不清楚obj1的具体属性，为了防止JavaScript异常报错，阻塞代码执行， 我们可能会这样写 

console.log(obj1 && obj1.name && obj1.name.code);

用可选链就可以这样写

 console.log(obj1?.name?.code);

作用：

• 让我们的代码更整洁以及有更好的可读性；

• 用可选链读取对象的属性，可以很大程度的增强代码的健壮性；

双问号

实现一个逻辑，判断一个变量是否为空，为空的话给与一个默认值，很多时候我们会这样写

let a = null;

let b = a || 1;

如果a为0、false、null、undefined的话，这里得出b的值就会为1；

let a = null;

let b = a ?? 1;

 这种写法，只有a为null或者undefined时，b才会为1；

如何配置？

1、在babel的plugins里引入 @babel/plugin-proposal-optional-chaining和@babel/plugin-proposal-nullish-coalescing-operator

//推荐方式1 在.babelrc或者babel.config.js中这加入2个插件 {
 "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining"
  ]
}  

// 方式2 在webapck.config.js中配置module: 
{  
rules: 
[    
{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {        loader: 'babel-loader',
        options: {
            ...
          plugins: [
              "@babel/plugin-proposal-nullish-coalescing-operator",
               "@babel/plugin-proposal-optional-chaining"
           ]
        }
      }
    }
  ]
}