前端JavaScript 常見的報(bào)錯(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：語(yǔ)法錯(cuò)誤。比如 if(true) {。
TypeError：類型錯(cuò)誤，表示值的類型非預(yù)期類型時(shí)發(fā)生的錯(cuò)誤。
常見的錯(cuò)誤
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 xreturn 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)
// let 重復(fù)聲明let a = 0;let a = 2;// 在函數(shù)中參數(shù)已經(jīng)出現(xiàn)，函數(shù)里使用let重新聲明function fn(arg) {let arg = []}
// 遺漏的字符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: 1let arr = [1,2,3// 缺少結(jié)束符號(hào)(function () {console.log('hello world')}()
處理辦法
檢查是否有特殊字符或者是否遺漏一些字符,括號(hào)需要配對(duì)出現(xiàn)。
6、TypeError: Cannot read property 'x' of undefined
TypeError: Cannot set property 'x' of undefined
含義：無法讀取屬性‘x’, 無法設(shè)置屬性 'x'
為什么報(bào)錯(cuò)？
訪問或設(shè)置未定義(undefined)或null值的屬性時(shí)會(huì)發(fā)生這種報(bào)錯(cuò)。
舉個(gè)栗子?
// undefinedlet a = undefineda.id // 讀取a.id = 1 // 設(shè)置// nulllet b = nullb.id // 讀取b.id = 2 // 設(shè)置null.filter(item=>item)
處理辦法
有一些方法可以避免這種錯(cuò)誤。一種簡(jiǎn)單且適用于小型屬性鏈的方法是使用邏輯運(yùn)算符&&。
let obj = undefinedconsole.log(obj&&obj.id)
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;
在使用ajax 請(qǐng)求時(shí)url錯(cuò)誤，導(dǎo)致請(qǐng)求失敗。
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ò)誤urlcreateXHR('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;debuggerdocument.querySelector('body').innerhtml = '你最棒了，點(diǎn)個(gè)贊唄！'
總結(jié)
