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

導讀

---

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

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

注：本文使用的谷歌遊覽器驗證，不一樣的遊覽器，報錯可能會不同。

閱讀三連：點贊（👍）、關注（😍）、收藏（📝）。
本文 Githab 已上傳，更多往期文章已分類整理。

正文

---

常見的錯誤類型

• 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。

  舉個栗子 → 🙌🌰

  let 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) {
        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 = '你最棒了，點個讚唄！'

總結

---

報錯的時候別慌，有時候就是那麼簡單，根據這些代碼敲一敲，熟悉一些經常使用的報錯信息，便於在報錯的時候快速的定位到報錯緣由。但願對面的小可愛們有所收穫。

最後

---

若是喜歡或對你有用，那就點個讚唄（👍👍👍）！ (╯ε╰)(╯ε╰)(╯ε╰)。

參考資料

---

JavaScript高級程序設計第3版
MDN