再也不怕 JavaScript 報錯了，怎么看怎么處理都在這

在開發中，有時，我們花了幾個小時寫的 JS 代碼，在游覽器除錯一看，控制臺一堆紅，瞬間一萬頭草泥馬奔騰而來，至此，本文主要記錄 JS 常見的一些報錯型別，以及常見的報錯資訊，分析其報錯原因，并給予處理方法，并且將介紹幾種捕獲例外的方法，

常見的錯誤型別

RangeError：標記一個錯誤，當設定的數值超出相應的范圍觸發，比如，new Array(-20)，

ReferenceError：參考型別錯誤，當一個不存在的變數被參考時發生的錯誤，比如：console.log(a)，

SyntaxError：語法錯誤，比如 if(true) {，

TypeError：型別錯誤，表示值的型別非預期型別時發生的錯誤，

常見的錯誤

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);

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);

處理辦法

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);

SyntaxError: Identifier 'x' has already been declared

含義: 識別符號已宣告

為什么報錯？

某個變數名稱已經作為引數出現了，又在使用let再次宣告，

舉個栗子

// let 重復宣告
let a = 0;
let a = 2;

// 在函式中引數已經出現，函式里使用let重新宣告
function fn(arg) {
 let arg = [];
}

SyntaxError: Invalid or unexpected token

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

為什么報錯？

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

舉個栗子

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

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

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

處理辦法

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

SyntaxError: Unexpected end of input

含義：意外的終止輸入

為什么報錯？

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

舉個栗子

// 缺少括號
if(true)
let obj = {id: 1
let 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值的屬性時會發生這種報錯，

舉個栗子

// 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);

TypeError: 'x' is not a constructor

含義：表示 ‘x’不是建構式

為什么報錯？

使用不是構造器的物件或者變數來作為構造器使用，比如：new 10;

舉個栗子

var Car = 1;
new Car();
new Math();

處理辦法

使用正確的建構式，Generator functions 也不能作為構造器來使用，

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

SyntaxError: Invalid regular expression flags

含義：正則運算式標志無效

為什么報錯？

在代碼中出現了無效的正則運算式的標記，

舉個栗子

let reg = /foo/bar;

處理辦法

let reg = /foo/g;

DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL

含義：無效的Url

為什么報錯？

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

舉個栗子

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'); // 錯誤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 = 'https://www.cnblogs.com/frontworld/p/你最棒了，點個贊唄！'
console.log(value);

debugger 斷點除錯

用于停止執行 JavaScript，并呼叫除錯函式，

let value = https://www.cnblogs.com/frontworld/p/15;
debugger
document.querySelector('body').innerHTML = '你最棒了，點個贊唄！'

總結

報錯就是那么簡單，根據這些代碼敲一敲，熟悉一些常用的報錯資訊，便于在報錯的時候快速地定位到報錯原因，希望對可愛的你有用，

（本文完）

標籤：JavaScript

上一篇：這些年,我是如何當好一個技術支持的

下一篇：動態svg圖片簡單制作