哎呀，我又做了一次：调试 JavaScript 中的常见错误

编写 JavaScript 代码可能充满挑战，有时甚至令人望而生畏，许多开发者都深有体会。在这个过程中，错误不可避免地会出现，其中一些错误还会反复出现。本文面向初级开发者，将探讨这些错误以及如何解决它们。为了清晰起见，函数、属性和对象的名称均取自…… 流行歌曲所有这些都能帮助你快速记住如何纠正常见的错误。

我们提醒： 对于“Habr”的所有读者 - 使用“Habr”促销代码注册任何 Skillbox 课程可享受 10 卢布的折扣。

技能箱推荐： 实践课程 “移动开发者专业版”.

TypeError：属性未定义

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

上面的代码示例会产生错误“Uncaught TypeError: Cannot read property 'lucky' of undefined”。问题在于“girl”对象没有“named”属性，尽管它有“name”属性。由于“girl.named”属性未定义，因此无法访问，因为它实际上并不存在。但是，如果将“girl.named.lucky”替换为“girl.name”，一切正常，程序会返回“Lucky”。

更多房产详情请见此处 读到这里.

如何排查类型错误

当程序员尝试对不符合已定义类型的数据执行操作时，就会发生类型错误。例如，使用 `.bold()`、查询未定义的属性或调用实际上并非函数的函数。

所以，如果你尝试调用 girl()，你会得到错误“Uncaught TypeError: yourVariable.bold is not a function and girl is not a function”，因为实际上调用的是一个对象，而不是一个函数。

要排查错误，你需要检查变量。那么，“girl”是什么？“girl.named”又是什么？你可以通过分析代码、使用 `console.log` 显示变量、使用调试器命令或在控制台中调用变量名来找到答案。你需要确保你的代码能够处理变量包含的数据类型。如果不能，请更改它——例如，通过添加条件或 `try..catch` 块——从而控制操作的执行。

Stack Overflow

如果我们相信歌曲《Baby One More Time》（当然是布兰妮·斯皮尔斯唱的）的作词人，那么歌词中的“hit”指的是歌手渴望再次接到电话（这里是歌曲背景的解释——译者注）。这种渴望很可能在现实生活中带来电话量的增加。但在编程中，这属于递归，一旦发生调用栈溢出，就可能导致错误。

错误信息如下：

错误：堆栈空间不足（边缘）
内部错误：递归过多（Firefox）
RangeError：超出最大调用堆栈大小（Chrome）

当开发人员在递归中未能考虑基本情况，或者代码未能处理预期情况时，就会发生堆栈溢出。

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

在这种情况下，stillBelieve 永远不会被评估为 false，因此每次都会调用 oneMoreTime，但该函数永远不会完成执行。

如果你开始依靠两个朋友，这将减少孤独感，你也不必等待电话了。

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

例如，无限循环就是一个例子，系统不会显示错误信息，但运行 JavaScript 代码的页面会直接卡死。这种情况发生在 while 循环没有终止条件时。

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

该问题可按如下方式解决：

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

调试无限循环和递归

如果遇到无限循环问题，请关闭 Chrome 或 Edge 浏览器中的标签页，或者关闭 Firefox 浏览器中的窗口。之后，仔细分析代码。如果找不到问题所在，请在循环或函数中添加调试命令，并检查变量值。如果结果与预期不符，请进行修改——这很简单。

在上面的例子中，应该在函数或循环的第一行添加调试器。然后，在 Chrome 浏览器中打开调试标签页，分析作用域内的变量。使用“下一步”按钮，您可以跟踪每次迭代中变量的变化。这些操作都很简单，而且在大多数情况下，问题很容易就能找到。

您可以在这里阅读更多相关内容（镀铬）和这里（适用于 Firefox).

语法错误

JavaScript 中最常见的错误之一是语法错误 (SyntaxError)。文本编辑器扩展程序可以帮助避免这类错误。例如，Bracket Pair Colorizer 可以用不同的颜色高亮显示代码中的括号，而 Prettier 或类似的分析工具则可以帮助你快速找到错误。减少语法错误发生概率的最佳方法是尽量减少代码嵌套。

请在评论区分享：您是如何避免犯错或快速发现并消除错误的？

技能箱推荐：

• 两年实践课程 “我是一名专业网络开发人员”.
• 在线课程 《C#开发从0开始》.
• 实践年课程 《PHP 开发者从 0 到 PRO》.

来源： habr.com