ECMAScript 2024(ES11) 的新特性总结，web前端开发项目经验

let num = number ?? 222

而且该运算符也支持短路特性：

const x = a ?? getDefaultValue()

// 当 a 不为 undefined 或 null 时，getDefaultValue 方法不会被执行

但需要注意一点，该运算符不能与 AND 或 OR 运算符共用，否则会抛出语法异常：

a && b ?? “default” // SyntaxError

这种代码的歧义比较严重，在不同人的理解中，可能有的人觉得按(a && b) ?? "default"运行是合理的，而另外一些人却觉得按a && (b ?? "default")运行才对，因此在设计该运算符时就干脆通过语法上的约束来避免了这种情况。如果确实需要在同一个表达式中同时使用它们，那么使用括号加以区分即可：

(a && b) ?? “default”

这个操作符的主要设计目的是为了给可选链操作符提供一个补充运算符，因此通常是和可选链操作符一起使用的：

const x = a?.b ?? 0;

下面介绍下ES11新增的可选链操作符（?.）

3、可选链接

---

当我们需要尝试访问某个对象中的属性或方法而又不确定该对象是否存在时，该语法可以极大的简化我们的代码，比如下面这种情况：

const el = document.querySelector(“.class-a”)

const height = el.clientHeight

当我们并不知道页面中是否真的有一个类名为 class-a 的元素，因此在访问clientHeight之前为了防止bug产生需要先进行一些判断：

const height = el ? el.clientHeight : undefined

上面的写法虽然可以实现，但是的确有人会觉得麻烦，而使用「可选链操作符」 ，就可以将代码简化成如下形式：

const height = el?.clientHeight

下面介绍常用的使用场景：

属性访问

需要获取某个对象中的属性，就都可以使用该语法：

a?.b

a?.[x]

上面的代码中，如果 a 为undefined或null，则表达式会立即返回undefined，否则返回所访问属性的值。也就是说，它们与下面这段代码是等价的：

a == null ? undefined : a.b

a == null ? undefined : a[x]

方法调用

在尝试调用某个方法时，也可以使用该语法：

a?.()

同样是如果 a 为undefined或null，则返回undefined，否则将调用该方法。不过需要额外注意的是，该操作符并不会判断 a 是否是函数类型，因此如果 a 是一个其它类型的值，那么这段代码依然会在运行时抛出异常。

访问深层次属性

在访问某个对象较深层级的属性时，也可以串联使用该操作符：

a?.b?.[0]?.()?.d

可能有人会懒得先去判断是否真的有必要，就给访问链路中的每个属性都加上该操作符。但类似上面代码中所展示的那样，这种代码可读性比较差。而且若真的有一个应当存在的对象因为某些 bug 导致它没有存在，那么在访问它时就应当是抛出异常，这样可以及时发现问题，而不是使它被隐藏起来。建议只在必要的时候才使用可选链操作符。

4、BigInt

---

在 ES 中，所有 Number 类型的值都使用 64 位浮点数格式存储，因此 Number 类型可以有效表示的最大整数为 2^53。而使用新的 BigInt 类型，可以操作任意精度的整数。

有两种使用方式：1、在数字字面量的后面添加后缀n