一、本文將會(huì)出現(xiàn)以下英語詞匯

assignment[əˈsaɪnmənt] 賦值;分配assignment [əˈsaɪnmənt] 分配;任務(wù)call [kɔːl] 調(diào)用caught [kɔːt] 捕獲;接住;截住;攔住;constructor [kənˈstrʌktə(r)] 構(gòu)造器cannot [ˈkænɒt] 不是catch [kætʃ] 接住;抓住constant[ˈkɒnstənt] 常量defined [dɪˈfaɪnd] 定義error [ˈerə(r)] 錯(cuò)誤; 差錯(cuò); 謬誤;exceeded [ɪkˈsiːdɪd] 超過function [ˈfʌŋkʃn] 函數(shù)finally [ˈfaɪnəli] 最終;最后invalid [ɪnˈvælɪd] 不承認(rèn)的; 無效的initializer [ɪˈnɪʃəˌlaɪzə] 初始值left-hand [ˈleft hænd] 左邊的Maximum [ˈmæksɪməm] 最大property [ˈprɒpəti] 屬性;財(cái)產(chǎn)stack [stæk] 堆棧shorthand [ˈʃɔːthænd]syntax [ˈsɪntæks] 句法; 句法規(guī)則; 語構(gòu);side [saɪd] 一邊;一側(cè);reference [ˈrefrəns] 談及; 涉及;range [reɪndʒ] 范圍;界限;區(qū)間; 類; 種;token [ˈtəʊkən] 令牌;標(biāo)記try [traɪ] 嘗試throw [θrəʊ] 投;擲;拋;扔;摔;丟;猛推;使勁撞Uncaught 未捕獲unexpected [ˌʌnɪkˈspektɪd] 出乎意料的;始料不及的undefined [ˌʌndɪˈfaɪnd] 未定義variable[ˈveəriəbl] 變量

二、帶你領(lǐng)略JS常見的四種Error類型

1、ReferenceError（引用錯(cuò)誤）：使用了未定義的變量。錯(cuò)誤之前的代碼會(huì)執(zhí)行，之后代碼不會(huì)執(zhí)行。

// 1、變量未定義便直接使用console.log(my);// 報(bào)錯(cuò)：Uncaught ReferenceError: my is not defined// 翻譯：my未定義 // 2、將變量賦值給一個(gè)無法被賦值的東東Math.random()=1;// 報(bào)錯(cuò)：Uncaught ReferenceError: Invalid left-hand side in assignment// 翻譯：左側(cè)的賦值無效

2、TypeError（類型錯(cuò)誤）：變量或參數(shù)不是預(yù)期類型，或調(diào)用對(duì)象不存在的屬性方法。錯(cuò)誤之前的代碼會(huì)執(zhí)行，之后代碼不會(huì)執(zhí)行。

// 1、變量不是預(yù)期類型，比如對(duì)字符串、布爾值、數(shù)值等原始類型的值使用new命令。let userName = new 'zhangpeiyue';// 報(bào)錯(cuò)：Uncaught TypeError: 'zhangpeiyue' is not a constructor// 翻譯：'zhangpeiyue' 不是一個(gè)構(gòu)造函數(shù)。new 操作符后應(yīng)該是一個(gè)構(gòu)造函數(shù) // 2、變量不是預(yù)期類型,比如變量被作為函數(shù)來使用let userName = 'zhangpeiyue';console.log(userName())// 報(bào)錯(cuò)：Uncaught TypeError: userName is not a function// 翻譯：userName 不是一個(gè)函數(shù) // 3、對(duì)象的屬性或方法不存在const obj = undefined;// 為null也會(huì)報(bào)錯(cuò)console.log(obj.userName);// 報(bào)錯(cuò)：Uncaught TypeError: Cannot read property ’userName’ of undefined// 翻譯：undefined的環(huán)境下無法讀取屬性“userName”

3、RangeError（范圍錯(cuò)誤）：數(shù)據(jù)值不在JS所允許的范圍內(nèi)。錯(cuò)誤之前的代碼會(huì)執(zhí)行，之后代碼不會(huì)執(zhí)行。

// 1、遞歸函數(shù)未設(shè)置跳出的條件function run(){ run();}run();// 報(bào)錯(cuò)：Uncaught RangeError: Maximum call stack size exceeded// 翻譯：超出最大調(diào)用堆棧大小。原因函數(shù)一直調(diào)用，直到達(dá)到調(diào)用堆棧限制。 // 2、無效的數(shù)組長(zhǎng)度，應(yīng)該是個(gè)正整數(shù)const arr =new Array(-1);// 報(bào)錯(cuò)：Uncaught RangeError: Invalid array length// 翻譯：無效的數(shù)組長(zhǎng)度

