一篇文章帶你了解JavaScript錯(cuò)誤處理
大家好，我是前端進(jìn)階者。
執(zhí)行JavaScript代碼時(shí)，可能會(huì)發(fā)生意想不到的錯(cuò)誤。錯(cuò)誤可以是程序員編寫(xiě)的編碼錯(cuò)誤，由于輸入錯(cuò)誤引起的錯(cuò)誤以及其他不可預(yù)見(jiàn)的事情。
因此，為了處理錯(cuò)誤，JavaScript提供了4個(gè)關(guān)鍵字。
一、JavaScript try ... catch語(yǔ)句
try語(yǔ)句允許定義一個(gè)代碼塊，該代碼塊在執(zhí)行時(shí)將進(jìn)行錯(cuò)誤測(cè)試，catch如果try塊中發(fā)生錯(cuò)誤，則該語(yǔ)句允許您定義要執(zhí)行的代碼塊。
JavaScript語(yǔ)句try和catch成對(duì)出現(xiàn)。
- try {
- //try_statements-嘗試嘗試的語(yǔ)句
- }catch（err）{
- //catch_statements-處理錯(cuò)誤的語(yǔ)句
- }
完整代碼：
例中，將“alert”寫(xiě)為“aaalert”來(lái)故意產(chǎn)生錯(cuò)誤。
- <!DOCTYPE html>
- <html>
- <title>項(xiàng)目</title>
- <body style="background-color: aqua;">
- <h1>JavaScript Error</h1>
- <p>將" alert"寫(xiě)為" aaalert"來(lái)故意產(chǎn)生錯(cuò)誤：</p>
- <p id="result"></p>
- <script>
- try {
- aaalert("Hello world");
- } catch (e) {
- document.getElementById("result").innerHTML = e.name + "<br>" + e.message;
- }
- </script>
- </body>
- </html>
將" alert"寫(xiě)為" aaalert"來(lái)故意產(chǎn)生錯(cuò)誤：
發(fā)生錯(cuò)誤時(shí)，JavaScript通常會(huì)停止運(yùn)行，并創(chuàng)建一個(gè)具有兩個(gè)屬性的Error對(duì)象：name和message。
二、JavaScript throw語(yǔ)句
throw語(yǔ)句引發(fā)用戶(hù)定義的異常。
throw語(yǔ)句允許您創(chuàng)建自定義錯(cuò)誤。從技術(shù)上講，這稱(chēng)為“引發(fā)異常 ”。異?？梢允荍avaScript字符串，數(shù)字，布爾值或?qū)ο蟆?/p>
- throw "Invalid"; // 生成帶有字符串值的異常
- throw 32; // 生成值為32的異常
- throw true; // 生成值為true的異常
如果throw與try和一起使用catch，則可以指定程序流程并生成自定義錯(cuò)誤消息。
在例中，如果傳遞任何非數(shù)字參數(shù)，則getRectArea()將引發(fā)自定義錯(cuò)誤：
- <script>
- function getRectArea(width, height) {
- if (isNaN(width) || isNaN(height)) {
- throw "參數(shù)不是數(shù)字!";
- }
- }
- try {
- getRectArea(5, 'Z');
- }
- catch(err) {
- document.getElementById('para').innerHTML = err;
- }
- </script>
1. 輸入驗(yàn)證
如果值錯(cuò)誤，則引發(fā)異常(err)。catch語(yǔ)句捕獲異常(err)，并顯示自定義錯(cuò)誤消息。
- var x = document.querySelector("input").value;
- try {
- if(x == "") throw "is Empty";
- if(isNaN(x)) throw "Not a Number";
- if(x > 10) throw "too High";
- if(x < 5)throw "too Low";
- }
- catch(err) {
- document.getElementById("para").innerHTML = "Input " + err;
- }
三、JavaScript 錯(cuò)誤對(duì)象
JavaScript具有一個(gè)內(nèi)置的Error對(duì)象，該對(duì)象在發(fā)生錯(cuò)誤時(shí)提供錯(cuò)誤信息。
四、錯(cuò)誤類(lèi)型
1. EvalError
當(dāng)通過(guò)eval()函數(shù)執(zhí)行代碼期間發(fā)生錯(cuò)誤時(shí)，將拋出一個(gè)EvalError。但是，JavaScript不再拋出此錯(cuò)誤，但是仍然保留此對(duì)象是為了向后兼容。
較新版本的JavaScript不會(huì)拋出異常EvalError，使用SyntaxError代替。
2. RangeError
當(dāng)使用超出允許值范圍的數(shù)字時(shí)，將引發(fā)RangeError。
例如，創(chuàng)建長(zhǎng)度為負(fù)數(shù)的數(shù)組將拋出RangeError。
- try {
- var arr = new Array(-1); // throws a range error
- } catch(err) {
- document.getElementById("result").innerHTML = err.name + "<br>" + err.message;
- }
3. ReferenceError
試圖引用或訪問(wèn)一個(gè)不存在的變量或?qū)ο髸r(shí)，通常會(huì)拋出一個(gè)ReferenceError。
- try {
- var x = 5 + y; // 拋出引用錯(cuò)誤
- } catch(err) {
- document.getElementById("result").innerHTML = err.name + "<br>" + err.message;
- }
4. SyntaxError
如果您的JavaScript代碼中有任何語(yǔ)法問(wèn)題，則會(huì)在運(yùn)行時(shí)引發(fā)SyntaxError。
- try {
- eval("alert('Hello)"); // Missing ' will throw an error
- } catch(err) {
- document.getElementById("result").innerHTML = err.name + "<br>" + err.message;
- }
5. TypeError
當(dāng)值不是期望的類(lèi)型時(shí)，拋出TypeError。
- var num = 50;
- try {
- num.toUpperCase(); // 您不能將數(shù)字轉(zhuǎn)換為大寫(xiě)
- } catch(err) {
- document.getElementById("result").innerHTML = err.name + "<br>" + err.message;
- }
6. URIError
當(dāng)指定無(wú)效的URI(統(tǒng)一資源標(biāo)識(shí)符)時(shí)，將引發(fā)URIError。
- <script>
- try {
- decodeURI("%"); // 你不能URI解碼百分比符號(hào)
- } catch (err) {
- document.getElementById("result").innerHTML = err.name + "<br>" + err.message;
- }
- </script>
五、總結(jié)
本文基于JavaScript ，介紹了常見(jiàn)的錯(cuò)誤處理。對(duì)于每一種錯(cuò)誤語(yǔ)句都做了詳細(xì)的分析，對(duì)于JavaScript 錯(cuò)誤對(duì)象中需要注意的點(diǎn)。在實(shí)際操作中，遇到的難點(diǎn)提供了相對(duì)于的解決方法。希望能夠幫助讀者在遇到錯(cuò)誤時(shí) 更好的調(diào)試，處理。
代碼很簡(jiǎn)單，希望能夠幫助你更好的學(xué)習(xí)。
本文轉(zhuǎn)載自微信公眾號(hào)「前端進(jìn)階學(xué)習(xí)交流」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端進(jìn)階學(xué)習(xí)交流學(xué)公眾號(hào)。
