JavaScript開發(fā)中常見錯誤有哪些
這篇文章主要介紹JavaScript開發(fā)中常見錯誤有哪些，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
10余年專注成都網(wǎng)站制作，企業(yè)網(wǎng)站設(shè)計，個人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設(shè)計流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站設(shè)計,高端網(wǎng)頁制作,對純水機(jī)等多個行業(yè)，擁有豐富的網(wǎng)站建設(shè)經(jīng)驗。
Chrome DevTools 中的常見錯誤排查
Chrome 開發(fā)者工具的 Console 相當(dāng)好用，最常使用的不外乎是通過 console.log 展示出變量或運算的結(jié)果，如果符合預(yù)期則皆大歡喜。
但是一旦出現(xiàn)紅字幸災(zāi)樂禍的告訴我們“你出錯了！”，這對我們來說無疑是一種挫折，在不知如何著手解決錯誤的時，只能反覆地檢查自己的代碼，看看是不是有什么奇怪的地方，有時就算停在了錯誤地方也往往不知是什么意思，會因此花費大量的時間。
本文就來介紹在 Chrome 開發(fā)者工具中常見的錯誤反饋及排除技巧，讓你不再為了滿屏幕的紅字感到挫折，更能從中學(xué)習(xí)如何快速搜尋錯誤代碼。
注意：JavaScript 是屬于同步的編程語言，如果出現(xiàn)錯誤就會造成后面的代碼無法運行，當(dāng)紅字沒有解決時，都有可能造成接下來的代碼行錯誤或是無法繼續(xù)運行。
錯誤類型：SyntaxError
SyntaxError 類型的錯誤通常是語法錯誤，遇到這中錯誤時建議通過你所用的 IDE 排查，比如 VSCode 能夠直接跳出這類型的錯誤提示。
如下圖，VSCode 用紅色波浪線提示 family 對象有錯誤，當(dāng)出現(xiàn)錯誤時會建議不要只檢查當(dāng)前行，錯誤可能會存在于上下文中（有可能跨多行的錯誤），這個例子中仔細(xì)檢查可以發(fā)現(xiàn)在'小明'后面少了一個逗號。
.jpg)
排查重點：使用主流的 IDE 例如 "VSCode" 進(jìn)行排查
Uncaught SyntaxError: Unexpected identifier
var person = {
name: '小明'
family: {
name: '小明家'
}
}語法解析錯誤，因為在對象結(jié)構(gòu)中缺少一個逗號，除了通過在 VSCode 中查看外，也可以直接通過 Chrome Console 切換到 Source 頁面查看錯誤行，并檢查此行的上下文中是否存在語法錯誤。
.jpg)
Uncaught SyntaxError: Unexpected end of input
function fn() {
console.log('這是一個函數(shù)');
console.log(fn);語法解析錯誤：未預(yù)期的結(jié)束，這個例子中缺少結(jié)尾的大括號 }，在編寫代碼時盡可能的維持正確的鎖緊，將代碼排列整齊之后更容易找到錯誤。
Uncaught SyntaxError: Unexpected token '}'
if (name)
console.log('立即執(zhí)行函數(shù)')
};.jpg)
語法解析錯誤：未預(yù)期的符號 }，代碼結(jié)尾多了一個 } 符號導(dǎo)致環(huán)境運行錯誤，這個錯誤的排查方法與上面相同，盡可能將代碼排整齊并維持首尾符號的一致。
除此之外再推薦一個 VSCode 工具，可以為你的首尾標(biāo)簽加上對應(yīng)的色彩：https://marketplace.visualstu...
例子：代碼中成對的 {} 都會以相同的顏色展示。
Uncaught SyntaxError: Identifier 'a' has already been declared
let a; let a;
語法解析錯誤：識別符號（在這里指的是變量）已經(jīng)被聲明，應(yīng)該避免重復(fù)生命同一個變量，在 ES6 都禁止用 let、const 對變量進(jìn)行重復(fù)聲明，直接排除即可。
錯誤類型：ReferenceError
ReferenceError 這類錯誤通常是指找不到引用，當(dāng)出現(xiàn)這類錯誤時在 IDE 中不一定會提示現(xiàn)錯誤（除非安裝了 Linter），所以在代碼的運行階段才會看到這類錯誤。
排查重點：
通過 Chrome 的提示改正
在 JavaScript 開發(fā)環(huán)境中安裝 ESLint
ReferenceError: a is not defined
ReferenceError: a is not defined
引用錯誤：由于變量 a 未定義，所以在使用這個變量時會出現(xiàn)未定義的提示，只要先定義好這個變量即可。
還有另一種很常見的情況，當(dāng)引用外部包時出現(xiàn) “包名 + is not defined”，這種情況通常是外部資源沒有被正確載入，應(yīng)該確保該資源被正確的引入。
下面的例子就是因為 jQuery 沒有正確導(dǎo)入而導(dǎo)致的。
Uncaught ReferenceError: $ is not defined
錯誤類型：TypeError
TypeError 是類型上的錯誤，同樣 IDE 也不會預(yù)先提示有錯誤，必須在執(zhí)行時才會看到，這類型的錯誤通常是以下幾種：
試圖獲取 undefined、null 的屬性
嘗試調(diào)用非函式變量或表達(dá)式（例如:
'text'()）
排查重點：在獲取變量前先確認(rèn)其當(dāng)前的數(shù)據(jù)類型及結(jié)構(gòu)
Uncaught TypeError: Cannot read property 'a' of undefined
var a; console.log(a.a);
說明：在這個變量的值中無法找到其特定的屬性，例如在 undefined、null 的值上是找不到其它屬性的，如果無法確認(rèn)該變量是否為 undefined，可以把代碼改成這樣：
if (typeof a !== 'undefined') {
console.log(a.a);
}Uncaught TypeError: console.log(...) is not a function
console.log('a')
(function() {
console.log('立即執(zhí)行函數(shù)')
})()說明：這代碼看起來是立即執(zhí)行函數(shù)的錯誤，但是卻出現(xiàn)了 console.log(...) is not a function。這個錯誤主要是因為缺少了分號。
當(dāng)遇到這類錯誤時只要在兩者之間補(bǔ)上分號即可。
console.log('a');
(function() {
console.log('立即執(zhí)行函數(shù)')
})()錯誤類型：RangeError
這是創(chuàng)建了超過長度上限的數(shù)組或執(zhí)行了無法退出的遞歸函數(shù)所造成的錯誤，遇到這類問題需要重新檢查代碼的邏輯，是否消耗了過多的資源（內(nèi)存或CPU資源）。
排查重點：需要重新檢查邏輯，如果有必要可先刪除部分代碼，先找出錯誤的片段后再進(jìn)行除錯。
Uncaught RangeError: Maximum call stack size exceeded
(function a() {
a();
})();說明：在函數(shù)調(diào)用時會產(chǎn)生一個函數(shù)調(diào)用棧，如果在遞歸的過程中超過上限則會產(chǎn)生錯誤。
這類錯誤也很常見，卻不容易找到出錯的原因，其主要原因是在遞歸時超過了環(huán)境的限制（使用框架時也很常見），如果遇到這錯誤建議改寫當(dāng)前調(diào)用函數(shù)的方式。
以上是“JavaScript開發(fā)中常見錯誤有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章題目：JavaScript開發(fā)中常見錯誤有哪些
地址分享：http://www.rwnh.cn/article16/jispdg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、靜態(tài)網(wǎng)站、定制開發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)建站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