4、SyntaxError（語法錯(cuò)誤）：即寫的代碼不符合js編碼規(guī)則。我們可以根據(jù)后面的信息提示去修改錯(cuò)誤，當(dāng)然，語法錯(cuò)誤，瀏覽器會(huì)直接報(bào)錯(cuò)，整個(gè)代碼都不會(huì)執(zhí)行。

// 1、程序錯(cuò)誤，比如寫錯(cuò)，或者缺少 ， ） ； } 這些符號(hào)。const obj = {;// 報(bào)錯(cuò)：Uncaught SyntaxError: Unexpected token ’;’// 翻譯：';'該標(biāo)記有些出乎意料。 // 2、變量定義不合法let 8userName = 'zhangpeiyue';// 報(bào)錯(cuò)：Uncaught SyntaxError: Invalid or unexpected token// 翻譯：定義的變量標(biāo)記無效 // 3、對(duì)象屬性賦值語法錯(cuò)誤const obj = { userName = 'zhangpeiyue'}// 報(bào)錯(cuò)：Uncaught SyntaxError: Invalid shorthand property initializer// 翻譯：對(duì)象屬性初始值無效。原因：對(duì)象中屬性與其對(duì)應(yīng)的值之間使用“=”// 語法錯(cuò)誤有很多，在此就不一一列舉了

三、通過try…catch處理Error

1、被try包裹的代碼塊一旦出現(xiàn)Error,會(huì)將Error傳遞給catch并運(yùn)行catch代碼塊。不會(huì)影響后續(xù)代碼運(yùn)行。

try{ console.log(userName);}catch (err) { // ReferenceError: userName is not defined console.log(err);}console.log('我還會(huì)繼續(xù)運(yùn)行哦！！')

2、出現(xiàn)SyntaxError（語法錯(cuò)誤），不會(huì)被拋出。

try{ // Uncaught SyntaxError: Invalid or unexpected token const 8userName = 'zhangpeiyue';}catch (err) { console.log(err);}console.log('我不會(huì)繼續(xù)運(yùn)行了！！')

3、通過 throw new Error 拋出錯(cuò)誤

try{ throw new Error('出現(xiàn)異常了');}catch (err) { // 錯(cuò)誤相關(guān)信息 console.log(err.message);// 出現(xiàn)異常了 // 函數(shù)調(diào)用棧記錄信息 console.log(err.stack);// Error: 出現(xiàn)異常了}console.log('我還會(huì)繼續(xù)運(yùn)行哦！！')

4、不管有沒有異常，finally中的代碼都會(huì)在try和catch之后執(zhí)行

try{ throw new Error('出現(xiàn)異常了');}catch (err) { // 錯(cuò)誤相關(guān)信息 console.log(err.message);// 出現(xiàn)異常了 // 函數(shù)調(diào)用棧記錄信息 console.log(err.stack);// Error: 出現(xiàn)異常了}finally { // 不管有沒有異常，我都會(huì)執(zhí)行。哪怕你有return,我也會(huì)執(zhí)行！ console.log('不管有沒有異常，我都會(huì)執(zhí)行。哪怕你有return,我也會(huì)執(zhí)行！')}console.log('我還會(huì)繼續(xù)運(yùn)行哦！！')

5、總結(jié)

只要不發(fā)生語法錯(cuò)誤，程序即可不中斷執(zhí)行。 使用try包裹的代碼，即使不出錯(cuò)，效率也比不用try包裹的代碼低。 在try中，盡量少的包含可能出錯(cuò)的代碼。 無法提前預(yù)知錯(cuò)誤類型的錯(cuò)誤，必須用try catch捕獲。 finally可以省略。

try{ //可能發(fā)生錯(cuò)誤的代碼}catch(err){ //只有發(fā)生錯(cuò)誤時(shí)才執(zhí)行的代碼}finally{ //無論是否出錯(cuò)，肯定都要執(zhí)行的代碼}

最后，代碼出現(xiàn)錯(cuò)誤并不可怕，真正可怕的是你的業(yè)務(wù)及代碼邏輯出現(xiàn)問題才是真正災(zāi)難的開始!

到此這篇關(guān)于javaScript代碼飄紅報(bào)錯(cuò)看不懂？讀完這篇文章再試試的文章就介紹到這了,更多相關(guān)javaScript 代碼報(bào)錯(cuò)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！