相位記錄

您好，歡迎來到我的部落格！我正在學習Javascript、HTML 和其他技能來學習全端軟體開發，並將在這裡記錄我的一些經驗，以此來盤點我迄今為止的知識並分享我在此過程中學到的一些經驗教訓與其他新程式設計師一起。

這篇文章將討論我在學習 Javascript 時所犯的一些錯誤，特別是在做我的第一個大專案時。我的專案從 API 獲取有關化妝品的信息，並以有組織且視覺上令人愉悅的方式將其放在網頁上。

錯誤#1：沒有盡可能自動化
我的專案從中獲取資訊的 API 是一個大型數組，因此我最終決定構建專案的方式是在我的 API 返回的數組上使用 forEach 方法，並為每個元素動態創建一個新的 div HTML 元素。每種化妝品的陣列。您可以在下面螢幕截圖的第 10 行開始看到此結構。

圖片描述

但是，最初，我嘗試將 API 陣列的每個元素指派給我已經在專案的 HTML 檔案中建立的 div HTML 元素。事實證明，這種方法非常困難，因為我必須手動建立我知道會與 API 陣列元素相符的 div，而不是根據 API 中的資訊建立新的 HTML 元素，這種策略非常耗時且更容易出錯。此外，如果 API 數組元素發生更改，我最初的想法將無法實現，這將使我的專案的通用性大大降低。儘管出於上述原因，我創建div HTML 元素的非動態方法對於我的專案來說並不是正確的選擇，但我認為以這種方式嘗試我的專案時仍然學到了寶貴的經驗教訓，因此我將在這篇文章將來自該程式碼。

錯誤#2：身分錯誤
如果某些東西不起作用，最好檢查一下您正在更改的程式碼的方面是否如您所想。您可能會收到錯誤，因為您嘗試使用不適用的方法。對於此類故障排除有幫助的兩個工具是 console.log() 和 typeOf()。
當我的專案的初始程式碼未按計劃運行時，我使用了這兩種方法。當同時使用 console.log() 和 for 迴圈時，將一個放在 for 迴圈內部，另一個放在 for 迴圈外部會很有幫助，這樣您就可以準確地看到程式碼停止運行的位置。
您可以在下面的螢幕截圖中看到我是如何做到這一點的。

圖片描述

後來，我還做了 console.log(typeOf(thisDiv)) 來查看 thisDiv 是否是一個物件。回想起來，上面的螢幕截圖可能不起作用，因為 Product.id 很可能是一個數字，而 thisDiv 實際上是一個物件。但儘管出現了這個錯誤，console.log() 和 typeOf() 仍然是讓我自己腳踏實地並找出下一步的好工具。

錯誤#3：忘記某些東西可能不存在
有時，程式碼可能會崩潰，不是因為您試圖更改與您想像的不同的內容，而是因為您試圖更改不存在的內容。在為我的專案開發初始方法時，一旦我確定thisDiv 是一個對象，我就很困惑為什麼thisDiv.id 未被識別，因為該語法是根據W3schools 獲取對象值的有效方法（ https://www.w3schools .com/js/js_objects.asp）。我決定將第14 行更改為“console.log(Object.keys(thisDiv))”，這樣我就可以得到正確的方法來獲取thisDiv 的id，這樣我就可以更正從第15 行開始的if 語句並比較這個Div的id鍵到product.id。

圖片描述

由於該更改，我收到以下錯誤：

未捕獲（承諾中）類型錯誤：無法將未定義或 null 轉換為物件
在 Function.keys ()
在index.js:14:32
在 Array.forEach ()
在 displayProdName (index.js:11:10)
在index.js:6:21
在我的 Python 工作中，我發現有時，如果 for 迴圈中的第一個元素不存在或不具有執行 for 迴圈語句所需的特徵，程式碼將中斷並且不會迭代將會發生 for 迴圈。我認為這個專案的Javascript for 迴圈中可能會發生類似的問題，因為對於i=0，第12 行中for 迴圈的第一次迭代，document.getElementById(0) 不存在，所以thisDiv 不存在t 存在於i 的第一次迭代中。因此，console.log(Object.keys(thisDiv)) 不起作用，因為 thisDiv 不是一個對象，所以它沒有任何鍵。因此，記住有時程式碼的某些方面可能不存在可以在編碼時節省大量時間。

這三個課程是我在開始 Javascript 之旅時學到的眾多課程之一。希望閱讀本文對您有幫助！

以上是相位記錄的詳細內容。更多資訊請關注PHP中文網其他相關文章！