在前端开发中，错误处理是一个非常重要的问题，因为代码在运行过程中难免会出现一些错误。而 try catch 是 JavaScript 中最常用的错误处理方式之一，它能够捕捉到代码运行中的错误并做出处理。
在 ES11 中，try catch 错误处理得到了全新的升级，让错误处理更加简单、高效、安全。在本文中，我们将深入探讨 ES11 中的 try catch 新特性。
Async 函数中使用 try-catch
ES11允许在async 函数的外层使用 try catch 来捕捉以及处理异步代码中的错误，这对于异步编程和错误处理是非常有益的。
让我们来看一个简单的示例代码：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
-- -- --------- ---- ----
- ----- ------- -
---------------------
-
-在这个示例代码中，我们通过try catch机制来捕捉异步接口请求时可能出现的错误，从而保证了代码的稳定以及数据的安全。
可选捕获绑定
在 ES11 中引入了可选捕获绑定，使得我们可以更加方便地在 catch 语句中访问到错误对象。
在过去的 try catch 中，我们经常会通过使用变量来捕获错误对象：
try {
// do something
} catch (err) {
console.error(err);
}而在 ES11 中，通过在 catch 语句中使用可选捕获绑定，我们可以更加方便地访问到错误对象，如下所示：
try {
// do something
} catch {
console.error('An error occurred');
}如果出现异常，catch语句中的代码将会执行，但是不会捕获任何错误对象。如果需要访问错误对象，可选捕获绑定会自动将错误对象分配给一个本地变量，并使其在 catch 语句的上下文中可用，如下所示：
try {
// do something
} catch (err) {
console.error(err.message);
}在这个示例代码中，我们通过 err 变量来访问错误对象，这样做有一个问题，就是当我们并不需要访问错误对象时，我们必须使用一个没有用到的变量来接收它。可选捕获绑定使得我们可以更加方便地完成这个任务。
try {
// do something
} catch {
console.error('An error occurred');
}在这个示例代码中，我们没有给 catch 语句传递任何变量名，当然，在 catch 语句中仍然可以访问错误对象。这使得代码更加简洁、清晰。
可选链操作符的使用
在 ES11 中，增强了可选链操作符，这为错误处理提供了极大的便利。使用可选链操作符，我们可以在不显式检查对象属性的存在性的情况下，访问对象的属性。这在遇到嵌套对象时，可以大大减少代码的复杂度。例如：
-- -------------------- ---- -------
----- --------- - -
----- --------
-------- -
------- -- ---- ----
----- ---------- -----
-
--
-- ---------- -- ----------------- -- ------------------------- -
-- -- --------- ---- ------------------------
-在这个示例代码中，我们需要在访问 userInput 对象的 address 属性之前对其进行空值检查。在 ES11 中，我们可以使用可选链操作符来处理这种情况。
const street = userInput?.address?.street;
使用可选链操作符，我们可以在不进行 null 检查的情况下，访问嵌套对象的属性。
总结
在 ES11 中，try catch 错误处理的新特性使得前端开发人员在错误处理方面更加高效、安全、简单。使用 ES11 提供的 async 函数、可选捕获绑定、可选链操作符等特性，可以大大提高代码的可读性、健壮性。
本文通过一系列示例介绍了 ES11 中 try catch 的新特性，相信对于前端工程师来说具有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664d3fb7d3423812e4c7506f