一、本文將會出現以下英語詞彙

assignment[əˈsaɪnmənt] 賦值;分配
assignment [əˈsaɪnmənt] 分配;任務
call [kɔːl] 呼叫
caught [kɔːt] 捕獲;接住;截住;攔住;
constructor [kənˈstrʌktə(r)] 構造器
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] 函式
finally [ˈfaɪnəli] 最終;最後
invalid [ɪnˈvælɪd] 不承認的; 無效的
initializer [ɪˈnɪʃəˌlaɪzə] 初始值
left-hand [ˈleft hænd] 左邊的
Maximum [ˈmæksɪməm] 最大
property [ˈprɒpəti] 屬性;財產
stack [stæk] 堆疊
shorthand [ˈʃɔːthænd]
syntax [ˈsɪntæks] 句法; 句法規則; 語構;
side [saɪd] 一邊;一側;
reference [ˈrefrəns] 談及; 涉及;
range [reɪndʒ] 範圍;界限;區間; 類; 種;
token [ˈtəʊkən] 令牌;標記
try [traɪ] 嘗試
throw [θrəʊ] 投;擲;拋;扔;摔;丟;猛推;使勁撞
Uncaught 未捕獲
unexpected [ˌʌnɪkˈspektɪd] 出乎意料的;始料不及的
undefined [ˌʌndɪˈfaɪnd] 未定義
variable[ˈveəriəbl] 變數

二、帶你領略JS常見的四種Error型別

1、ReferenceError（引用錯誤）：使用了未定義的變數。錯誤之前的程式碼會執行，之後程式碼不會執行。

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

2、TypeError（型別錯誤）：變數或引數不是預期型別，或呼叫物件不存在的屬性方法。錯誤之前的程式碼會執行，之後程式碼不會執行。

// 1、變數不是預期型別，比如對字串、布林值、數值等原始型別的值使用new命令。
let userName = new "zhangpeiyue";
// 報錯：Uncaught TypeError: "zhangpeiyue" is not a constructor
// 翻譯："zhangpeiyue" 不是一個建構函式。new 操作符後應該是一個建構函式
 
// 2、變數不是預期型別,比如變數被作為函式來使用
let userName = "zhangpeiyue";
console.log(userName())
// 報錯：Uncaught TypeError: userName is not a function
// 翻譯：userName 不是一個函式
 
// 3、物件的屬性或方法不存在
const obj = undefined;// 為null也會報錯
console.log(obj.userName);
// 報錯：Uncaught TypeError: Cannot read property 'userName' of undefined
// 翻譯：undefined的環境下無法讀取屬性“userName”

3、RangeError（範圍錯誤）：資料值不在JS所允許的範圍內。錯誤之前的程式碼會執行，之後程式碼不會執行。

// 1、遞迴函式未設定跳出的條件
function run(){
 run();
}
run();
// 報錯：Uncaught RangeError: Maximum call stack size exceeded
// 翻譯：超出最大呼叫堆疊大小。原因函式一直呼叫，直到達到呼叫堆疊限制。
 
// 2、無效的陣列長度，應該是個正整數
const arr =new Array(-1);
// 報錯：Uncaught RangeError: Invalid array length
// 翻譯：無效的陣列長度

4、SyntaxError（語法錯誤）：即寫的程式碼不符合js編碼規則。我們可以根據後面的資訊提示去修改錯誤，當然，語法錯誤，瀏覽器會直接報錯，整個程式碼都不會執行。

// 1、程式錯誤，比如寫錯，或者缺少 ， ） ； } 這些符號。
const obj = {;
// 報錯：Uncaught SyntaxError: Unexpected token ';'
// 翻譯：";"該標記有些出乎意料。
 
// 2、變數定義不合法
let 8userName = "zhangpeiyue";
// 報錯：Uncaught SyntaxError: Invalid or unexpected token
// 翻譯：定義的變數標記無效
 
// 3、物件屬性賦值語法錯誤
const obj = {
 userName = "zhangpeiyue"
}
// 報錯：Uncaught SyntaxError: Invalid shorthand property initializer
// 翻譯：物件屬性初始值無效。原因：物件中屬性與其對應的值之間使用“=”

// 語法錯誤有很多，在此就不一一列舉了

三、通過try…catch處理Error

1、被try包裹的程式碼塊一旦出現Error,會將Error傳遞給catch並執行catch程式碼塊。不會影響後續程式碼執行。

try{
 console.log(userName);
}catch (err) {
 // ReferenceError: userName is not defined
 console.log(err);
}
console.log("我還會繼續執行哦！！")

2、出現SyntaxError（語法錯誤），不會被丟擲。

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

3、通過 throw new Error 丟擲錯誤

try{
 throw new Error("出現異常了");
}catch (err) {
 // 錯誤相關資訊
 console.log(err.message);// 出現異常了
 // 函式呼叫棧記錄資訊
 console.log(err.stack);// Error: 出現異常了
}
console.log("我還會繼續執行哦！！")

4、不管有沒有異常，finally中的程式碼都會在try和catch之後執行

try{
 throw new Error("出現異常了");
}catch (err) {
 // 錯誤相關資訊
 console.log(err.message);// 出現異常了
 // 函式呼叫棧記錄資訊
 console.log(err.stack);// Error: 出現異常了
}finally {
 // 不管有沒有異常，我都會執行。哪怕你有return,我也會執行！
 console.log("不管有沒有異常，我都會執行。哪怕你有return,我也會執行！")
}
console.log("我還會繼續執行哦！！")

5、總結

• 只要不發生語法錯誤，程式即可不中斷執行。
• 使用try包裹的程式碼，即使不出錯，效率也比不用try包裹的程式碼低。
• 在try中，儘量少的包含可能出錯的程式碼。
• 無法提前預知錯誤型別的錯誤，必須用try catch捕獲。
• finally可以省略。

try{

 //可能發生錯誤的程式碼
}catch(err){
 //只有發生錯誤時才執行的程式碼
}finally{
 //無論是否出錯，肯定都要執行的程式碼
}

最後，程式碼出現錯誤並不可怕，真正可怕的是你的業務及程式碼邏輯出現問題才是真正災難的開始!

到此這篇關於javaScript程式碼飄紅報錯看不懂？讀完這篇文章再試試的文章就介紹到這了,更多相關javaScript 程式碼報錯內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！