在前端开发中，我们经常使用 try-catch 语句来捕获代码中的错误并进行处理。在 ES10 中，try-catch 语句新增了一个 finally 子句，用于在 try 和 catch 语句执行完毕后，无论是否有异常抛出，都会执行其中的代码块。但是，最近在使用 finally 子句时，发现了一个 Bug，本文将介绍如何解决这个问题。
Bug 表现
在 ES10 中，finally 子句的代码块中，如果使用了 return 关键字，会导致 try 或 catch 中的 return 失效。具体表现为，无论 try 或 catch 中是否有 return 语句，finally 中的 return 语句都会覆盖它们的返回值，最终返回 finally 中的值。
下面是一个示例代码：
-- -------------------- ---- -------
-------- ------ -
--- -
-------------------
------ --
- ----- --- -
---------------------
------ --
- ------- -
-----------------------
------ --
-
-
-------------------- -- -- -在上面的代码中，我们定义了一个 test 函数，其中包含了 try、catch 和 finally 三个语句块。分别输出了 try、catch 和 finally 的信息，并在它们中间分别使用了 return 1、return 2 和 return 3 语句。最后我们调用了 test 函数，并输出它的返回值。
根据上面的代码，我们期望输出的结果应该是 3，但是实际上输出的确实 3。这是因为 finally 中的 return 3 语句覆盖了 try 和 catch 中的返回值，导致最终返回了 3。
解决方案
为了解决上面的 Bug，我们需要修改代码的结构，避免在 finally 中使用 return 语句。具体的做法是，在 try 或 catch 中使用变量记录返回值，在 finally 中进行处理。
下面是修改后的示例代码：
-- -------------------- ---- -------
-------- ------ -
--- -------
--- -
-------------------
------ - --
- ----- --- -
---------------------
------ - --
- ------- -
-----------------------
-- ------- --- ---------- -
------ - --
-
-
------ -------
-
-------------------- -- -- -在上面的代码中，我们定义了一个 result 变量，用于记录返回值。在 try 或 catch 中，我们将需要返回的值赋值给 result 变量。在 finally 中，我们判断 result 是否有值，如果没有值，则将其赋值为 3。最后我们返回 result 变量。
根据上面的代码，我们期望输出的结果应该是 1，而实际上输出的确实 1。这是因为我们在 finally 中避免使用了 return 语句，而是使用了一个变量来记录返回值，并在最后进行处理。
总结
在 ES10 中，finally 子句的 Bug 可能会导致我们的代码出现问题。为了避免这个问题，我们需要避免在 finally 中使用 return 语句，而是使用变量来记录返回值，并在最后进行处理。这个解决方案可以避免 Bug 的出现，同时也可以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663724edd3423812e454a508