您好，欢迎来到我的博客！我正在学习 Javascript、HTML 和其他技能来学习全栈软件开发，并将在这里记录我的一些经验，以此来盘点我迄今为止的知识并分享我在此过程中学到的一些经验教训与其他新程序员一起。
这篇文章将讨论我在学习 Javascript 时所犯的一些错误，特别是在做我的第一个大项目时。我的项目从 API 获取有关化妆品的信息，并以有组织且视觉上令人愉悦的方式将其放在网页上。
错误#1：没有尽可能实现自动化
我的项目从中获取信息的 API 是一个大型数组，因此我最终决定构建项目的方式是在我的 API 返回的数组上使用 forEach 方法，并为每个元素动态创建一个新的 div HTML 元素。每种化妆品的阵列。您可以在下面的屏幕截图的第 10 行开始看到此结构。
图片描述
让 macOS 自动化像说话一样简单 —— 用代码控制你的 Mac，无需学习 AppleScript 系统要求 macOS 14+ (Sonoma) Python 3.9+ 需要开启：辅助功能 + 屏幕录制权限
但是，最初，我尝试将 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 之旅时学到的众多课程之一。希望阅读本文对您有所帮助！
