JavaScript--错误处理机制

  1. try语句:try语句用于包裹可能会引发错误的代码块,并捕获其中的任何异常。如果在try块中出现了错误,程序将立即跳转到相应的catch语句(如果存在)或者finally语句。

  2. catch语句:catch语句用于处理try块中抛出的异常。它允许指定一个或多个特定的错误类型来捕获和处理不同类型的异常,或者可以使用通用的catch语句来捕获所有的异常。catch语句中的代码块将在异常被捕获时执行。

  3. throw语句:throw语句用于在代码中显式地创建自定义的错误。您可以使用内置的Error对象或您自己定义的子类来创建新的错误实例,并通过throw语句将其抛出。抛出的错误将被传递到最近的try...catch块中进行处理。

  4. finally语句:finally语句紧跟在try...catch块之后,无论是否有异常被抛出,它总是会执行。无论异常是否被捕获并处理,finally块中的代码都将被执行。通常情况下,finally块用于释放资源或进行清理操作。

代码格式 :

try {
  // 可能抛出异常的代码块
  if (条件) {
    throw new Error("错误信息"); // 使用 throw 抛出异常
  }
  // ...
} catch (error) {
  // 异常处理逻辑
  console.log(error.message); // 输出错误信息
  // ...
} finally {
  // 最终要执行的代码,无论是否有异常
  // ...
}

示例:

<!DOCTYPE html>
<html>
<head>
    <title>四则运算</title>
</head>
<body>
    <h1>四则运算</h1>

    <form id="calculator">
        <label for="num1">第一个数:</label>
        <input type="number" id="num1" required><br><br>

        <label for="operator">操作符:</label>
        <select id="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select><br><br>

        <label for="num2">第二个数:</label>
        <input type="number" id="num2" required><br><br>

        <button type="submit">计算</button>
    </form>

    <div id="result"></div>

    <script>
        document.getElementById("calculator").addEventListener("submit", function(event) {
            event.preventDefault();

            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            var operator = document.getElementById("operator").value;

            try {
                var result;

                switch (operator) {
                    case "+":
                        result = parseFloat(num1) + parseFloat(num2);
                        break;
                    case "-":
                        result = parseFloat(num1) - parseFloat(num2);
                        break;
                    case "*":
                        result = parseFloat(num1) * parseFloat(num2);
                        break;
                    case "/":
                        if (parseFloat(num2) === 0) {
                            throw new Error("除数不能为0!");
                        }
                        result = parseFloat(num1) / parseFloat(num2);
                        break;
                    default:
                        throw new Error("无效的操作符!");
                }

                document.getElementById("result").innerHTML = "结果:" + result;

            } catch (error) {
                document.getElementById("result").innerHTML = "错误:" + error.message;
                throw error; // 抛出异常
            } finally {
                document.getElementById("num1").value = "";
                document.getElementById("num2").value = "";
            }
        });
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/m0_74293254/article/details/131480976