1. 程式人生 > 實用技巧 >前端開發中Js常見錯誤

前端開發中Js常見錯誤

1.錯誤分為兩種:

(1)程式碼錯誤:這種錯誤瀏覽器會報錯,可以根據錯誤型別去排錯

(2)邏輯錯誤:這種錯誤瀏覽器不會報錯,但是可以使用斷點進行除錯排錯

2.程式碼錯誤型別

2.1語法錯誤:

即寫的程式碼不符合js編碼規則 報錯為:Uncaught Syntaxerror:資訊提示;我們可以根據後面的資訊提示去修改錯誤,當然,語法錯誤,瀏覽器會直接報錯,整個程式碼都不會執行。

2.2引用錯誤:

使用了沒有定義的變數 報錯為:Uncaught ReferenceError:資訊提示;錯誤之前的程式碼會執行,之後程式碼不會執行

2.3型別錯誤:

提供的型別,不是js所需要的; 報錯為:Uncaught TypeError:資訊提示;錯誤之前的程式碼會執行,之後程式碼不會執行

2.4範圍錯誤:

指定的範圍不是JS要求的 報錯為:Uncaught RangeError:資訊提示;錯誤之前的程式碼會執行,之後程式碼不會執行 3.邏輯錯誤 這類錯誤可能是邏輯順序不正確,這種錯誤瀏覽器不會報錯,我們可以通過斷點除錯排除錯誤

JS常見的報錯型別

1.Uncaught TypeError: Cannot read property '' of undefined

常見的一種是在渲染 UI 元件時對於狀態的初始化操作不當,當你讀取一個未定義的物件的屬性或呼叫其方法時,這個錯誤會在 Chrome 中出現。

2.TypeError: ‘undefined’is not an object

這是在 Safari 中讀取屬性或呼叫未定義物件上的方法時發生的錯誤,Safari 使用了不同的錯誤訊息提示語。

3.TypeError: 'null' is not an object
這是在 Safari 中讀取屬性或呼叫空物件上的方法時發生的錯誤,Safari 使用了不同的錯誤訊息提示語。undefined 通常是一個尚未分配的變數,而 null 表示該值為空。 要驗證它們不相等,請嘗試使用嚴格的相等運算子 ===

這種錯誤可能發生場景是:在載入元素之前嘗試在JavaScript中使用元素。 因為 DOM API 對於空白的物件引用返回值為 null。

4.(unknown): Script error


當未捕獲的JavaScript錯誤(通過window.onerror處理程式引發的錯誤,而不是捕獲在try-catch中)被瀏覽器的跨域策略限制時,會產生這類的指令碼錯誤。這是一種瀏覽器安全措施,旨在防止跨域傳遞資料,否則將不允許進行通訊。

5.TypeError: Object doesn’t support property
這是您在呼叫未定義的方法時發生在 IE 中的錯誤。 您可以在 IE 開發者控制檯中進行測試。

6.TypeError: ... is not a function
呼叫未定義的函式時,在 Chrome 中產生的錯誤

7.Uncaught RangeError: Maximum call stack
當你呼叫一個不終止的遞迴函式時或者將值傳遞給超出範圍的函式,會報出的錯,檢查函式的遞迴呼叫,確保函式不是無限遞迴的

8. TypeError: Cannot read property ‘length’of undefined
因為讀取未定義變數的長度屬性,通常會在陣列中找到定義的長度,但是如果陣列未初始化或者變數名稱在另一個上下文中隱藏,則可能會遇到此錯誤。

var testArray = ["Test"];
function testFunction(testArray) {
  for (var i = 0; i < testArray.length; i++) {
    console.log(testArray[i]);
  }
}
testFunction();

當你用引數宣告一個函式時,這些引數變成了函式作用域內的本地引數。這意味著即使你函式外有名為 testArray 的變數,在一個函式中具有相同名字的引數也會被視為本地引數。

9.Uncaught TypeError: Cannot set property ... of undefined
嘗試訪問一個未定義的變數時,它總是返回 undefined,我們不能獲取或設定任何未定義的屬性。

10.ReferenceError: ... is not defined
當您嘗試訪問未定義的變數或超出當前範圍的變數時,會引發此錯誤。

11.Uncaught exception: ReferenceError: Cannot assign to ‘this’
嘗試給一個不能被賦值的變數賦值時將發生該錯誤,確保不給函式函式的返回值或 this 關鍵字賦值。

12.Uncaught TypeError: Converting circular structure toJSON
該錯誤總是發生在使用 JSON.stringify 序列化一個存在迴圈引用的物件時,移除將要被轉換為 JSON 字串物件內部的迴圈引用。

13.Unexpected token ;
通常發生在缺少括號或分號時,該錯誤提示的行號有時並不能指向正確的位置

14.Uncaught SyntaxError: Unexpected token ILLEGAL
字串字面量缺少閉合的引號,確保所有字串都包含閉合的引號。

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

接下來,詳細說明各種型別:

1.Error:基型別。所有的錯誤都繼承該型別。提供這個基型別的主要目的是提供給開發人員丟擲自定義的錯誤(如:throw new Error(輸出錯誤資訊))。

2.EvalError:使用eval()函式會丟擲該錯誤。例如未將eval當作函式使用,例如 new eval()。

3.RangeError: 數字超出範圍會丟擲該錯誤。例如,陣列越界。

4.ReferenceError:在找不到物件會丟擲錯誤。例如 var obj = undefineObj,undefineObj未定義會報錯。

5.SyntaxError:語法錯誤。

6.TypeError:型別錯誤。通常在if控制流中和全等,相等的比較中存在型別轉換。

7.URLError:使用eccodURL和decodeURL(),而URI格式不正確時,會導致錯誤。這個型別不常用。

錯誤的理解

接著,簡單的描述一下對錯誤的理解:

錯誤主要出現在if控制流,型別轉換和對於空值為進行判斷,欄位未定義等。在編寫程式碼時一定要從正反兩個角度考慮。不能單從正確的角度考慮,只有這樣才可以保證程式碼的健壯性。

最後,瞭解錯誤的使用方法:

throw 錯誤資訊

throw new Error(錯誤資訊)

throw new RangeError(錯誤資訊,其他5種省略)