javaScript代碼飄紅報(bào)錯看不懂?讀完這篇文章再試試
一、本文將會出現(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)] 錯誤; 差錯; 謬誤;
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(引用錯誤):使用了未定義的變量。錯誤之前的代碼會執(zhí)行,之后代碼不會執(zhí)行。
// 1、變量未定義便直接使用 console.log(my); // 報(bào)錯:Uncaught ReferenceError: my is not defined // 翻譯:my未定義 // 2、將變量賦值給一個無法被賦值的東東 Math.random()=1; // 報(bào)錯:Uncaught ReferenceError: Invalid left-hand side in assignment // 翻譯:左側(cè)的賦值無效
2、TypeError(類型錯誤):變量或參數(shù)不是預(yù)期類型,或調(diào)用對象不存在的屬性方法。錯誤之前的代碼會執(zhí)行,之后代碼不會執(zhí)行。
// 1、變量不是預(yù)期類型,比如對字符串、布爾值、數(shù)值等原始類型的值使用new命令。 let userName = new "zhangpeiyue"; // 報(bào)錯:Uncaught TypeError: "zhangpeiyue" is not a constructor // 翻譯:"zhangpeiyue" 不是一個構(gòu)造函數(shù)。new 操作符后應(yīng)該是一個構(gòu)造函數(shù) // 2、變量不是預(yù)期類型,比如變量被作為函數(shù)來使用 let userName = "zhangpeiyue"; console.log(userName()) // 報(bào)錯:Uncaught TypeError: userName is not a function // 翻譯:userName 不是一個函數(shù) // 3、對象的屬性或方法不存在 const obj = undefined;// 為null也會報(bào)錯 console.log(obj.userName); // 報(bào)錯:Uncaught TypeError: Cannot read property 'userName' of undefined // 翻譯:undefined的環(huán)境下無法讀取屬性“userName”
3、RangeError(范圍錯誤):數(shù)據(jù)值不在JS所允許的范圍內(nèi)。錯誤之前的代碼會執(zhí)行,之后代碼不會執(zhí)行。
// 1、遞歸函數(shù)未設(shè)置跳出的條件 function run(){ run(); } run(); // 報(bào)錯:Uncaught RangeError: Maximum call stack size exceeded // 翻譯:超出最大調(diào)用堆棧大小。原因函數(shù)一直調(diào)用,直到達(dá)到調(diào)用堆棧限制。 // 2、無效的數(shù)組長度,應(yīng)該是個正整數(shù) const arr =new Array(-1); // 報(bào)錯:Uncaught RangeError: Invalid array length // 翻譯:無效的數(shù)組長度
4、SyntaxError(語法錯誤):即寫的代碼不符合js編碼規(guī)則。我們可以根據(jù)后面的信息提示去修改錯誤,當(dāng)然,語法錯誤,瀏覽器會直接報(bào)錯,整個代碼都不會執(zhí)行。
// 1、程序錯誤,比如寫錯,或者缺少 , ) ; } 這些符號。 const obj = {; // 報(bào)錯:Uncaught SyntaxError: Unexpected token ';' // 翻譯:";"該標(biāo)記有些出乎意料。 // 2、變量定義不合法 let 8userName = "zhangpeiyue"; // 報(bào)錯:Uncaught SyntaxError: Invalid or unexpected token // 翻譯:定義的變量標(biāo)記無效 // 3、對象屬性賦值語法錯誤 const obj = { userName = "zhangpeiyue" } // 報(bào)錯:Uncaught SyntaxError: Invalid shorthand property initializer // 翻譯:對象屬性初始值無效。原因:對象中屬性與其對應(yīng)的值之間使用“=” // 語法錯誤有很多,在此就不一一列舉了
三、通過try…catch處理Error
1、被try包裹的代碼塊一旦出現(xiàn)Error,會將Error傳遞給catch并運(yùn)行catch代碼塊。不會影響后續(xù)代碼運(yùn)行。
try{ console.log(userName); }catch (err) { // ReferenceError: userName is not defined console.log(err); } console.log("我還會繼續(xù)運(yùn)行哦?。?)
2、出現(xiàn)SyntaxError(語法錯誤),不會被拋出。
try{ // Uncaught SyntaxError: Invalid or unexpected token const 8userName = "zhangpeiyue"; }catch (err) { console.log(err); } console.log("我不會繼續(xù)運(yùn)行了?。?)
3、通過 throw new Error 拋出錯誤
try{ throw new Error("出現(xiàn)異常了"); }catch (err) { // 錯誤相關(guān)信息 console.log(err.message);// 出現(xiàn)異常了 // 函數(shù)調(diào)用棧記錄信息 console.log(err.stack);// Error: 出現(xiàn)異常了 } console.log("我還會繼續(xù)運(yùn)行哦??!")
4、不管有沒有異常,finally中的代碼都會在try和catch之后執(zhí)行
try{ throw new Error("出現(xiàn)異常了"); }catch (err) { // 錯誤相關(guān)信息 console.log(err.message);// 出現(xiàn)異常了 // 函數(shù)調(diào)用棧記錄信息 console.log(err.stack);// Error: 出現(xiàn)異常了 }finally { // 不管有沒有異常,我都會執(zhí)行。哪怕你有return,我也會執(zhí)行! console.log("不管有沒有異常,我都會執(zhí)行。哪怕你有return,我也會執(zhí)行!") } console.log("我還會繼續(xù)運(yùn)行哦?。?)
5、總結(jié)
- 只要不發(fā)生語法錯誤,程序即可不中斷執(zhí)行。
- 使用try包裹的代碼,即使不出錯,效率也比不用try包裹的代碼低。
- 在try中,盡量少的包含可能出錯的代碼。
- 無法提前預(yù)知錯誤類型的錯誤,必須用try catch捕獲。
- finally可以省略。
try{ //可能發(fā)生錯誤的代碼 }catch(err){ //只有發(fā)生錯誤時才執(zhí)行的代碼 }finally{ //無論是否出錯,肯定都要執(zhí)行的代碼 }
最后,代碼出現(xiàn)錯誤并不可怕,真正可怕的是你的業(yè)務(wù)及代碼邏輯出現(xiàn)問題才是真正災(zāi)難的開始!
到此這篇關(guān)于javaScript代碼飄紅報(bào)錯看不懂?讀完這篇文章再試試的文章就介紹到這了,更多相關(guān)javaScript 代碼報(bào)錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用JavaScript實(shí)現(xiàn)一個代碼簡潔、邏輯不復(fù)雜的多級樹
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)一個代碼簡潔、邏輯不復(fù)雜的多級樹,需要的朋友可以參考下2014-05-05引入autocomplete組件時JS報(bào)未結(jié)束字符串常量錯誤
在引入jQuery的autocomplete組件時,遇到j(luò)s報(bào)未結(jié)束字符串常量錯誤,原因及解決方法如下,大家可以參考下2014-03-03JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法
這篇文章主要介紹了JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法,涉及javascript操作ActiveXObject控件的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02jfreechart插件將數(shù)據(jù)展示成餅狀圖、柱狀圖和折線圖
閑暇之余,學(xué)習(xí)了一下jfreechart圖表生成,結(jié)合大蝦們的著作,小弟進(jìn)行了系統(tǒng)的總結(jié),真是獲益匪淺,這里推薦給小伙伴們,有需要的朋友可以參考下。2015-04-04判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號
這篇文章主要介紹了判斷文字超過2行添加展開按鈕,未超過則不顯示,溢出部分顯示省略號,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04JS基于遞歸實(shí)現(xiàn)倒計(jì)時效果的方法
這篇文章主要介紹了JS基于遞歸實(shí)現(xiàn)倒計(jì)時效果的方法,結(jié)合實(shí)例形式分析了javascript基于遞歸算法實(shí)現(xiàn)倒計(jì)時功能的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11