7種你應該知道的JavaScript常見的錯誤

7種你應該知道的JavaScript常見的錯誤

從浏覽器的控制台到運作Node.js的計算機終端，我們到處都會看到各類錯誤。

這篇文章的重點是概述我們在JS開發過程中可能遇到的錯誤類型。

1. RangeError

   當數字超出允許的值範圍時，将抛出此錯誤。

例如，

1

2

3

const l = console.log

const arr = [90,88]

arr.length=90**99

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

這個數字超出了大小數組可以增長的範圍。是以運作時它會抛出RangeError：

4

5

$ node errors

errors.js:4

 ^

RangeError: Invalid array length

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

1. ReferenceError

   當對變量/項的引用被破壞或不存在時，将引發此錯誤。也就是說，變量/項不存在。

const l=console.log

const cat = "cat"

cat

dog

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

cat将傳回“ cat”，而dog會引發ReferenceError，因為在環境記錄中找不到名為dog的變量。

6

errors.js:3

^

ReferenceError: dog is not defined

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

Key	Value

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

現在，當我們建立或定義一個沒有指派的變量時。變量将鍵作為變量名寫入環境記錄，但該值将保持未定義狀态。

7

8

var cat

env record
	Value

稍後為變量配置設定值時，将在env記錄中搜尋該變量，當發現該初始未定義值時，該指派将被覆寫。

9

cat = "cat"

是以，當在env記錄中找不到變量名時，JS引擎會抛出RefernceError。

cat // "cat", yes, :) it's there

dog // :( what's this? can't find it

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

1. SyntaxError

   這是我們遇到的最常見的錯誤。當我們鍵入JS引擎難以了解的代碼時，會出現此錯誤。解析期間，JS引擎捕獲了此錯誤。

在JS引擎中，我們的代碼經曆了不同的階段，然後才能在終端上看到運作結果。

标記化

解析

執行

标記化将源代碼分解為各個單元。在這個階段，将對數字，關鍵字，文字，運算符進行分類并分别進行标記。接下來，生成的token流将傳遞到解析階段，由解析器處理。這是從token生成AST的地方。AST是我們代碼結構的抽象資料結構。

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

let cat h =“ cat”

這裡的“h”明顯是多餘的，是以由于多了這個字元，會導緻引擎抛出SyntaxError

let cat h = "cat"

SyntaxError: Unexpected identifier

很顯然，Node.js引擎發現了錯誤，由于這個不和諧字元的出現，導緻cat變量的聲明失敗了。

1. TypeError

   TypeError 是指對象用來表示值的類型非預期類型時發生的錯誤。例如，我們期望它是布爾值，但結果發現它是string類型。

再例如：

const num = 123

num.toUpperCase()

這會引發TypeError

^

TypeError: num.toUpperCase is not a function

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

如果我們在Objects，Boolean，Symbol，null，undefined資料類型上調用toUpperCase函數，則隻有字元串會轉換為大寫或小寫形式，我們将得到TypeError，因為它操作的資料類型錯誤。

1. URIError

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

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

如果我們用錯誤的參數調用其中任何一個，我們将得到一個URIError。

decodeURI("%")

URIError: URI malformed

encodeURI，擷取URI的未編碼版本。“％”不是正确的URI，是以引發了URIError。

編碼或解碼URI時出現問題時，将引發URIError。

1. EvalError

   如果非法調用 eval()，則抛出 EvalError 異常。

根據EcmaSpec 2018版：

此異常不再會被JavaScript抛出，但是EvalError對象仍然保持相容性。

1. InternalError

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

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

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

switch(num) {

case 1:

...

break

case 2:

case 3:

case 4:

case 5:

case 6:

case 7:

... up to 1000 cases

}

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

function foo() {

foo()

結論

正如我們所說，沒有人能不犯錯誤。就我們輸入的代碼而言，發生錯誤是難以避免的。不過為了避免更多的錯誤出現，我們需要知道抛出的錯誤的類型是什麼，我們該如何解決。

是以我們在這篇文章中列出了它們，并提供了一些示例來簡要的來介紹了它們是如何發生的。

最後，希望本文的一些淺見能為你寫出更好的代碼提供一些幫助，謝謝！

轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

原文出處：

https://blog.bitsrc.io/types-of-native-errors-in-javascript-you-must-know-b8238d40e492