-
操作运算符：??
对应babel插件：@babel/plugin-proposal-nullish-coalescing-operator
方法介绍：当左侧操作数为 null 或 undefined 时，其返回右侧的操作数，否则返回左侧的操作数。与逻辑或 || 运算符不同的是，逻辑或会在左操作数为 假值 时返回右侧操作数，可能会遇到隐式类型转换造成意外情况（如左侧操作数为 ' ' 或 0 时）
const foo = null ?? 'default string'; console.log(foo); // "default string" const baz = 0 ?? 42; console.log(baz); // 0 const baz2 = 0 || 42; console.log(baz2); // 42安装介绍：
npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator使用介绍：
// babel.config.js { "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"] } -
操作运算符：?.
对应babel插件：@babel/plugin-proposal-optional-chaining
方法介绍：允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined
const obj = { foo: { bar: { baz: 42, }, }, }; const baz = obj?.foo?.bar?.baz; // 42 const safe = obj?.qux?.baz; // undefined(因为字段不存在，会返回undefined，而不会报错)小技巧：如果有个对象obj，需要在很多地方使用插值表达式去使用某个字段，如{{ obj.name }}、{{ obj.age }}，但是担心某个字段不存在会抛出错误，可以使用过滤器+?.操作符避免错误
<td>{{ obj.domainOut | dataExceptionHandler('name') }}</td> Vue.filter('dataExceptionHandler', (obj, attribute) => { return obj?.[attribute]; });安装介绍：
npm install --save-dev @babel/plugin-proposal-optional-chaining使用介绍：
// babel.config.js { "plugins": ["@babel/plugin-proposal-optional-chaining"] }
以上babel插件不能再vue组件的template部分使用，只能在script部分使用，即只能在js部分中使用，但是可以使用计算属性/过滤器进行取巧使用。
更多babel插件：https://www.babeljs.cn/docs/plugins
如有问题，请指出，接受批评。
QQ图片20210505195155.jpg
