天天看點

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

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

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

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

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

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

1. RangeError

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

例如,

const l = console.log
const arr = [90,88]
arr.length=90**99
      

我們有一個帶有兩個元素的arr。接下來,我們嘗試使數組包含

90**99 == 2.9512665430652753e+193

元素。

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

$ node errors
errors.js:4
arr.length=90**99
 ^
RangeError: Invalid array length
      

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

2. ReferenceError

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

const l=console.log

const cat = "cat"
cat
dog
      

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

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

$ node errors
errors.js:3
dog
^

ReferenceError: dog is not defined
      

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

+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+
      

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

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

var cat

env record
+-----------------+
| Key | Value     |
-------------------
| cat | undefined |
+-----------------+
      

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

var cat
cat = "cat"

env record
+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+
      

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

+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+
cat // "cat", yes, :) it's there
dog // :( what's this? can't find it
      

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

3. SyntaxError

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

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

  • 标記化
  • 解析
  • 執行

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

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

const l = console.log 
let cat h =“ cat”
      

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

$ node errors
errors.js:3
let cat h = "cat"
 ^

SyntaxError: Unexpected identifier
      

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

4. TypeError

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

再例如:

const num = 123 
num.toUpperCase()
      

這會引發TypeError

$ node errors
errors.js:4
num.toUpperCase()
 ^

TypeError: num.toUpperCase is not a function      

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

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

5. URIError

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

JS中的URI(統一資源訓示符)具有以下功能:decodeURI,decodeURIComponent等。

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

decodeURI("%")
^

URIError: URI malformed
      

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

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

6. EvalError

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

根據EcmaSpec 2018版:

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

7. InternalError

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

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

switch(num) {
case 1:
...
break
case 2:
...
break
case 3:
...
break
case 4:
...
break
case 5:
...
break
case 6:
...
break
case 7:
...
break
... up to 1000 cases
}
      

太多的遞歸,一個簡單的例子是這樣的:

function foo() {
foo()
}
foo()
      

結論

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

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

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

  

本文是由葡萄城技術開發團隊釋出,轉載請注明出處:葡萄城官網