前端 =＞ 新增特新和语法 双问号操作符 可选链操作符 稀有域 自定义元素

双问号操作符 Nullish Coalescing

• 双问号操作符（??），也被称作空值合并运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。
  这里简单看一下用法：

const foo = null ?? 'default string';
console.log(foo); // "default string"

可能有人会问 ?? 和 || 有什么区别呢？

?? 的左侧只判断两种情况：null 和 undefined，而 || 的左侧只要是假值（包括'' 和 0）都会返回右侧的值。Show the Code 就完事儿了：
const number = 0;
console.log(number || 100); // 100
console.log(number ?? 100); // 0

• 有 45% 的开发者已经用过了这个新语法，而有 23.7% 的开发者还没听过… 还不了解的朋友赶紧了解起来啦~

可选链操作符 Optional Chaining

• 可选链操作符（?.）允许读取位于对象的深处的属性的值，而不用担心其中的每个引用是否有效。
  用法很简单：

const a = {
  b: {
    c: 'hello world'
  }
};

console.log(a?.b?.c); // hello world

• 有 66.7% 的朋友已经用过了这个语法，还有 11.7% 的开发者没听过。
  这个太好用了好吗，没用过的朋友赶紧用起来。
• 你再也不用为了在 a 对象中去读取一个深层值而通过繁杂的 if(a && a.b && a.b.c) 判断去避免报错，也再也不用为了取个值去引一个 lodash 的方法了。

稀有域 Private Fields

• 私有域，这个不多介绍了，现在争论比较大。我也不太喜欢这个语法。。感兴趣的朋友可以自己在 MDN 上了解一下。

数据结构

• 这里就提一个 BigInt 这个基本数据类型，其它的 Map/Set/… 可以在 Features/data-structures[4] 看。
  BigInt

BigInt 是一个基本数据类型，提供了一个大于 253 - 1 的整数，可以表示任意大的整数。

浏览器原生能力

• 这里挑了 3 个未来应该会被大量使用的原生能力看了一下：Fetch、Custom Elements 和 Shadow DOM。
  Fetch
• 原生的请求，已经有绝大数的开发者都已经使用过了。

自定义元素 Custom Elements

• 自定义元素，顾名思义就是用户可以自定义 HTML 元素，通过 CustomElementRegistry 的 define 来定义，比如：

window.customElements.define('my-element', MyElement);

然后就可以直接通过 <my-element /> 使用了。

目前对于这个能力，开发者了解情况基本各占比 30%。

Shadow DOM

• Web Components 一个非常重要的特性，可以将结构、样式封装在组件内部，与页面上其它代码隔离，这个特性就是通过 Shadow DOM 实现。
  图片
  目前没用过的人还是占了绝大多数，想必未来的某一刻，在 shadow DOM 上应该会有很多的关注度。