前言
在開發中，有時，我們花了幾個小時寫的js 代碼，在浏覽器調試一看，控制台一堆紅，瞬間一萬頭奔騰而來。
至此，本文主要記錄js 常見的一些錯誤類型，以及常見的報錯資訊，分析其報錯原因，并給予處理方法。并且将介紹幾種捕獲異常的方法。
常見的錯誤類型
- RangeError：标記一個錯誤，當設定的數值超出相應的範圍觸發。比如，new Array(-20)。
- ReferenceError：引用類型錯誤，當一個不存在的變量被引用時發生的錯誤。比如：console.log(a)。
- SyntaxError：文法錯誤。比如 if(true) {。
- TypeError：類型錯誤，表示值的類型非預期類型時發生的錯誤。
常見的錯誤
1、RangeError: Maximum call stack size exceeded
含義：超出了最大的堆棧大小
為什麼報錯?
在使用遞歸時消耗大量堆棧，導緻遊覽器抛出錯誤，因為遊覽器給配置設定的記憶體不是無限的。
舉個栗子
function pow(x, n) {
return x * pow(x, n - 1);
}
pow(10,5) 處理辦法
使用遞歸的時候，設定一個條件來終止遞歸，否則會無限循環，直到用盡調用堆棧空間為止。
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”未定義
為什麼報錯？
當你引用一個沒有定義的變量時，抛出一個ReferenceError; 當你使用變量的時候，這個變量必須要聲明，或者你可以確定它在你目前的腳本或作用域 (scope) 中可用。
舉個栗子
// 變量未聲明
console.log(a)
fn()
// 錯誤的作用域
function sum() {
let number1 = 20,number2 = 30;
return number1 + number2;
}
console.log(number1) 處理辦法
變量使用var|let|const 聲明
提升變量的作用域
// 變量未聲明
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
含義: 辨別符已申明
為什麼報錯？
某個變量名稱已經作為參數出現了，又在使用let再次聲明。
舉個栗子
// let 重複聲明
let a = 0;
let a = 2;
// 在函數中參數已經出現，函數裡使用let重新聲明
function fn(arg) {
let arg = []
} 4、SyntaxError: Invalid or unexpected token
含義：捕獲無效或意外的标記
為什麼報錯？
代碼中有非法的字元或者缺少必要的辨別符号，比如減号 ( - ) 與連接配接符 ( – ) ，或者是英文雙引号 ( " ) 與中文雙引号 ( “ )。
舉個栗子
// 遺漏的字元
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
// 缺少結束符号
(function () {
console.log('hello world')
}() 處理辦法
檢查是否有特殊字元或者是否遺漏一些字元,括号需要配對出現。
6、TypeError: Cannot read property 'x' of undefined
TypeError: Cannot set property 'x' of undefined
含義：無法讀取屬性‘x’, 無法設定屬性 'x'
為什麼報錯？
通路或設定未定義(undefined)或null值的屬性時會發生這種報錯。
舉個栗子
// undefined
let a = undefined
a.id // 讀取
a.id = 1 // 設定
// null
let b = null
b.id // 讀取
b.id = 2 // 設定
null.filter(item=>item) 處理辦法
有一些方法可以避免這種錯誤。一種簡單且适用于小型屬性鍊的方法是使用邏輯運算符&&。
let obj = undefined
console.log(obj&&obj.id) 7、TypeError: 'x' is not a constructor
含義：表示 ‘x’不是構造函數
為什麼報錯？
使用不是構造器的對象或者變量來作為構造器使用。
比如：new 10。
舉個栗子
let Car = 1;
new Car();
new Math(); 處理辦法
使用正确的構造函數。
Generator functions 也不能作為構造器來使用。
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
} 8、SyntaxError: Invalid regular expression flags
含義：正規表達式标志無效
為什麼報錯？
在代碼中出現了無效的正規表達式的标記。
舉個栗子
let reg = /foo/bar; 處理辦法
let reg = /foo/g; 
9、DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
含義：無效的Url
為什麼報錯？
在使用ajax 請求時url錯誤，導緻請求失敗。
舉個栗子
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') 異常調試及捕獲
try/catch，Js中處理異常的一種模式，try用于可能會發生錯誤的代碼，catch對錯誤的處理。
try{
// 可能會導緻錯誤的代碼
}catch(error) {
// 錯誤處理
} 舉個栗子
try{
console.log(a)
}catch(error) {
// 列印錯誤資訊
console.log(error) // ReferenceError: a is not defined
} throw，用來抛出一個使用者自定義的異常，執行将被停止。
function getUserName(name) {
if(!name) throw new Error('使用者名無效');
return name;
}
getUserName() Promise 的異常處理,Promise執行中，本身自帶try...catch的異常處理，出錯時，将錯誤Rejact函數。
new Promise((resolve, reject) => {
throw new Error('error!');
}).catch(alert); console.log() 方法,在遊覽器中，使用console.log列印JavaScript的值。
let value = '你最棒了，點個贊呗！'
console.log(value) debugger 斷點調試，用于停止執行 JavaScript，并調用調試函數。
let value = 15;
debugger
document.querySelector('body').innerhtml = '你最棒了，點個贊呗！' 總結
報錯的時候别慌，有時候就是那麼簡單，根據這些代碼敲一敲，熟悉一些常用的報錯資訊，便于在報錯的時候快速的定位到報錯原因。希望對面的小可愛們有所收獲。
本文完~