ES11 和 ES12 是 JavaScript 的新版，它们带来了一些新的特性和功能，可以帮助我们更好地编写前端代码。在本文中，我将介绍一些 ES11 和 ES12 的新功能，并展示如何使用它们来增强前端代码的易读性、效率和质量。
ES11 新特性
可选链操作符
可选链操作符（?.）是一个新的语法，它可以帮助我们更方便地访问深层次的对象属性和方法，而不需要进行繁琐的空值检查。
例如，假设我们有一个对象 person，它有一个 address 属性，而 address 属性又有一个 city 属性。我们可以使用可选链操作符来访问 person.address.city，如果 person 或 address 为 null 或 undefined，则不会发生任何错误。
示例代码：
----- ---- - ----------------------
空值合并操作符
空值合并操作符（??）是另一个新的语法，它可以帮助我们更方便地处理空值。它会检查左侧的值是否为 null 或 undefined，如果是，则返回右侧的值。
例如，假设我们有一个变量 x，如果它为 null 或 undefined，我们想要使用默认值 0。我们可以使用空值合并操作符来实现：
示例代码：
----- - - - -- --
Promise.allSettled()
Promise.allSettled() 是一个新的 Promise 方法，它可以等待多个 Promise 完成，并返回一个数组，数组中包含所有 Promise 的状态（fulfilled 或 rejected）和结果（如果是 fulfilled）或原因（如果是 rejected）。
示例代码：
----- -------- - -
-------------------
------------------ ---------------
------------------
--
----------------------------
------------- -- -
---------------------
---输出：
- - ------- ------------ ------ - -- - ------- ----------- ------- ------ ---- -- - ------- ------------ ------ - - -
ES12 新特性
可选的 catch 绑定
在 ES11 中，我们可以使用可选链操作符来避免访问空值时的错误。在 ES12 中，我们可以使用可选的 catch 绑定来避免捕获空值时的错误。
示例代码：
--- - -- --- - ----- - -- --- -
Promise.any()
Promise.any() 是另一个新的 Promise 方法，它可以等待多个 Promise 完成，只要有一个 Promise 的状态为 fulfilled，就返回该 Promise 的结果。如果所有 Promise 都是 rejected，则返回一个 AggregateError 对象，该对象包含所有 Promise 的原因。
示例代码：
----- -------- - -
------------------ ----------- -----
-------------------
------------------ ----------- ----
--
---------------------
------------ -- -
--------------------
--
------------ -- -
-------------------
---输出：
-
数字分隔符
在 ES12 中，我们可以在数字中使用下划线 _ 分隔符，以增加数字的可读性。
示例代码：
----- ------- - ----------
总结
ES11 和 ES12 带来了许多新的特性和功能，它们可以帮助我们更好地编写前端代码。在本文中，我们介绍了一些新的特性，包括可选链操作符、空值合并操作符、Promise.allSettled()、可选的 catch 绑定、Promise.any() 和数字分隔符。这些新功能可以增强代码的易读性、效率和质量，帮助我们更好地处理空值和 Promise。
希望这篇文章可以帮助你更好地了解 ES11 和 ES12，以及如何使用它们来编写更好的前端代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65cdf98cadd4f0e0ff71a5cd