日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript 開發(fā)中常見錯誤解決小總結

身為一名前端打工人，當然是經(jīng)驗越多，在排查錯誤時會更容易。道理都懂，但仍然會在遇到問題時會不知道怎樣著手。

Chrome DevTools 中的常見錯誤排查

Chrome 開發(fā)者工具的 Console 相當好用，最常使用的不外乎是通過 console.log展示出變量或運算的結果，如果符合預期則皆大歡喜。

但是一旦出現(xiàn)紅字幸災樂禍的告訴我們“你出錯了!”，這對我們來說無疑是一種挫折，在不知如何著手解決錯誤的時，只能反覆地檢查自己的代碼，看看是不是有什么奇怪的地方，有時就算停在了錯誤地方也往往不知是什么意思，會因此花費大量的時間。

本文就來介紹在 Chrome 開發(fā)者工具中常見的錯誤反饋及排除技巧，讓你不再為了滿屏幕的紅字感到挫折，更能從中學習如何快速搜尋錯誤代碼。

注意：JavaScript 是屬于同步的編程語言，如果出現(xiàn)錯誤就會造成后面的代碼無法運行，當紅字沒有解決時，都有可能造成接下來的代碼行錯誤或是無法繼續(xù)運行。

錯誤類型：SyntaxError

SyntaxError 類型的錯誤通常是語法錯誤，遇到這中錯誤時建議通過你所用的 IDE 排查，比如 VSCode 能夠直接跳出這類型的錯誤提示。

如下圖，VSCode 用紅色波浪線提示 family 對象有錯誤，當出現(xiàn)錯誤時會建議不要只檢查當前行，錯誤可能會存在于上下文中(有可能跨多行的錯誤)，這個例子中仔細檢查可以發(fā)現(xiàn)在'小明'后面少了一個逗號。

排查重點：使用主流的 IDE 例如 "VSCode" 進行排查

Uncaught SyntaxError: Unexpected identifier

 
 
 
 
      
  
  
  
  1. var person = { 
    2.   
  
  
  
  2.   name: '小明' 
    3.   
  
  
  
  3.   family: { 
    4.   
  
  
  
  4.     name: '小明家' 
    5.   
  
  
  
  5.   } 
    6.   
  
  
  
  6. } 
    7.

語法解析錯誤，因為在對象結構中缺少一個逗號，除了通過在 VSCode 中查看外，也可以直接通過 Chrome Console 切換到 Source 頁面查看錯誤行，并檢查此行的上下文中是否存在語法錯誤。

Uncaught SyntaxError: Unexpected end of input

 
 
 
 
      
  
  
  
  1. function fn() { 
    2.   
  
  
  
  2.   console.log('這是一個函數(shù)'); 
    3.   
  
  
  
  3. console.log(fn); 
    4.

語法解析錯誤：未預期的結束，這個例子中缺少結尾的大括號 }，在編寫代碼時盡可能的維持正確的鎖緊，將代碼排列整齊之后更容易找到錯誤。

Uncaught SyntaxError: Unexpected token '}'

 
 
 
 
      
  
  
  
  1. if (name) 
    2.   
  
  
  
  2.   console.log('立即執(zhí)行函數(shù)') 
    3.   
  
  
  
  3. }; 
    4.

語法解析錯誤：未預期的符號 }，代碼結尾多了一個 } 符號導致環(huán)境運行錯誤，這個錯誤的排查方法與上面相同，盡可能將代碼排整齊并維持首尾符號的一致。

除此之外再推薦一個 VSCode 工具，可以為你的首尾標簽加上對應的色彩：

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

例子：代碼中成對的 {} 都會以相同的顏色展示。

Uncaught SyntaxError: Identifier 'a' has already been declared

 
 
 
 
      
  
  
  
  1. let a; 
    2.   
  
  
  
  2. let a; 
    3.

語法解析錯誤：識別符號(在這里指的是變量)已經(jīng)被聲明，應該避免重復生命同一個變量，在 ES6 都禁止用 let、const 對變量進行重復聲明，直接排除即可。

錯誤類型：ReferenceError

ReferenceError 這類錯誤通常是指找不到引用，當出現(xiàn)這類錯誤時在 IDE 中不一定會提示現(xiàn)錯誤(除非安裝了 Linter)，所以在代碼的運行階段才會看到這類錯誤。

