5个常见的JavaScript错误原因（以及如何避免它们）

JavaScript (JS)是一种无处不在、灵活且广泛流行的编程语言，尽管它也容易出错和产生bug，这使得大多数开发人员感到不悦和困惑。

JS广泛用于驱动大多数Web应用程序客户端的用户交互。没有JavaScript，也许Web上的东西会变得毫无生气和无趣。然而，这种语言的起伏有时会让开发人员对它有爱恨交加的感受。

JavaScript错误会导致应用程序产生意外的结果并损害用户体验。不列颠哥伦比亚大学（UBC）进行的一项研究旨在找出JavaScript错误和bug的根本原因和影响。该研究的结果揭示了一些影响JS程序性能的常见模式。

这是一个饼图，显示研究人员的发现：

在本博客文章中，我们将阐述研究中发现的一些常见的JavaScript错误的原因（以及我们每天遇到的其他错误），以及如何使您的应用程序更不容易出现故障。

与DOM相关

文档对象模型（DOM）在网站的交互性中起着至关重要的作用。DOM接口使得可以操作网页的内容、样式和结构。使普通的HTML网页具有交互性或操作DOM，正是JavaScript编程语言发布的原因。

因此，即使引入了后端JavaScript技术如Node.js，处理DOM仍然占据了该语言的很大一部分。因此，DOM是引入JavaScript应用程序中的错误和bug的重要途径。

不出所料，JavaScript错误报告研究发现，与DOM相关的问题占所有错误的68%。

例如，一些JavaScript程序员经常犯的错误是在DOM元素加载之前引用它，导致代码错误。

如果在Chrome浏览器上运行上面的代码，它会抛出一个错误，可以在开发者控制台中看到：

错误被抛出是因为JavaScript代码通常按照它在文档中出现的顺序执行。因此，当代码运行时，浏览器不知道引用的元素。

要解决这个问题，您可以采用各种方法。最简单的方法是在script标签的开头之前放置。您还可以使用JavaScript库，如jQuery，在可以访问DOM之前确保DOM已加载。

基于语法

语法错误发生在JavaScript解释器无法执行语法不正确的代码时。如果创建一个应用程序，解释器发现令牌与JavaScript编程语言的标准语法不匹配，它就会抛出一个错误。根据JavaScript错误报告研究，这类错误占语言中所有错误的12%。

语法错误的主要原因是语法错误，例如缺少括号或不匹配的括号。

例如，当您必须使用条件语句来处理多个条件时，您可能会忘记提供所需的括号，导致语法错误。

让我们看看以下示例。

if((x > y) && (y < 77) {
        //more code here
   }

是的，条件语句的最后一个括号丢失了。您是否注意到了上面的代码中的错误？

让我们进行更正。

if ((x > y) && (y < 77)) {
        //more code here
    }

为了避免这些语法错误，你应该花时间学习JavaScript编程语言的语法规则。通过大量的编码实践，你可以轻松地发现语法错误，并避免将它们与你开发的应用程序一起发布。

undefined/null关键字的不正确使用

一些JavaScript开发人员不知道如何正确使用undefined和null关键字。实际上，研究报告表明，关键字的不正确使用占所有JavaScript错误的5%。

null关键字是一个赋值值，通常被赋给一个变量来表示不存在的值。令人惊讶的是，null也是一个JavaScript对象。

以下是一个例子：

var codeJS = null;

console.log(codeJS);
//输出为null

console.log(typeof codeJS);
//输出为object

另一方面，undefined表示已经声明的变量或其他属性缺少一个赋值的值。它也可以表示什么也没有被声明。undefined是它自己的类型。

以下是一个例子：

var codeJS;

console.log(codeJS);
//输出为undefined

console.log(typeof codeJS);
//输出为undefined

有趣的是，如果使用相等运算符和恒等运算符来比较null和undefined关键字，后者不认为它们相等。

console.log(null==undefined);
//输出为true

console.log(null===undefined);
//输出为false

因此，了解null和undefined关键字的正确使用方法可以帮助你避免在JavaScript程序中引入错误。

未定义的方法

JavaScript中错误的另一个常见原因是在没有提供其先前定义的情况下调用一个方法。UBC的研究人员发现这个错误导致了所有JavaScript错误的4%。

以下是一个例子：

var coder = {
name: “Peter”,
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();

在Chrome开发者控制台上可以看到上述错误：

以上错误发生是因为在JavaScript代码中没有定义被调用的函数speakNow()。

return语句的不正确使用

在JavaScript中，return语句用于停止函数的运行，以便输出其值。如果使用错误，return语句可能会损害应用程序的最佳性能。根据研究，return语句的不正确使用导致了JavaScript应用程序中2%的所有错误。

例如，一些JavaScript程序员通常错误地打断return语句。

虽然你可以在两行中断一个JavaScript语句并仍然得到所需的输出，但是打断return语句会为你的应用程序带来灾难。

以下是一个例子：

function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));

当运行上述代码时，在Chrome开发者控制台上会看到一个未定义的错误：

因此，你应该避免在你的JavaScript代码中打断return语句。

结论

客户端JavaScript编程语言具有强大的功能，可以为现代Web应用程序提供支持。然而，如果你不了解使语言工作的怪异之处，你的应用程序的性能可能会受到影响。

此外，JavaScript developers需要多功能工具来排除其应用程序的性能问题，并快速检测错误和漏洞。

因此，通过一套全面的testing tools，您可以自信地识别影响网站性能的异常情况。这是您提高网站性能并实现最佳用户体验所需的东西。

愿您的JavaScript编程无错误！

本文由Alfrick Opidi撰写