云和大咖分享：掌握常見的JavaScript錯誤類型，快速定位問題

能夠快速地錯誤定位，解決問題，是我們開發中非常重要的一種能力。

從瀏覽器控制臺到運行Node.js的計算機終端，我們到處都會看到錯誤。

這篇文章重點介紹了在JS開發過程中可能遇到的 7 種錯誤類型。

1. RangeError 范圍錯誤

當數字超出允許的值范圍時，將拋出此錯誤；或者JS執行進入死循環。

我們有一個數組，帶有兩個元素的arr。 接下來，我們嘗試將數組擴展為包含90 ** 99 = 2.9512665430652753e + 193元素。

這個數字超出了數組最大的長度范圍。 運行它會拋出RangeError：

因為我們要增加arr數組的數量超出了JS指定的范圍。

2. ReferenceError 引用錯誤

當對變量/項目的引用被破壞時，將引發此錯誤。 那是變量/項目不存在。

我們有一個變量cat初始化為”cat”。 接下來，我們參考cat變量和dog變量。 cat變量存在，而dog變量不存在。

cat將返回”cat”，而dog將引發參考錯誤，因為在環境記錄中找不到名稱dog。

每當我們創建或定義變量時，變量名稱都會寫入環境記錄中。 此環境記錄就像鍵值存儲一樣，

每當我們引用變量時，它都會存儲程序中定義的變量。 當在記錄中找到環境值并提取并返回值時，將以該變量的名稱作為關鍵字搜索環境記錄。 調用尚未定義的函數。

現在，當我們創建或定義一個沒有賦值的變量時。 該變量以鍵作為變量名稱寫入環境記錄，但該值將保持未定義狀態。

稍后為變量分配值時，將在env記錄中搜索該變量，當找到初始未定義值時，該賦值將被覆蓋。

因此，當在環境記錄中找不到變量名時，JS引擎會引發ReferenceError。

注意：未定義的變量不會拋出ReferenceError，因為它存在于環境記錄中只是它的值尚未設置。

3. SyntaxError 語法錯誤

這是我們遇到的最常見的錯誤。 當我們鍵入JS引擎可以理解的代碼時，會發生此錯誤。

解析期間，JS引擎捕獲了此錯誤。 在JS引擎中，我們的代碼經過不同的階段，然后才能在終端上看到這些結果。

· tokenization 標記化

· parsing 解析

· interpreting 編譯

標記化將代碼的源分解為各個單元。 在此階段，將對數字，關鍵字，文字，運算符進行整理并分別進行標記。

接下來，生成的令牌流將傳遞到解析階段，由解析器處理。 這是從令牌流生成AST的地方。 AST是我們代碼結構的抽象表示。

在這兩個階段，即標記化和解析，如果我們代碼的語法/源不符合JS的語法規則，則會使階段失敗并引發SyntaxError。 例如，

單獨的h代表什么？ 那里的h破壞了代碼。

因此，我們可以說語法錯誤發生在解析/編譯期間。

4. TypeError 類型錯誤

當其他NativeError對象中沒有一個是失敗原因的適當指示時，TypeError用于指示操作失敗。

對錯誤的數據類型執行操作時會發生TypeError。 可能是布爾值，但是找到了ing。

例如， 如果我們嘗試將數字轉換為大寫，如下所示：

將拋出一個 TypeError

因為toUpperCase函數需要字符串數據類型。 toUpperCase函數是有意通用的； 它不需要其this值為String對象。 因此，可以將其轉移到其他類型的對象中用作方法。

如果我們對Objects，Boolean，Symbol，null，undefined數據類型調用toUpperCase函數，則只有字符串會轉換為大寫或小寫形式，我們將得到TypeError，因為它操作的數據類型錯誤。

5. URIError

這表明使用一種全局URI處理功能與其定義不兼容。

JS中的URI（統一資源指示符）具有以下功能：decodeURI，decodeURIComponent等。

如果我們使用錯誤的參數調用它們中的任何一個，我們將得到URIError

encodeURI，獲取URI的未編碼版本。 “％”不是正確的URI，因此引發了URIError。

如果對URI進行編碼或解碼有問題，則會引發URIError。

6. EvalError

在使用全局eval（）函數時，此函數用于識別錯誤。

根據EcmaSpec 2018版： 此規范當前未使用此異常。 保留該對象是為了與本規范的先前版本兼容。

7. InternalError 內部錯誤

該錯誤在JS引擎內部發生，特別是當它有太多數據要處理并且堆棧增長超過其關鍵限制時。

當JS引擎被太多的遞歸，太多的切換情況等淹沒時，就會發生這種情況

太多的遞歸，一個簡單的例子是這樣的：

總結

正如我們所說，沒有人能避免犯錯誤。 就我們鍵入代碼而言，這是一個穩定的事件。 為了克服它，我們需要知道可以拋出的本機錯誤的類型。 我們在這篇文章中列出了它們，并提供了一些示例來說明它們是如何遇到的。
因此，無論何時在終端或瀏覽器中引發錯誤，您現在都可以輕松發現錯誤發生的位置和方式，并編寫更好，更不易出錯的代碼。

文：云和數據高級HTML5工程師