前端JavaScript 常見的報錯及異常捕獲

在開發中，有時，我們花了幾個小時寫的js 代碼，在遊覽器調試一看，控制台一堆紅，瞬間一萬頭草泥馬奔騰而來。

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

rangeerror： 标記一個錯誤，當設定的數值超出相應的範圍觸發。比如，new array(-20)。referenceerror： 引用類型錯誤，當一個不存在的變量被引用時發生的錯誤。比如：console.log(a)。syntaxerror：文法錯誤。比如 if(true) {。typeerror：類型錯誤，表示值的類型非預期類型時發生的錯誤。

rangeerror: maximum call stack size exceeded

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

為什麼報錯?

在使用遞歸時消耗大量堆棧，導緻遊覽器抛出錯誤，因為遊覽器給配置設定的記憶體不是無限的。

舉個栗子

處理辦法

使用遞歸的時候，設定一個條件來終止遞歸，否則會無限循環，直到用盡調用堆棧空間為止。

referenceerror: "x" is not defined

含義： “x”未定義

為什麼報錯？

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

舉個栗子 

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

syntaxerror: identifier 'x' has already been declared

含義: 辨別符已申明

某個變量名稱已經作為參數出現了，又在使用let再次聲明。

syntaxerror: invalid or unexpected token

含義：捕獲無效或意外的标記

代碼中有非法的字元或者缺少必要的辨別符号，比如減号 ( - ) 與連接配接符 ( – ) ，或者是英文雙引号 ( " ) 與中文雙引号 ( “ )。

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

syntaxerror: unexpected end of input

含義：意外的終止輸入

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

檢查是否有特殊字元或者是否遺漏一些字元,括号需要配對出現。

typeerror: cannot read property 'x' of undefined

typeerror: cannot set property 'x' of undefined

含義： 無法讀取屬性‘x’, 無法設定屬性 'x'

通路或設定未定義(undefined)或null值的屬性時會發生這種報錯。

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

typeerror: 'x' is not a constructor

含義： 表示 ‘x’不是構造函數

使用不是構造器的對象或者變量來作為構造器使用。比如：new 10。

使用正确的構造函數。generator functions 也不能作為構造器來使用。

syntaxerror: invalid regular expression flags

含義：正規表達式标志無效

在代碼中出現了無效的正規表達式的标記。

domexception: failed to execute 'open' on 'xmlhttprequest': invalid url

含義：無效的url

在使用ajax 請求時url錯誤，導緻請求失敗。

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

try/catch，js中處理異常的一種模式，try用于可能會發生錯誤的代碼，catch對錯誤的處理

throw，用來抛出一個使用者自定義的異常，執行将被停止。

promise 的異常處理,promise執行中，本身自帶try...catch的異常處理，出錯時，将錯誤rejact函數。

​

console.log() 方法,在遊覽器中，使用console.log列印javascript的值。

debugger 斷點調試，用于停止執行 javascript，并調用調試函數。

報錯的時候别慌，有時候就是那麼簡單，根據這些代碼敲一敲，熟悉一些常用的報錯資訊，便于在報錯的時候快速的定位到報錯原因。希望對面的小可愛們有所收獲。