web前端開發(fā)中的常見錯(cuò)誤有哪些

本篇內(nèi)容介紹了“web前端開發(fā)中的常見錯(cuò)誤有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

定義

首先，我們要知道的關(guān)于Error的內(nèi)容如下：

1. Error對(duì)象是JavaScript的一個(gè)內(nèi)置對(duì)象，也就是說(shuō)所有的js引擎都會(huì)默認(rèn)支持這個(gè)對(duì)象;

2. 當(dāng)我們以函數(shù)的形式去使用Error的時(shí)候，Error('xx err') 和 new Error('xx  err')得到的結(jié)果是一樣的，所以你大可以省略掉new關(guān)鍵字(注意這跟String，Number等內(nèi)置對(duì)象是不一樣的，后者使用new和不使用new的場(chǎng)景返回的類型是不同的~);

3. 通過Error的構(gòu)造器可以創(chuàng)建一個(gè)錯(cuò)誤對(duì)象。當(dāng)運(yùn)行時(shí)錯(cuò)誤產(chǎn)生時(shí)，Error的實(shí)例對(duì)象會(huì)被拋出。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

獲取瀏覽器支持的所有Errors對(duì)象

這里以chrome為例，打開chrome，在console中復(fù)制下面的代碼，然后回車拿到結(jié)果。

Object.getOwnPropertyNames(window).filter(err => err.endsWith ('Error'))

得到結(jié)果如下：

下面我們分別介紹這些錯(cuò)誤類型的詳情。

Error

關(guān)注指數(shù)： 5

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. Error代表一個(gè)js中的錯(cuò)誤對(duì)象，當(dāng)運(yùn)行時(shí)候有錯(cuò)誤發(fā)生，Error的實(shí)例對(duì)象會(huì)被拋出，當(dāng)然我們也可以利用此對(duì)象去構(gòu)造一些自定義的錯(cuò)誤對(duì)象。

3. 參數(shù)，從caniuse上可以查到，大部分的瀏覽器都支持了message 和 filename  和lineno(發(fā)生錯(cuò)誤的代碼行數(shù))，所以我們使用的時(shí)候可以放心大膽的用~ 

通過Error可以擴(kuò)展JavaScript錯(cuò)誤類型，舉個(gè)例子，定義一個(gè)BusinessError如下：

