随着 JavaScript 的不断发展，新版本的 ECMAScript 也在不断更新。ES11 和 ES12 是最新的两个版本，它们引入了许多新特性，包括一些非常实用的功能，可以让前端开发更加简单、高效和强大。在本文中，我们将详细介绍 ES11 和 ES12 的新特性，以及如何在你的 JavaScript 代码中使用它们。
ES11 新特性
可选链操作符
可选链操作符是一个非常实用的功能，它可以在访问对象属性时避免出现错误。在以前的版本中，如果你要访问一个对象的属性，但是这个对象可能不存在，你就需要使用一些条件语句来避免出现错误。但是现在，你可以使用可选链操作符来简化这个过程。
可选链操作符的语法如下：
----------------
例如，如果你要访问一个嵌套对象的属性，但是这个嵌套对象可能不存在，你可以这样写：
----- ---- - ----------------------------
如果 person、address、city 或者 name 中的任何一个属性不存在，name 就会被赋值为 undefined，而不会出现错误。
空值合并运算符
空值合并运算符是另一个非常实用的功能，它可以在值为 null 或 undefined 时提供一个默认值。在以前的版本中，你需要使用条件语句来检查一个值是否为 null 或 undefined，然后提供一个默认值。但是现在，你可以使用空值合并运算符来简化这个过程。
空值合并运算符的语法如下：
------ -- ------
例如，如果你要获取一个变量的值，但是这个变量可能为 null 或 undefined，你可以这样写：
----- ----- - ------ -- -------
如果 valueA 的值为 null 或 undefined，value 就会被赋值为 valueB。
Promise.allSettled
Promise.allSettled 是一个新的 Promise 方法，它可以在所有 Promise 对象都完成后返回一个数组，数组中包含每个 Promise 对象的状态和结果。在以前的版本中，Promise.all 只有在所有 Promise 对象都成功时才返回一个结果，如果有任何一个 Promise 对象失败，它就会抛出一个错误。但是现在，Promise.allSettled 可以返回所有 Promise 对象的状态和结果，无论它们是否成功。
Promise.allSettled 的语法如下：
----------------------------- --------- -----
例如，如果你有两个 Promise 对象，你可以这样使用 Promise.allSettled：
----- -------- - ---------- ---------- ----------------------------------------- -- - ---------------------- -- -------------------------- --------------- ---
String.prototype.matchAll
String.prototype.matchAll 是一个新的 String 方法，它可以返回一个迭代器，该迭代器包含所有与正则表达式匹配的子字符串及其捕获组。在以前的版本中，String.prototype.match 只能返回第一个匹配项。但是现在，你可以使用 String.prototype.matchAll 来获取所有匹配项。
String.prototype.matchAll 的语法如下：
-----------------------
例如，如果你要匹配一个字符串中的所有 email 地址，你可以这样写：
----- ---------- - ------------------------------------------------------ ----- ------ - ------------------ --------------------------------------- --- ------ ----- -- ------- - ---------------------- -
ES12 新特性
Promise.any
Promise.any 是一个新的 Promise 方法，它可以在所有 Promise 对象中任意一个成功时返回一个结果。在以前的版本中，Promise.all 只有在所有 Promise 对象都成功时才返回一个结果，如果有任何一个 Promise 对象失败，它就会抛出一个错误。但是现在，Promise.any 可以在任意一个 Promise 对象成功时返回一个结果。
Promise.any 的语法如下：
---------------------- --------- -----
例如，如果你有两个 Promise 对象，你可以这样使用 Promise.any：
----- -------- - ---------- ---------- --------------------------------- -- ---------------------
数字分隔符
数字分隔符是一个非常实用的功能，它可以在数字中使用下划线来提高可读性。在以前的版本中，你需要手动计算数字中的位数来提高可读性。但是现在，你可以使用数字分隔符来简化这个过程。
数字分隔符的语法如下：
----- ------ - -----------
String.prototype.replaceAll
String.prototype.replaceAll 是一个新的 String 方法，它可以替换所有匹配的子字符串。在以前的版本中，String.prototype.replace 只能替换第一个匹配项。但是现在，你可以使用 String.prototype.replaceAll 来替换所有匹配项。
String.prototype.replaceAll 的语法如下：
------------------------------ -------------
例如，如果你要将一个字符串中的所有空格替换为下划线，你可以这样写：
----- --- - ------ ------- ----- ------ - ---------------- -- ----- -------------------- -- -------------
总结
ES11 和 ES12 引入了许多实用的新特性，可以让你的 JavaScript 代码更加强大和高效。在本文中，我们详细介绍了可选链操作符、空值合并运算符、Promise.allSettled、String.prototype.matchAll、Promise.any、数字分隔符和String.prototype.replaceAll，希望这些新特性可以帮助你更好地编写前端代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d1aa96add4f0e0ffa4c2be