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

FishStudy520發表於2020-11-30
前端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;

    image.png

  • 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

相關文章