class BusinessError extends Error {    constructor({message, filename, lineno, ...params}){     super(message, filename, lineno);     this.name = 'BusinessError'; // 設(shè)置name可以修改拋出錯(cuò)誤的name     // TODO: 假裝有代碼。。    } }

控制臺(tái)輸入：

Object.getOwnPropertyNames(window).filter(err => err.endsWith('Error')).map(el => window[el].prototype.__proto__.constructor)

可以看到輸出結(jié)果：

除了第一個(gè)，從index 1-6  log出來(lái)的原型的構(gòu)造函數(shù)都是Error函數(shù)，說(shuō)明這幾個(gè)錯(cuò)誤類型都是繼承自Error，下面分別了解一下這幾個(gè)錯(cuò)誤類型的詳細(xì)內(nèi)容。

按照關(guān)注指數(shù)等級(jí)從高(5)到低(0)來(lái)排序。

ReferenceError

關(guān)注指數(shù)： 5

ReferenceError，當(dāng)嘗試引用一個(gè)未被定義的變量時(shí)，將會(huì)拋出一個(gè) ReferenceError  相對(duì)而言，這個(gè)錯(cuò)誤類型還是一個(gè)比較重要的錯(cuò)誤類型，我們都知道js里面有一個(gè)關(guān)鍵字叫undefined，但是要搞清楚的是，undefined的真正意義并非“未定義”，更貼切的說(shuō)應(yīng)該一個(gè)變量被聲名了，但是未初始化時(shí)候的值是undefined，如果真的去直接使用一個(gè)未聲名的變量，就會(huì)出現(xiàn)  ReferenceError

控制臺(tái)輸入 eeee [一個(gè)根本未聲名過的變量]，直接回車就可以看到報(bào)錯(cuò)信息：

這個(gè)錯(cuò)誤類型在平時(shí)開發(fā)過程中還是比較常見的，如果下次在遇到，就找找是不是哪個(gè)變量沒有聲名就直接使用了~

SyntaxError

關(guān)注指數(shù)：5

SyntaxError， 字面意思語(yǔ)法錯(cuò)誤，官方解釋是-對(duì)象代表嘗試解析語(yǔ)法上不合法的代碼的錯(cuò)誤，我們知道js是一個(gè)解釋性語(yǔ)言，在正真運(yùn)行的過程中會(huì)按照  詞法分析[解析成tokens] => 語(yǔ)法分析[轉(zhuǎn)為ast語(yǔ)法樹] =>  解釋執(zhí)行的過程，轉(zhuǎn)為ast的過程中，js的引擎會(huì)同時(shí)校驗(yàn)tokens，當(dāng)它發(fā)現(xiàn)不合規(guī)范的tokens或者順序不正確的token的時(shí)候，就會(huì)報(bào)出SyntaxError這個(gè)錯(cuò)誤;

控制臺(tái)輸入 []{} 和 1.toFixed() ，回車看報(bào)錯(cuò)信息：

可以看到一半都會(huì)帶上是解析到哪個(gè)token的時(shí)候出的問題，所以當(dāng)我們寫了一些不符合js語(yǔ)法規(guī)范的代碼，開發(fā)過程中還是要注意一些基本語(yǔ)法的正確性的。

TypeError

關(guān)注指數(shù)：5

TypeError，字面意思類型錯(cuò)誤，官方解釋-對(duì)象用來(lái)表示值的類型非預(yù)期類型時(shí)發(fā)生的錯(cuò)誤，實(shí)際的意思其實(shí)就是當(dāng)給了一個(gè)錯(cuò)誤的參數(shù)，或者調(diào)用了一個(gè)錯(cuò)誤的，并不存在的方法的時(shí)候，就會(huì)出現(xiàn)這個(gè)錯(cuò)誤，看例子：

當(dāng)我們調(diào)用了一個(gè)不存在方法的時(shí)候，就會(huì)出現(xiàn)TypeError，所以當(dāng)我們寫代碼的時(shí)候，一定要注意變量的類型，我們知道xx()會(huì)去調(diào)用這個(gè)方法，但是實(shí)際上它并不是一個(gè)真正function的時(shí)候就會(huì)報(bào)這個(gè)錯(cuò)。

RangeError

關(guān)注指數(shù)：3

RangeError 表示數(shù)值變量或參數(shù)超出其有效范圍，有一種非常常見的場(chǎng)景：[ERROR] : RangeError: Maximum call  stack size exceeded.，想必大家都知道這種情況一般是遞歸過深或者死循環(huán)的時(shí)候會(huì)出現(xiàn)，還有一種比較常見的是new  Array的時(shí)候給了錯(cuò)誤的參數(shù)，如下：

還有一些特殊的情況會(huì)導(dǎo)致這個(gè)錯(cuò)誤，有興趣的同學(xué)可以去自行了解一下~

URLError

關(guān)注指數(shù)：1

URLError，是一個(gè)比較固定場(chǎng)景下會(huì)出現(xiàn)的錯(cuò)誤，decodeURI, encodeURI, encodeURIComponent,  decodeURIComponent當(dāng)這幾個(gè)方法在處理url過程中出現(xiàn)錯(cuò)誤導(dǎo)致decode或者encode失敗的情況下，就會(huì)拋出這個(gè)類型的錯(cuò)誤，這個(gè)場(chǎng)景只要記住看到這個(gè)類型，就說(shuō)明是這幾個(gè)api的問題就可以了。

EvalError

關(guān)注指數(shù)：0

EvalError  代表了一個(gè)關(guān)于eval函數(shù)報(bào)錯(cuò)的類型，但是目前大部分場(chǎng)景下已經(jīng)用不到這個(gè)類型了，JavaScript不會(huì)再拋出此類型的錯(cuò)誤，但是會(huì)保持這個(gè)類型的兼容性，所以對(duì)這個(gè)錯(cuò)誤類型可以不必給與太多的關(guān)系。

Error以外的一些錯(cuò)誤類型

以上我們就把所有繼承自Error的錯(cuò)誤都了解完了，下面我們整理一下剩余的一些錯(cuò)誤，雖然不是很常見，但是留個(gè)印象，遇到的時(shí)候能想起來(lái)就可以了。

RTCError

這個(gè)就不給關(guān)注指數(shù)了，這個(gè)是在使用rtc(網(wǎng)頁(yè)即時(shí)通訊)技術(shù)過程中可能會(huì)出現(xiàn)的一個(gè)錯(cuò)誤類型，它是繼承自DOMException這個(gè)類型的，所以如果你正在從事相關(guān)內(nèi)容開發(fā)的話還是需要關(guān)注一下的，而我們平常不涉及到的，我覺得等你用的時(shí)候再去關(guān)注也是沒啥問題的。

OverconstrainedError

這個(gè)也不給關(guān)注指數(shù)，同樣是一個(gè)特定場(chǎng)景才需要關(guān)注的問題，瀏覽器提供了讓開發(fā)者向用戶獲取音頻和視頻權(quán)限的api，通過調(diào)用MediaDevices.getUserMedia(param)即可，其中param中可以同配置來(lái)決定是要音頻的權(quán)限(錄音)還是視頻的權(quán)限(攝像頭)，如果是攝像頭，甚至可以配置需要的分辨率等配置，當(dāng)配置的分辨率用戶機(jī)器上沒有，或者達(dá)不到的時(shí)候，就會(huì)報(bào)這個(gè)錯(cuò)誤類型。

DOMError

關(guān)注指數(shù)：-1

這個(gè)API已經(jīng)被Deprecated了，不要在關(guān)注了~

MediaError

關(guān)注指數(shù)：4

MediaError，用在基于HTMLMediaElement的標(biāo)簽，比如<video/>和<audio/>標(biāo)簽，當(dāng)這些媒體資源使用過程中報(bào)錯(cuò)就會(huì)觸發(fā)這個(gè)錯(cuò)誤類型，它包含了2部分，一個(gè)是code，代表錯(cuò)誤的大概類型，另一個(gè)message，表示錯(cuò)誤的詳細(xì)信息，具體的內(nèi)容，可以查看介紹。

webkitSpeechRecognitionError

這個(gè)也不給關(guān)注指數(shù)，這個(gè)錯(cuò)誤首先是基于一個(gè)瀏覽器的實(shí)驗(yàn)特性-語(yǔ)音識(shí)別來(lái)的，因?yàn)槭窃赾hrome中所以會(huì)有webkit前綴，實(shí)際上應(yīng)該是不帶私有前綴的，這個(gè)錯(cuò)誤會(huì)在語(yǔ)音識(shí)別本身過程出錯(cuò)的時(shí)候被拋出，有需要的小伙伴可以到這里去查看相關(guān)的內(nèi)容。

“web前端開發(fā)中的常見錯(cuò)誤有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！