可选链操作符&空值合并运算符

what is nullish value?

所谓的 nullish value 空值就两个：null 和 undefined 。

when to use optional chaining?

当我们访问对象的属性时，但是这个对象可能会为null或者undefined，此时会报上面的错误，针对这种情况，我们通常需要做一些防御性的措施：

const isShowReviews = clazz && clazz.top_reviews && clazz.top_reviews.length > 0;

这种写法虽然能够保证页面不会报错，但是写法非常的麻烦，目前只有两层，如果访问对象的属性有很多层，且不是要写长长的一串。
可选链操作符 ?. 就是可以简化上面的写法：

const isShowReviews = clazz?.top_reviews?.length > 0;

可选链操作符 ?. 允许轻松访问嵌套对象的属性，而不必明确验证链中的每个引用是否有效,在引用为 nullish value 的情况下不会引起错误,而是返回 undefined。

Default with nullish coalescing operator

空值合并运算符 ?? 处理 undefined 或 null，并将它们置为特定值。

const undefinedValue = undefined;
const nullValue = null;
const value = 'Hello';
undefinedValue ?? 'Nothing'; // => 'Nothing'
nullValue ?? 'Nothing'; // => 'Nothing'
value   ?? 'Nothing'; // => 'Hello'

因为 可选链操作符?. 在发生短路时会返回 undefined，因此可以借助 空值合并运算符 ?? 为其默认值：

const starRating = teacher?.star_rating ?? 4;

polyfill

可选链操作符和空值合并运算符是比较新的语法，使用的时候一定要做polyfill,尤其在手机浏览器上，否则会报错导致页面空白。

// npm
npm install @babel/plugin-proposal-optional-chaining  --save-dev
npm install @babel/plugin-proposal-nullish-coalescing-operator --save-dev
// babel.config.js
plugins: [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
],

注：vue template模板里面不能使用可选链操作符和空值合并运算符号，即使做了polyfill

参考文献
tc39/proposal-optional-chaining
可选链操作符- JavaScript | MDN
How to Use JavaScript Optional Chaining