今天看到同事在分享可选链的使用，这个可选链是ES2020中的新特性：

下面记录一下ES2020的新特性：

1.链合并运算符

如果读取对象内部的某个属性，往往需要判断一下该对象是否存在，比如获取list.info.base.userName的值
错误写法：list.info.base.userName，因为如果有一层属性不存在，则会报错

正确写法：

list&&list.info&&list.info.userName

如果使用链合并运算符，则可以简写成下面的形式了
list?.info?.userName

链合并运算符的三种用法：

1.1 obj?.prop——对象属性

1.2 obj?.[expr]——对象属性

1.3 function?.(...args)——函数或对象方法的调用

function register(a,b){console.log(a,b,'传参');
}
this.register?.(1,2);//如果register函数存在的话，则执行此函数，并且可传参

使用确实很方便，但是需要安装一下babel的插件才可以：
可选链babel插件链接：https://babeljs.io/docs/en/babel-plugin-syntax-optional-chaining

2.Null判断运算符

属性值为null或undefined时，指定默认值
读取对象属性的时候，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值

const userName = list?.userName||'用户名'

||或运算符表达的意思是左侧表达式为null、undefined、``、false、0，右侧表达式都会生效，但我们想要的只是在null或undefined的时候生效，此时可以使用??运算符。只有当运算符左侧的值为null或undefined时，才会返回右侧的值。
与可选链判断运算符?.配合使用：
const userName = list?.info?.base?.userName??'用户名'

与&&、||运算符一起使用时，需要用括号来表明优先级，要不会报错。优先执行括号括起来的部分。

这个运算符的使用，还是需要安装babel插件：
null判断运算符的babel插件链接：https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator

3.在babel.config.js中添加plugin插件

上面的babel插件安装完成后，需要在babel.config.js中注册一下才可以使用：

{"plugins": ["@babel/plugin-proposal-export-namespace-from"]
}