在開發中，有時，我們花了幾個小時寫的 JS 代碼，在游覽器調試一看，控制臺一堆紅，瞬間一萬頭草泥馬奔騰而來。至此，本文主要記錄 JS 常見的一些報錯類型，以及常見的報錯信息，分析其報錯原因，并給予處理方法。并且將介紹幾種捕獲異常的方法。
常見的錯誤類型
RangeError：標記一個錯誤，當設置的數值超出相應的范圍觸發。比如，new Array(-20)。
ReferenceError：引用類型錯誤，當一個不存在的變量被引用時發生的錯誤。比如：console.log(a)。
SyntaxError：語法錯誤。比如 if(true) {。
TypeError：類型錯誤，表示值的類型非預期類型時發生的錯誤。
常見的錯誤
RangeError: Maximum call stack size exceeded
含義：超出了最大的堆棧大小
為什么報錯?
在使用遞歸時消耗大量堆棧，導致游覽器拋出錯誤，因為游覽器給分配的內存不是無限的。
舉個栗子
|
1
2
3
4
|
function pow(x, n) { return x * pow(x, n - 1);}pow(10,5); |
處理辦法
使用遞歸的時候，設定一個條件來終止遞歸，否則會無限循環，直到用盡調用堆棧空間為止。
|
1
2
3
4
5
|
function pow(x, n) { if (n == 1) return x; return x * pow(x, n - 1); }pow(10,5); |
ReferenceError: "x" is not defined
含義：“x”未定義
為什么報錯？
當你引用一個沒有定義的變量時，拋出一個ReferenceError; 當你使用變量的時候，這個變量必須要聲明，或者你可以確保它在你當前的腳本或作用域 (scope) 中可用。
舉個栗子
|
1
2
3
4
5
6
7
8
9
|
// 變量未聲明console.log(a);fn();// 錯誤的作用域 function sum() { let number1 = 20,number2 = 30; return number1 + number2;}console.log(number1); |
處理辦法
1. 變量使用var|let|const聲明
2. 提升變量的作用域
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 變量未聲明let a;function fn() {};console.log(a);fn();// 錯誤的作用域let number1 = 20, number2 = 30;function sum() { return number1 + number2;}console.log(number1); |
SyntaxError: Identifier 'x' has already been declared
含義: 標識符已聲明
為什么報錯？
某個變量名稱已經作為參數出現了，又在使用let再次聲明。
舉個栗子
|
1
2
3
4
5
6
7
8
|
// let 重復聲明let a = 0;let a = 2;// 在函數中參數已經出現，函數里使用let重新聲明function fn(arg) { let arg = [];} |
SyntaxError: Invalid or unexpected token
含義：捕獲無效或意外的標記
為什么報錯？
代碼中有非法的字符或者缺少必要的標識符號，比如減號 ( - ) 與連接符 ( – ) ，或者是英文雙引號 ( " ) 與中文雙引號 ( “ )。
舉個栗子
|
1
2
3
4
5
6
7
8
9
10
|
// 遺漏的字符let str = 'string;let colors = ['#000', #333', '#666'];// 使用特殊字符let str1 = 'string";let str2 = 5#5;// 錯配字符(使用中文引號字符)let str3 = ‘string'; |
處理辦法
檢查是否有特殊字符或者是否遺漏一些字符。
SyntaxError: Unexpected end of input
含義：意外的終止輸入
為什么報錯？
代碼中某些地方的括號或引號不匹配缺失，缺少()、[]、{}等。
舉個栗子
|
1
2
3
4
5
6
7
8
9
10
|
// 缺少括號if(true)let obj = {id: 1let arr = [1,2,3// 缺少結束符號(function () { console.log('hello world');}() |
處理辦法
檢查是否有特殊字符或者是否遺漏一些字符,括號需要配對出現。
TypeError: Cannot read property 'x' of undefined
TypeError: Cannot set property 'x' of undefined
含義：無法讀取屬性‘x', 無法設置屬性 'x'
為什么報錯？
訪問或設置未定義(undefined)或null值的屬性時會發生這種報錯。
舉個栗子
|
1
2
3
4
5
6
7
8
9
|
// undefinedlet a = undefined;a.id; // 讀取a.id = 1; // 設置// nulllet b = null;b.id; // 讀取b.id = 2; // 設置null.filter(item=>item) |
處理辦法
有一些方法可以避免這種錯誤。一種簡單且適用于小型屬性鏈的方法是使用邏輯運算符&&。
|
1
2
|
let obj = undefined;console.log(obj&&obj.id); |
TypeError: 'x' is not a constructor
含義：表示 ‘x'不是構造函數
為什么報錯？
使用不是構造器的對象或者變量來作為構造器使用。比如：new 10;
舉個栗子
|
1
2
3
|
var Car = 1;new Car();new Math(); |
處理辦法
使用正確的構造函數。Generator functions 也不能作為構造器來使用。
|
1
2
3
4
5
|
function Car(make, model, year) { this.make = make; this.model = model; this.year = year;} |
SyntaxError: Invalid regular expression flags
含義：正則表達式標志無效
為什么報錯？
在代碼中出現了無效的正則表達式的標記。
舉個栗子
|
1
|
let reg = /foo/bar; |
處理辦法
|
1
|
let reg = /foo/bar; |
DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
含義：無效的Url
為什么報錯？
在使用ajax 請求時url錯誤，導致請求失敗
舉個栗子
|
1
2
3
4
5
6
7
8
9
10
|
function createXHR(url) { var 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'); // 錯誤urlcreateXHR('http:/192.168.10:8080/open'); // 缺少 /,注：有些游覽器會自動補全 |
處理辦法
檢查url 請求是否正確，保證請求路徑的完整。
|
1
|
createXHR('http://192.168.10:8080'); |
異常調試及捕獲
try/catch
JS中處理異常的一種模式，try用于可能會發生錯誤的代碼，catch對錯誤的處理
|
1
2
3
4
5
|
try{ // 可能會導致錯誤的代碼}catch(error) { // 錯誤處理} |
舉個栗子
|
1
2
3
4
5
6
|
try{ console.log(a)}catch(error) { // 打印錯誤信息 console.log(error); // ReferenceError: a is not defined} |
throw
用來拋出一個用戶自定義的異常，執行將被停止。
|
1
2
3
4
5
|
function getUserName(name) { if(!name) throw new Error('用戶名無效'); return name;}getUserName(); |
Promise 的異常處理
Promise執行中，本身自帶try...catch的異常處理，出錯時，將錯誤Rejact函數。
|
1
2
3
|
new Promise((resolve, reject) => { throw new Error('error!');}).catch(alert); |
console.log() 方法
在游覽器中，使用console.log打印javaScript的值。
|
1
2
|
let value = '你最棒了，點個贊唄！'console.log(value); |
debugger 斷點調試
用于停止執行 JavaScript，并調用調試函數。
|
1
2
3
|
let value = 15;debuggerdocument.querySelector('body').innerHTML = '你最棒了，點個贊唄！' |
總結
報錯就是那么簡單，根據這些代碼敲一敲，熟悉一些常用的報錯信息，便于在報錯的時候快速地定位到報錯原因。希望對可愛的你有用。
到此這篇關于再也不怕 JavaScript 報錯了,怎么看怎么處理都在這兒的文章就介紹到這了,更多相關javascript報錯處理內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/frontworld/archive/2020/12/08/14105141.html
