主持人 > 博客 > 网络新闻 > 哎呀，我又做了一次：调试 JavaScript 中的常见错误

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

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

正如许多开发人员所熟悉的那样，编写 JavaScript 代码可能具有挑战性，有时甚至令人生畏。 工作过程中难免会出现错误，有的错误还经常重复出现。 本文针对新手开发人员，讨论这些错误以及如何解决它们。 为了清楚起见，函数、属性和对象的名称取自 流行歌。 所有这些都可以帮助您快速记住如何纠正常见错误。

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

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

类型错误：属性未定义

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 对象没有命名属性，尽管它确实有 name 属性。 由于 Girl.named 属性未定义，因此您无法访问它，因为形式上它不存在。 但如果你用girl.name替换girl.named.lucky，那么一切都会正常，程序将返回Lucky。

您可以了解更多有关属性的信息 读到这里.

如何解决类型错误

当程序员尝试对与特定类型不匹配的数据执行操作时，就会发生类型错误。 示例包括使用 .bold()、请求未定义的属性或调用实际上不是函数的函数。

因此，如果您尝试调用 Girl()，您将收到错误 Uncaught TypeError: yourVariable.bold is not a function and Girl is not a function，因为它实际上是被调用的对象，而不是函数。

为了消除错误，您需要研究变量。 那么，什么是女孩呢？ 女孩.name是什么？ 您可以通过分析代码、使用 console.log、调试器命令显示变量或在控制台中调用变量名称来找出答案。 您需要确保可以对变量中包含的数据类型进行操作。 如果不合适，请更改它，例如添加条件或 try..catch 块 - 并获得对操作执行的控制。

堆栈溢出

如果你相信《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 中打开调试选项卡，分析作用域中的变量。 使用下一个按钮，您可以跟踪每次迭代的更改。 这一切都很容易做到，并且大多数情况下都能找到问题。

您可以在这里阅读有关这一切的更多信息（镀铬） 和这里 （对于火狐浏览器).

语法错误

JavaScript 中最常见的错误之一是 SyntaxError。 文本编辑器扩展将帮助您避免它们。 例如，Bracket Pair Colorizer 用不同的颜色标记代码中的括号，Prettier 或类似的分析工具可以快速发现错误。 减少语法错误可能性的最佳选择是最小化嵌套。

在评论中分享：您如何防止错误或快速发现并消除错误？

技能箱推荐：

来源： habr.com

添加评论