7個你應(yīng)該知道的JS原生錯誤類型
概述
從瀏覽器控制臺到運行 Node.js的終端,我們到處都會看到錯誤。本文的重點是概述我們在js開發(fā)過程中可能遇到的錯誤類型。
提示:良好的錯誤提示會導(dǎo)致快速而無痛的發(fā)展經(jīng)歷與緩慢而痛苦的發(fā)展經(jīng)歷之間的區(qū)別。在編寫可重用的代碼時,請確保自己在編寫清晰易懂的錯誤處理代碼。
1. RangeError
當數(shù)字超出允許的值范圍時,將會拋出此錯誤。
例如
const l = console.logconst arr = [90,88] arr.length=90**99
我們有一個數(shù)組,帶有兩個元素的 arr。接下來,嘗試將數(shù)組擴展為包含90**99 == 2.9512665430652753e+193個元素。
這個數(shù)字超出了數(shù)組大小可以增長的范圍。運行它會拋出 RangeError:
$ node errors
errors.js:4
arr.length=90**99
^RangeError: Invalid array length
因為我們要增加 arr 數(shù)組的大小超出了 JS 指定的范圍。
2. ReferenceError
當對變量或項目的引用被破壞時,將會引發(fā)此錯誤。那是變量或項目不存在。
例如
const l=console.logconst cat = "cat" cat dog
有一個變量cat被初始化為 “cat”。接下來引用了cat變量和dog變量。cat變量存在,而dog變量不存在。
cat將返回 “cat”,而dog將引發(fā)引用錯誤,因為在環(huán)境記錄中找不到名稱dog。
$ node errors
errors.js:3
dog
^ReferenceError: dog is not defined
每當我們創(chuàng)建或定義變量時,變量名稱都會寫入環(huán)境記錄中。環(huán)境記錄就像鍵值存儲一樣,
+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+
每當我們引用變量時,它都會存儲程序中定義的變量。當在記錄中找到環(huán)境值并提取并返回值時,將以該變量的名稱作為關(guān)鍵字在環(huán)境記錄進行搜索。調(diào)用尚未定義的函數(shù)。
現(xiàn)在,當我們創(chuàng)建或定義一個沒有賦值的變量時。變量將其鍵作為變量名寫入環(huán)境記錄,但其值將會保持未定義的狀態(tài)。
var catenv record
+-----------------+
| Key | Value |
-------------------
| cat | undefined |
+-----------------+
稍后為變量分配值時,將在環(huán)境記錄中搜索該變量,當發(fā)現(xiàn)它未定義值時,該賦值將被覆蓋。
var cat
cat = "cat"env record
+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+
所以當在環(huán)境記錄中找不到變量名時,JS 引擎將引發(fā) RefernceError。
+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+cat // "cat", yes, :) it's there
dog // :( what's this? can't find it
注意:未定義的變量不會拋出 ReferenceError,因為它在于環(huán)境記錄中的值尚未設(shè)置。
3. SyntaxError
這是最常見的錯誤。當我們輸入 JS 引擎不能理解的代碼時,就會發(fā)生這個錯誤。
JS 引擎在解析期間捕獲了這個錯誤。在 JS 引擎中,我們的代碼經(jīng)歷了不同的階段,然后才能在終端上看到結(jié)果。
- 標記化
- 解析
- 解釋
標記化將代碼的源分解為各個單元。在此階段,將對數(shù)字、關(guān)鍵字、文字、運算符進行分類并分別標記。
接下來,生成的標記流將會傳遞到解析階段,由解析器處理。這是從標記流生成 AST 的地方。 AST 是代碼結(jié)構(gòu)的抽象表示。
在標記化和解析這兩個階段,如果我們代碼的語法不符合 JS 的語法規(guī)則,則會使該階段失敗并引發(fā) SyntaxError。例如:
const l = console.loglet cat h = "cat"
代碼中的 “h” 代表什么?這個 “h” 破壞了代碼。
$ node errors
errors.js:3
let cat h = "cat"
^SyntaxError: Unexpected identifier
看,Node.js 指出了問題的所在。它說 “h” 是意外的,它破壞了cat 變量的聲明。
因此,可以說語法錯誤在解析或編譯期間發(fā)生。
4. TypeError
當其他 NativeError 對象中沒有適當?shù)氖≡虻闹甘緯r,TypeError 用于指示操作失敗。
對錯誤的數(shù)據(jù)類型執(zhí)行操作時會發(fā)生 TypeError,例如:
如果我們嘗試將數(shù)字轉(zhuǎn)換為大寫,如下所示:
const num = 123 num.toUpperCase()
這將引發(fā)TypeError
$ node errors
errors.js:4
num.toUpperCase()
^TypeError: num.toUpperCase is not a function
因為toUpperCase函數(shù)需要字符串數(shù)據(jù)類型。toUpperCase函數(shù)是有意通用的;它不需要其this值是String對象。因此,可以將其轉(zhuǎn)移到其他種類的對象中用作方法。
只有字符串才會轉(zhuǎn)換為大寫或小寫形式,如果我們在 Objects、Boolean、Symbol、null、undefined 數(shù)據(jù)類型上調(diào)用toUpperCase函數(shù),則將會得到 TypeError,因為它操作的數(shù)據(jù)類型錯誤。
5. URIError
這表明使用了一種與其定義不兼容的全局 URI 處理函數(shù)。
JS 中的 URI(統(tǒng)一資源指示符)具有以下功能:decodeURI、decodeURIComponent 等。
如果我們用錯誤的參數(shù)去調(diào)用其中任何一個,將得會到一個 URIError。
decodeURI("%") ^URIError: URI malformed
encodeURI用于獲取 URI 的未編碼版本。 “%” 不是正確的 URI,因此引發(fā)了URIError。
當 URI 編碼或解碼出現(xiàn)問題時,會引發(fā) URIError。
6. EvalError
當使用全局eval()函數(shù)時,這用于識別錯誤。
根據(jù) EcmaSpec 2018 版:
此規(guī)范當前未使用此異常。保留它目的是為了與本規(guī)范的先前版本兼容。
7. InternalError
該錯誤在 JS 引擎內(nèi)部發(fā)生,特別是當它有太多數(shù)據(jù)要處理并且棧增長超過其關(guān)鍵限制的時侯。
當 JS 引擎被過多的遞歸和切換情況等淹沒時,就會發(fā)生這種問題
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()
總結(jié)
正如我們所說,誰都會犯錯誤。就我們敲代碼這件事而言,這是一個穩(wěn)定的事件。為了克服它,我們需要知道可以拋出的原生錯誤的類型。本文中列出了它們,并提供了一些示例來說明它們是如何引發(fā)的。
所以無論什么時候在終端或瀏覽器中引發(fā)錯誤,你都可以輕松發(fā)現(xiàn)錯誤產(chǎn)生的位置和方式,并能夠編寫更好、更不易出錯的代碼。
以上就是7個你應(yīng)該知道的JS原生錯誤類型的詳細內(nèi)容,更多關(guān)于JS原生錯誤類型的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS表示Stack類練習(xí)用棧實現(xiàn)任意進制轉(zhuǎn)換
這篇文章主要為大家介紹了JS表示Stack類練習(xí)用棧實現(xiàn)任意進制轉(zhuǎn)換示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04JavaScript中的canvas?實現(xiàn)一個圓環(huán)漸變倒計時效果
這篇文章主要介紹了JavaScript中的canvas?實現(xiàn)一個圓環(huán)漸變倒計時效果,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-09-09uni-app實現(xiàn)數(shù)據(jù)下拉刷新功能實例
很多列表頁總數(shù)量很大,一次性查詢加載會導(dǎo)致頁面有很長時間的空白期,自然體驗感極差,就會使用分頁加載數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于uni-app實現(xiàn)數(shù)據(jù)下拉刷新功能實例的相關(guān)資料,需要的朋友可以參考下2022-08-08javascript getElementByTagName的使用
javascript getElementByTagName當鼠標放上去時將超鏈接的顏色設(shè)為藍色的。2009-06-06JavaScript實現(xiàn)廣告的關(guān)閉與顯示效果實例
這篇文章主要介紹了JavaScript實現(xiàn)廣告的關(guān)閉與顯示效果,涉及javascript廣告窗口的關(guān)閉與顯示效果實現(xiàn)技巧,需要的朋友可以參考下2015-07-07