在前端开发中，JavaScript 作为一门动态弱类型语言，常常会出现各式各样的错误和异常状况，如 undefined 或 null 的引用、调用不存在的方法等等。这些错误和异常会导致代码无法正常运行，甚至整个页面崩溃。
在 ES6 之前，处理错误和异常常常使用 if 语句或者 try/catch 语句。但是 if 语句需要手动判断每一个可能的错误和异常情况，不仅代码量大而且容易漏掉某些情况。相比之下，try/catch 语句更加全面、简便和灵活，能够有效地解决异常问题，并且避免潜在的 bug。
try/catch 语句的基本使用
try/catch 语句用来捕获可能发生的错误和异常，让代码能够正常执行。当 try 语句块中的语句发生错误或者异常时，程序会跳转到 catch 语句块中，并执行 catch 语句块中的代码。
例如，我们可以使用 try/catch 语句来解决变量引用不存在的错误：
try {
// 尝试执行代码，可能会出现错误或异常
console.log(myVar.someProperty);
} catch (error) {
// 捕获代码中的错误或异常，然后处理
console.log("An error occurred: " + error.message);
}在上面的代码中，我们尝试输出一个变量 myVar 的某个属性 someProperty，但是这个属性不存在，会导致错误。因此我们用 try/catch 语句来捕获这个错误，并输出错误信息。这样即使出现了错误，也不会导致代码崩溃，而是可以进行错误处理。
try/catch 块中的 finally 子句
除了 catch 子句外，try/catch 语句还可以使用 finally 子句。try/finally 块用来执行无论是否有异常都必须执行的代码。这个代码块会在 catch 子句执行完毕之后和 try 语句块中的语句执行之前执行。
例如，我们可以使用 try/finally 语句来处理文件打开和关闭：
-- -------------------- ---- -------
--- ---- - -----
--- -
---- - ---------------------
-- ----
- ----- ------- -
--------------- ----- --------- - - ---------------
- ------- -
-- ------ -
-------------
-
-在上面的代码中，try/catch 块用来打开文件和操作文件，如果发生错误会跳转到 catch 子句中。无论是否发生错误，finally 子句中的代码都会执行，用来关闭文件。
使用 ES12 中的 optional catch binding 进行错误处理
在 ES12 中，我们可以使用 optional catch binding 来代替 try/catch 语句中的 catch 子句中不需要用到的 Error 对象。这样可以减少代码冗余和提高可读性。Optional catch binding 是在 catch 子句中使用圆括号和变量名称代替原来的 Error 对象。如果没有 catch 子句中的变量，表示不需要使用 Error 对象。示例如下：
try {
// 尝试执行代码，可能会出现错误或异常
} catch {
// 捕获代码中的错误或异常，然后处理
console.log("An error occurred");
}在上面的代码中，我们放弃了 catch 子句中的 Error 对象，仅仅是执行一些代码。这样就使代码更加简洁和优雅。
结论
使用 try/catch 语句是前端开发中很重要的异常处理方式。正确使用 try/catch 语句可以有效避免因为异常导致代码崩溃的问题，让程序能够更加稳定运行。如果要处理一些不需要 Error 对象的异常，可以使用 ES12 中的 optional catch binding 语法来减少代码冗余和提高可读性。
示例代码
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.log("An error occurred: " + error.message);
}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67061519d91dce0dc857f35a