前端項目中常見的報錯類型彙總

聲明：文章參考了《javascript高級程序設計 第三版》，並結合了一些簡單的例子，本身再次整合，整理出js常見的報錯，以便用於學習交流

1.錯誤分爲兩種

• 代碼錯誤：這種錯誤瀏覽器會報錯，能夠根據具體的錯誤類型去排錯。 
• 邏輯錯誤：這種錯誤瀏覽器不會報錯，可是能夠經過打印日誌，或者打斷點進行調試排錯。

2.javascript中的七種錯誤類型

• SyntaxError（語法錯誤）

報錯爲：Uncaught Syntaxerror：相關信息提示。表示解析代碼時發生的語法錯誤，即寫的代碼不符合js編碼規則。咱們能夠根據後面的信息提示去修改錯誤，固然，語法錯誤，瀏覽器會直接報錯，整個代碼都不會執行。

以下：第一種：變量名錯誤致使；第二種：缺乏括號

聲明變量：var / let / const / function，當建立一個變量時會在內存中的棧區開闢一個新的空間。
變量命名規則和規範：
規則：
1.由字母、數字、下劃線、$符號組成，不能以數字開頭
2.不能是關鍵字和保留字，例如：for,while,this,name
3.區分大小寫
規範：
1.變量名必須有意義
2.遵照駝峯命名法
3.建議不要用$做爲變量名

• ReferenceError（引用錯誤）

報錯爲：Uncaught ReferenceError：***，表示使用了沒有定義的變量，錯誤以前的代碼會執行，以後代碼不會執行。

以下：第一種：引用了一個不存在的變量；第二種：將變量賦值給一個沒法被賦值的對象;第三種：使用JSON.parse進行解析json字符串時，解析的內容不合法

• RangeError（範圍錯誤）

RangeError是當一個值超出有效範圍時發生的錯誤。主要有幾種狀況，一是數組長度爲負數，二是Number對象的方法參數超出範圍，以及函數堆棧超過最大值。

• TypeError（類型錯誤）

(1) 變量或參數不是預期類型，好比，對字符串、布爾值、數值等原始類型的值使用new命令，就會拋出這種錯誤，由於new命令的參數應該是一個構造函數。

(2) 調用對象不存在的方法。如下的錯誤是由於變量**前面的那個變量是undefined/null。

• URLError（URL錯誤）

URIError是URI相關函數的參數不正確時拋出的錯誤，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()這六個函數。這些API的使用太少了，所以這種錯誤在咱們平常開發中不多遇到。

• EvalError（eval錯誤）

eval函數沒有被正確執行時，會拋出EvalError錯誤。該錯誤類型已經再也不在ES5中出現了，只是爲了保證與之前代碼兼容，才繼續保留。所以這種錯誤在咱們平常開發中也基本不會遇到。

• Error（基類型）

Error 是基類型，其餘六種錯誤類型都繼承自該類型。所以，全部錯誤類型共享了一組相同的屬 性（錯誤對象中的方法全是默認的對象方法）。 Error 類型的錯誤不多見，若是有也是瀏覽器拋出的； 這個基類型的主要目的是供開發人員拋出自定義錯誤。以下：

3.邏輯錯誤 -- 三種常見的錯誤狀況

• 類型轉換錯誤

類型轉換錯誤發生在使用某個操做符，或者使用其餘可能會自動轉換值的數據類型的語言結構時。 在使用相等（==）和不相等（!=）操做符，或者在 if 、 for 及 while 等流控制語句中使用非布爾值時， 最常發生類型轉換錯誤。

所以建議使用全等（===）和不全等（!==）操做符，以免類型轉換。

alert(5 == "5"); //true
alert(5 === "5"); //false
alert(1 == true); //true
alert(1 === true); //false複製代碼

• 數據類型錯誤

JavaScript 是鬆散類型的，也就是說，在使用變量和函數參數以前，不會對它們進行比較以確保它 們的數據類型正確。爲了保證不會發生數據類型錯誤，只能依靠開發人員編寫適當的數據類型檢測代碼。 建議你們能夠學習使用typescript，它是一種強類型的語言，能夠設置變量的具體類型，在前端開發中使用會極大的減小咱們開發的bug，而且方便維護。

function getQueryString (url) {
  if (typeof url == "string") { // 經過檢查類型確保安全
    let pos = url.indexOf("?")
    if (pos > -1) {
      return url.substring(pos + 1)
    }
  }
  return ""
}

// 這個函數首先檢查了傳入的值是否是字符串。這樣，就確保了函數不會由於接收到非字符串值而致使錯誤。
複製代碼

• 通訊錯誤

（1）ajax請求的地址url不正確：會報404的狀態碼，找不到頁面

（2）發送的數據錯誤。會報400的狀態碼，通常爲參數錯誤

4.瀏覽器的其餘報錯的狀況

• XMLHttpRequest cannot load http://***. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://***' is therefore not allowed access.
  

進行異步請求時，產生跨域了

• Illegal break statement
  

出現了非法語句

• GET file:///****::ERR_FILE_NOT_FOUND

找不到引入的.js文件。可能緣由：沒有引入文件，或者js文件名字拼寫錯誤（好比，少了文件後綴.）

• Failed to load resource: the server responded with a status of 404 (Not Found)

文件沒有被找到，說明文件引用的路徑有問題，或文件損壞

看完文章，若是以爲對您的平常開發有用的話，別忘記點贊哦~^_^