2個簡單實例讓你快速理解try-catch的用法
阿新 • • 發佈：2018-10-30
分享圖片 代碼塊 button mage 理解 bsp click pan 簡單
相信在實際項目中，你可能經常會看到類似下面的代碼
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不是必須的，可選的）
2個簡單實例讓你快速理解try-catch的用法