JavaScript 作为一门现代化的编程语言，经常会有新的版本发布，其中包含了许多新特性和语法糖，以便开发者更好地使用和开发。ES11 和 ES12 是 JavaScript 的最新版本，它们提供了许多新的特性和改进，让我们更加方便地编写代码。在本文中，我们将深入探讨 ES11 和 ES12 的新特性，以便您能够更好地掌握它们并在项目中使用它们。
ES11 新特性
可选链操作符
在 JavaScript 代码中，经常会出现层层嵌套的对象或数组，当我们需要获取其中的某个属性或元素时，就需要使用多个 . 或 [] 运算符。这种方式不仅繁琐，而且容易出错。ES11 引入了可选链操作符 ?.，它可以简化这种操作。
示例代码：
----- ---- - -
----- ------
-------- -
----- ---- ------
------- ----------
-
--
----- ---- - -------------------在上面的代码中，我们使用了可选链操作符 ?. 来获取 user.address.city，如果 user.address 不存在，那么 city 将会是 undefined。
空值合并操作符
在 JavaScript 中，当我们需要获取某个对象的属性值时，如果该属性不存在，那么返回值将是 undefined。ES11 引入了空值合并操作符 ??，它可以用来处理这种情况。
示例代码：
----- ---- - - ----- ------ ---- ---- -- ----- --- - -------- -- ---
在上面的代码中，我们使用了空值合并操作符 ?? 来获取 user.age 的值，如果 user.age 不存在或者为 null，那么 age 将会是 18。
全局对象的 BigInt 类型
在 JavaScript 中，整数的位数是有限制的，当超过 Number.MAX_SAFE_INTEGER（即 2^53 - 1）时，就会出现精度丢失的问题。ES11 引入了 BigInt 类型，它可以用来表示任意大小的整数。
示例代码：
----- --- - ------------------------ ----- ------ - ----------- - ----------
在上面的代码中，我们使用了 BigInt 类型来表示超过 Number.MAX_SAFE_INTEGER 的整数值，并使用 BigInt() 函数将 max 转换为 BigInt 类型。
ES12 新特性
Promise.any()
在 JavaScript 中，Promise.all() 可以用来等待多个 Promise 对象全部完成，但是如果其中有一个 Promise 对象被拒绝了，那么整个操作就会失败。ES12 引入了 Promise.any()，它可以用来等待多个 Promise 对象中的任意一个完成。
示例代码：
----- -------- - --------------------- ---- ----- -------- - --- --------------- -- ------------------- ----- ------- ----- ----- -------- - --- --------------- -- ------------------- ----- ------- ----- ---------------------- --------- ---------- ------------ -- -------------------- ------------ -- --------------------
在上面的代码中，我们使用了 Promise.any() 来等待多个 Promise 对象中的任意一个完成，如果其中有一个 Promise 对象被解决了，那么整个操作就会成功。
String.prototype.matchAll()
在 JavaScript 中，String.prototype.match() 可以用来匹配字符串中的某个模式，并返回匹配的结果。ES12 引入了 String.prototype.matchAll()，它可以用来匹配字符串中的所有模式，并返回所有匹配的结果。
示例代码：
----- --- - ------- -------- ----- ------- - ------- ----- ------- - ---------------------- --- ------ ----- -- -------- - ------------------- -
在上面的代码中，我们使用了 String.prototype.matchAll() 来匹配字符串中的所有单词，并使用 for...of 循环遍历所有匹配结果。
WeakRef 和 Finalizer
在 JavaScript 中，垃圾回收机制会自动回收不再使用的对象，但是它无法回收一些持有大量资源的对象，比如 DOM 元素。ES12 引入了 WeakRef 和 Finalizer，它们可以用来处理这种情况。
示例代码：
----- --------------- -
------------- -
--------- - --- -------------------------
-
-
--- --- - --- ------------------
--- --- - --- -------------
--- --------- - -- -- -
------------------- --- ---- ------- ------------
--
--- ------- - --- --------------------------------
--------------------- --- ---------
--- - -----在上面的代码中，我们使用了 WeakRef 来创建一个弱引用对象 ref，它引用了一个 ExpensiveObject 对象。我们还使用了 Finalizer 来注册 ExpensiveObject 对象，并在对象被垃圾回收时调用 finalizer 函数。
总结
本文介绍了 ES11 和 ES12 的新特性，包括可选链操作符、空值合并操作符、全局对象的 BigInt 类型、Promise.any()、String.prototype.matchAll()、WeakRef 和 Finalizer。这些新特性可以让我们更加方便地编写代码，提高开发效率。如果您是一名前端开发者，那么掌握这些新特性一定会对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65cd6c3fadd4f0e0ff6a8398