【JS】820- JS 常見報錯及異常捕獲

作者：FishStudy520

https://segmentfault.com/a/1190000038323321

前言

在開發(fā)中，有時，我們花了幾個小時寫的js 代碼，在瀏覽器調(diào)試一看，控制臺一堆紅……瞬間一萬頭草泥馬奔騰而來。

至此，本文主要記錄js 常見的一些錯誤類型，以及常見的報錯信息，分析其報錯原因，并給予處理方法。并且將介紹幾種捕獲異常的方法。

常見的錯誤類型

• RangeError：標(biāo)記一個錯誤，當(dāng)設(shè)置的數(shù)值超出相應(yīng)的范圍觸發(fā)。比如，new Array(-20)。
• ReferenceError：引用類型錯誤，當(dāng)一個不存在的變量被引用時發(fā)生的錯誤。比如：console.log(a)。
• SyntaxError：語法錯誤。比如 if(true) {。
• TypeError：類型錯誤，表示值的類型非預(yù)期類型時發(fā)生的錯誤。

常見的錯誤

• 1、RangeError: Maximum call stack size exceeded

含義：超出了最大的堆棧大小

為什么報錯?

在使用遞歸時消耗大量堆棧，導(dǎo)致游覽器拋出錯誤，因為游覽器給分配的內(nèi)存不是無限的。舉個栗子

function?pow(x,?n)?{
?return?x?*?pow(x,?n?-?1);
}
pow(10,5)

處理辦法

使用遞歸的時候，設(shè)定一個條件來終止遞歸，否則會無限循環(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”未定義

為什么報錯？

當(dāng)你引用一個沒有定義的變量時，拋出一個ReferenceError; 當(dāng)你使用變量的時候，這個變量必須要聲明，或者你可以確保它在你當(dāng)前的腳本或作用域 (scope) 中可用。

舉個栗子

//?變量未聲明
console.log(a)
fn()
//?錯誤的作用域???
function?sum()?{
??let?number1?=?20,number2?=?30;
??return?number1?+?number2;
}
console.log(number1)

處理辦法

1. 變量使用var|let|const 聲明
2. 提升變量的作用域

//?變量未聲明
let?a;
function?fn()?{};
console.log(a);
fn();

//?錯誤的作用域
let?number1?=?20,?number2?=?30;
function?sum()?{
???return?number1?+?number2;
}
console.log(number1)

• 3、SyntaxError: Identifier 'x' has already been declared

含義: 標(biāo)識符已申明

為什么報錯？

某個變量名稱已經(jīng)作為參數(shù)出現(xiàn)了，又在使用let再次聲明。舉個栗子

//?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)記

為什么報錯？

代碼中有非法的字符或者缺少必要的標(biāo)識符號，比如減號 ( - ) 與連接符 ( – ) ，或者是英文雙引號 ( " ) 與中文雙引號 ( “ )。

舉個栗子

//?遺漏的字符
let?str?=?'string;
let?colors?=?['#000',?#333',?'#666'];

//?使用特殊字符
let?str1?=?'string";
let?str2?=?5#5;

//?錯配字符(使用中文引號字符)
let?str3?=?‘string’;

處理辦法

檢查是否有特殊字符或者是否遺漏一些字符。

• 5、SyntaxError: Unexpected end of input

含義：意外的終止輸入

為什么報錯？

代碼中某些地方的括號或引號不匹配缺失，缺少()、[]、{}等。

舉個栗子

//?缺少括號
if(true)
let?obj?=?{id:?1
let?arr?=?[1,2,3

//?缺少結(jié)束符號
(function?()?{
????console.log('hello?world')
}()

處理辦法

檢查是否有特殊字符或者是否遺漏一些字符,括號需要配對出現(xiàn)。

• 6、TypeError: Cannot read property 'x' of undefined

• TypeError: Cannot set property 'x' of undefined

含義：無法讀取屬性‘x’, 無法設(shè)置屬性 'x'

為什么報錯？

訪問或設(shè)置未定義(undefined)或null值的屬性時會發(fā)生這種報錯。

舉個栗子

//?undefined
let?a?=?undefined
a.id?//?讀取
a.id?=?1?//?設(shè)置
//?null
let?b?=?null?
b.id??//?讀取
b.id?=?2?//?設(shè)置
null.filter(item=>item)

處理辦法

有一些方法可以避免這種錯誤。一種簡單且適用于小型屬性鏈的方法是使用邏輯運算符&&。

let?obj?=?undefined
console.log(obj&&obj.id)

• 7、TypeError: 'x' is not a constructor

含義：表示 ‘x’不是構(gòu)造函數(shù)

為什么報錯？

使用不是構(gòu)造器的對象或者變量來作為構(gòu)造器使用。

比如：new 10。

舉個栗子

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)志無效

為什么報錯？

在代碼中出現(xiàn)了無效的正則表達(dá)式的標(biāo)記。

舉個栗子

let?reg?=?/foo/bar;

處理辦法

let?reg?=?/foo/g;

• 9、DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL

含義：無效的Url

為什么報錯？

在使用ajax 請求時url錯誤，導(dǎo)致請求失敗。

舉個栗子

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')?//?錯誤url
??createXHR('http:/192.168.10:8080/open')?//?缺少?/,注：有些游覽器會自動補全

處理辦法

檢查url 請求是否正確，保證請求路徑的完整。

createXHR('http://192.168.10:8080')

異常調(diào)試及捕獲

try/catch，Js中處理異常的一種模式，try用于可能會發(fā)生錯誤的代碼，catch對錯誤的處理。

try{
??//?可能會導(dǎo)致錯誤的代碼
}catch(error)?{
??//?錯誤處理
}

舉個栗子

try{
??console.log(a)
}catch(error)?{
???//?打印錯誤信息
??console.log(error)??//?ReferenceError:?a?is?not?defined
}

throw，用來拋出一個用戶自定義的異常，執(zhí)行將被停止。

function?getUserName(name)?{
????if(!name)?throw?new?Error('用戶名無效');
????return?name;
}
getUserName()

Promise 的異常處理,Promise執(zhí)行中，本身自帶try...catch的異常處理，出錯時，將錯誤Rejact函數(shù)。

new?Promise((resolve,?reject)?=>?{
???throw?new?Error('error!');
}).catch(alert);

console.log() 方法,在瀏覽器中，使用console.log打印JavaScript的值。

let?value?=?'你最棒了，點個贊唄！'
console.log(value)

debugger 斷點調(diào)試，用于停止執(zhí)行 JavaScript，并調(diào)用調(diào)試函數(shù)。

let?value?=?15;
debugger
document.querySelector('body').innerhtml?=?'你最棒了，點個贊唄！'

總結(jié) 報錯的時候別慌，有時候就是那么簡單，根據(jù)這些代碼敲一敲，熟悉一些常用的報錯信息，便于在報錯的時候快速的定位到報錯原因。希望對面的小可愛們有所收獲。