JS 常見報(bào)錯(cuò)及異常處理辦法總結(jié)
作者：FishStudy520
https://segmentfault.com/a/1190000038323321
前言
在開發(fā)中，有時(shí)，我們花了幾個(gè)小時(shí)寫的js 代碼，在瀏覽器調(diào)試一看，控制臺(tái)一堆紅……瞬間一萬頭草泥馬奔騰而來。
至此，本文主要記錄js 常見的一些錯(cuò)誤類型，以及常見的報(bào)錯(cuò)信息，分析其報(bào)錯(cuò)原因，并給予處理方法。并且將介紹幾種捕獲異常的方法。
常見的錯(cuò)誤類型
RangeError：標(biāo)記一個(gè)錯(cuò)誤，當(dāng)設(shè)置的數(shù)值超出相應(yīng)的范圍觸發(fā)。比如，new Array(-20)。ReferenceError：引用類型錯(cuò)誤，當(dāng)一個(gè)不存在的變量被引用時(shí)發(fā)生的錯(cuò)誤。比如：console.log(a)。SyntaxError：語法錯(cuò)誤。比如 if(true) {。TypeError：類型錯(cuò)誤，表示值的類型非預(yù)期類型時(shí)發(fā)生的錯(cuò)誤。
常見的錯(cuò)誤
1、RangeError: Maximum call stack size exceeded
含義：超出了最大的堆棧大小
為什么報(bào)錯(cuò)?
在使用遞歸時(shí)消耗大量堆棧，導(dǎo)致游覽器拋出錯(cuò)誤，因?yàn)橛斡[器給分配的內(nèi)存不是無限的。舉個(gè)栗子
function?pow(x,?n)?{
?return?x?*?pow(x,?n?-?1);
}
pow(10,5)
處理辦法
使用遞歸的時(shí)候，設(shè)定一個(gè)條件來終止遞歸，否則會(huì)無限循環(huán)，直到用盡調(diào)用堆?？臻g為止。
function?pow(x,?n)?{
??if?(n?==?1)??return?x
??return?x?*?pow(x,?n?-?1);
}
pow(10,5)
2、ReferenceError: "x" is not defined
含義：“x”未定義
為什么報(bào)錯(cuò)？
當(dāng)你引用一個(gè)沒有定義的變量時(shí)，拋出一個(gè)ReferenceError; 當(dāng)你使用變量的時(shí)候，這個(gè)變量必須要聲明，或者你可以確保它在你當(dāng)前的腳本或作用域 (scope) 中可用。
舉個(gè)栗子
//?變量未聲明
console.log(a)
fn()
//?錯(cuò)誤的作用域???
function?sum()?{
??let?number1?=?20,number2?=?30;
??return?number1?+?number2;
}
console.log(number1)
處理辦法
變量使用var|let|const 聲明 提升變量的作用域
//?變量未聲明
let?a;
function?fn()?{};
console.log(a);
fn();
//?錯(cuò)誤的作用域
let?number1?=?20,?number2?=?30;
function?sum()?{
???return?number1?+?number2;
}
console.log(number1)
3、SyntaxError: Identifier 'x' has already been declared
含義: 標(biāo)識(shí)符已申明
為什么報(bào)錯(cuò)？
某個(gè)變量名稱已經(jīng)作為參數(shù)出現(xiàn)了，又在使用let再次聲明。舉個(gè)栗子
//?let?重復(fù)聲明
let?a?=?0;
let?a?=?2;
//?在函數(shù)中參數(shù)已經(jīng)出現(xiàn)，函數(shù)里使用let重新聲明
function?fn(arg)?{
?let?arg?=?[]
}
4、SyntaxError: Invalid or unexpected token
含義：捕獲無效或意外的標(biāo)記
為什么報(bào)錯(cuò)？
代碼中有非法的字符或者缺少必要的標(biāo)識(shí)符號(hào)，比如減號(hào) ( - ) 與連接符 ( – ) ，或者是英文雙引號(hào) ( " ) 與中文雙引號(hào) ( “ )。
舉個(gè)栗子
//?遺漏的字符
let?str?=?'string;
let?colors?=?['#000',?#333',?'#666'];
//?使用特殊字符
let?str1?=?'string";
let?str2?=?5#5;
//?錯(cuò)配字符(使用中文引號(hào)字符)
let?str3?=?‘string’;
處理辦法
檢查是否有特殊字符或者是否遺漏一些字符。
5、SyntaxError: Unexpected end of input
含義：意外的終止輸入
為什么報(bào)錯(cuò)？
代碼中某些地方的括號(hào)或引號(hào)不匹配缺失，缺少()、[]、{}等。
舉個(gè)栗子
//?缺少括號(hào)
if(true)
let?obj?=?{id:?1
let?arr?=?[1,2,3
//?缺少結(jié)束符號(hào)
(function?()?{
????console.log('hello?world')
}()
處理辦法
檢查是否有特殊字符或者是否遺漏一些字符,括號(hào)需要配對(duì)出現(xiàn)。
6、TypeError: Cannot read property 'x' of undefinedTypeError: Cannot set property 'x' of undefined
含義：無法讀取屬性‘x’, 無法設(shè)置屬性 'x'
為什么報(bào)錯(cuò)？
訪問或設(shè)置未定義(undefined)或null值的屬性時(shí)會(huì)發(fā)生這種報(bào)錯(cuò)。
舉個(gè)栗子
//?undefined
let?a?=?undefined
a.id?//?讀取
a.id?=?1?//?設(shè)置
//?null
let?b?=?null?
b.id??//?讀取
b.id?=?2?//?設(shè)置
null.filter(item=>item)
處理辦法
有一些方法可以避免這種錯(cuò)誤。一種簡單且適用于小型屬性鏈的方法是使用邏輯運(yùn)算符&&。
let?obj?=?undefined
console.log(obj&&obj.id)
7、TypeError: 'x' is not a constructor
含義：表示 ‘x’不是構(gòu)造函數(shù)
為什么報(bào)錯(cuò)？
使用不是構(gòu)造器的對(duì)象或者變量來作為構(gòu)造器使用。
比如：new 10。
舉個(gè)栗子
let?Car?=?1;
new?Car();
new?Math();
處理辦法
使用正確的構(gòu)造函數(shù)。
Generator functions 也不能作為構(gòu)造器來使用。
function?Car(make,?model,?year)?{
??this.make?=?make;
??this.model?=?model;
??this.year?=?year;
}
8、SyntaxError: Invalid regular expression flags
含義：正則表達(dá)式標(biāo)志無效
為什么報(bào)錯(cuò)？
在代碼中出現(xiàn)了無效的正則表達(dá)式的標(biāo)記。
舉個(gè)栗子
let?reg?=?/foo/bar;
處理辦法
let?reg?=?/foo/g;
9、DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
含義：無效的Url
為什么報(bào)錯(cuò)？
在使用ajax 請(qǐng)求時(shí)url錯(cuò)誤，導(dǎo)致請(qǐng)求失敗。
舉個(gè)栗子
function?createXHR(url)?{
??????let?xhr?=?new?XMLHttpRequest();
??????xhr.open('POST',?url,?true);
??????xhr.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded');
??????xhr.send('user=admin');
??????xhr.onreadystatechange?=?function?()?{
??????}
??}
??createXHR('http://192.168.10.8080')?//?錯(cuò)誤url
??createXHR('http:/192.168.10:8080/open')?//?缺少?/,注：有些游覽器會(huì)自動(dòng)補(bǔ)全
處理辦法
檢查url 請(qǐng)求是否正確，保證請(qǐng)求路徑的完整。
createXHR('http://192.168.10:8080')
異常調(diào)試及捕獲
try/catch，Js中處理異常的一種模式，try用于可能會(huì)發(fā)生錯(cuò)誤的代碼，catch對(duì)錯(cuò)誤的處理。
try{
??//?可能會(huì)導(dǎo)致錯(cuò)誤的代碼
}catch(error)?{
??//?錯(cuò)誤處理
}
舉個(gè)栗子
try{
??console.log(a)
}catch(error)?{
???//?打印錯(cuò)誤信息
??console.log(error)??//?ReferenceError:?a?is?not?defined
}
throw，用來拋出一個(gè)用戶自定義的異常，執(zhí)行將被停止。
function?getUserName(name)?{
????if(!name)?throw?new?Error('用戶名無效');
????return?name;
}
getUserName()
Promise 的異常處理,Promise執(zhí)行中，本身自帶try...catch的異常處理，出錯(cuò)時(shí)，將錯(cuò)誤Rejact函數(shù)。
new?Promise((resolve,?reject)?=>?{
???throw?new?Error('error!');
}).catch(alert);
console.log() 方法,在瀏覽器中，使用console.log打印JavaScript的值。
let?value?=?'你最棒了，點(diǎn)個(gè)贊唄！'
console.log(value)
debugger 斷點(diǎn)調(diào)試，用于停止執(zhí)行 JavaScript，并調(diào)用調(diào)試函數(shù)。
let?value?=?15;
debugger
document.querySelector('body').innerhtml?=?'你最棒了，點(diǎn)個(gè)贊唄！'
總結(jié)
報(bào)錯(cuò)的時(shí)候別慌，有時(shí)候就是那么簡單，根據(jù)這些代碼敲一敲，熟悉一些常用的報(bào)錯(cuò)信息，便于在報(bào)錯(cuò)的時(shí)候快速的定位到報(bào)錯(cuò)原因。希望對(duì)面的小可愛們有所收獲。
最后
歡迎加我微信(winty230)，拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...