排查重點：

  • 通過 Chrome 的提示改正
  • 在 JavaScript 開發(fā)環(huán)境中安裝 ESLint

ReferenceError: a is not defined

 
 
 
 
      
  
  
  
  1. ReferenceError: a is not defined 
    2.

引用錯誤：由于變量 a 未定義，所以在使用這個變量時會出現(xiàn)未定義的提示，只要先定義好這個變量即可。

還有另一種很常見的情況，當引用外部包時出現(xiàn) “包名 + is not defined”，這種情況通常是外部資源沒有被正確載入，應該確保該資源被正確的引入。

下面的例子就是因為 jQuery 沒有正確導入而導致的。

 
 
 
 
      
  
  
  
  1. Uncaught ReferenceError: $ is not defined 
    2.

錯誤類型：TypeError

TypeError 是類型上的錯誤，同樣 IDE 也不會預先提示有錯誤，必須在執(zhí)行時才會看到，這類型的錯誤通常是以下幾種：

  • 試圖獲取 undefined、null 的屬性
  • 嘗試調(diào)用非函式變量或表達式(例如: 'text'())

排查重點：在獲取變量前先確認其當前的數(shù)據(jù)類型及結構

Uncaught TypeError: Cannot read property 'a' of undefined

 
 
 
 
      
  
  
  
  1. var a; 
    2.   
  
  
  
  2. console.log(a.a); 
    3.

說明：在這個變量的值中無法找到其特定的屬性，例如在 undefined、null 的值上是找不到其它屬性的，如果無法確認該變量是否為 undefined，可以把代碼改成這樣：

 
 
 
 
      
  
  
  
  1. if (typeof a !== 'undefined') { 
    2.   
  
  
  
  2.   console.log(a.a); 
    3.   
  
  
  
  3. } 
    4.

Uncaught TypeError: console.log(...) is not a function

 
 
 
 
      
  
  
  
  1. console.log('a') 
    2.   
  
  
  
  2. (function() { 
    3.   
  
  
  
  3.   console.log('立即執(zhí)行函數(shù)') 
    4.   
  
  
  
  4. })() 
    5.

說明：這代碼看起來是立即執(zhí)行函數(shù)的錯誤，但是卻出現(xiàn)了 console.log(...) is not a function。這個錯誤主要是因為缺少了分號。

當遇到這類錯誤時只要在兩者之間補上分號即可。

 
 
 
 
      
  
  
  
  1. console.log('a'); 
    2.   
  
  
  
  2. (function() { 
    3.   
  
  
  
  3.   console.log('立即執(zhí)行函數(shù)') 
    4.   
  
  
  
  4. })() 
    5.

錯誤類型：RangeError

這是創(chuàng)建了超過長度上限的數(shù)組或執(zhí)行了無法退出的遞歸函數(shù)所造成的錯誤，遇到這類問題需要重新檢查代碼的邏輯，是否消耗了過多的資源(內(nèi)存或CPU資源)。

排查重點：需要重新檢查邏輯，如果有必要可先刪除部分代碼，先找出錯誤的片段后再進行除錯。

Uncaught RangeError: Maximum call stack size exceeded

 
 
 
 
      
  
  
  
  1. (function a() { 
    2.   
  
  
  
  2.   a(); 
    3.   
  
  
  
  3. })(); 
    4.

說明：在函數(shù)調(diào)用時會產(chǎn)生一個函數(shù)調(diào)用棧，如果在遞歸的過程中超過上限則會產(chǎn)生錯誤。

這類錯誤也很常見，卻不容易找到出錯的原因，其主要原因是在遞歸時超過了環(huán)境的限制(使用框架時也很常見)，如果遇到這錯誤建議改寫當前調(diào)用函數(shù)的方式。

總結

當 Chrome Console 報錯時要保持淡定，在編碼的過程中出現(xiàn)錯誤是很常見的，所謂的大佬與新手之間的區(qū)別之一就是遇到錯誤時的經(jīng)驗，遇到錯誤時搞不清楚沒關系，這都是經(jīng)驗的累積。只要積累足夠了，再遇到相同的問題時就能自然而然的輕松面對了。


分享題目：JavaScript 開發(fā)中常見錯誤解決小總結
瀏覽地址：http://m.5511xx.com/article/cdgjiec.html