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