相信在实际项目中，你可能经常会看到类似下面的代码

try {
   //  尝试执行代码块
}
catch(err) {
   //  捕获错误的代码块
} 
finally {
    //  结果如何都会执行的代码块
}

 

　　简单来说上面的代码是用于处理代码中可能出现的错误信息

　　try{} 里的代码表示要执行的代码

　　catch{} 用于捕获 try{} 里代码执行时报的错误信息

　　finally{} 不管怎样都会执行的代码

　　下面我会列出一个实例，有时候文字描述不太直观，不便于理解，把相关代码敲一边，试着去理解，或许原先不明白的地方就迎刃而解了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <button id="btn">点我</button>
        <p id="message"></p>
        
        <script>
            var btn = document.getElementById("btn");
            btn.addEventListener("click", clickMe);
            
            function clickMe() {
                var y = document.getElementById("message");
                
                try{
                    show();
                }
                catch(err){
                    y.innerHTML = "错误：" + err;
                }
            }
            
//            function show() {
//                alert(1);
//            }
        </script>
    </body>
</html>

 

　　注：上面实例如下图，点击按钮以后执行 clickMe() 方法里的 show()方法，因为没有定义该方法，所以报错，提示该方法没有定义

　　

　　下面在通过一个实例介绍当 catch{} 捕获到错误信息，通过 throw 创建自定义消息的用法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <p>请输入 5 和 10 之间的一个数:</p>

        <input type="text" id="data" value="" />

        <button id="btn">检查输入</button>

        <p id="message"></p>

        <script>
            var btn = document.getElementById("btn");
            btn.addEventListener("click", myFunction);

            function myFunction() {
                var data = document.getElementById("data").value;
                var message = document.getElementById("message");
                message.innerHTML = "";

                try {
                    if (data === 0) {
                        throw "值不能为0";
                    } else if (isNaN(data)) {
                        throw "值不能为非数字";
                    } else if (data < 5) {
                        throw "值不能小于5";
                    } else if (data > 10) {
                        throw "值不能大于10";
                    } else {
                        throw "你输入的值没有问题";
                    }
                }
                catch(err) {
                    message.innerHTML = "输入的值：" + err;
                }
            }
        </script>
    </body>

</html>

 

　　补充：

　　①：try 和 catch  （必须一起使用）

　　②：try 和 catch 和 throw  （如果要创建自定义消息，就需要一起使用）

　　③：try 和 catch 和 finally （finally不是必须的，可选的）

　　

有需要的朋友可以领取支付宝到店红包，能省一点是一点