JavaScript错误的5个常见原因(以及如何避免) _错误

本文概述

DOM相关
基于语法
未定义/空关键字的使用不当
未定义的方法
return语句使用不当

JavaScript(JS)是一种无处不在, 灵活且广泛流行的编程语言, 尽管它也容易出错, 并且使大多数开发人员都措手不及。
JS被广泛用于在大多数Web应用程序的客户端上增强用户交互性。没有JavaScript, 也许网络上的一切可能变得毫无生气, 毫无刺激。但是, 这种语言的起伏有时会使开发人员与它产生爱恨交加的关系。
JavaScript错误会导致应用程序产生意外结果并损害用户体验。不列颠哥伦比亚大学(UBC)最近的一项研究试图找出JavaScript错误和错误的根本原因和影响。研究结果揭示了一些损害JS程序性能的常见模式。
这是一个饼图, 显示了研究人员发现的结果：

文章图片
在这篇博客文章中, 我们将说明研究中突出显示的JavaScript错误的一些常见原因(以及我们每天遇到的其他原因), 以及如何使你的应用程序更不易出错。
DOM相关文档对象模型(DOM)在网站的交互性中起着至关重要的作用。 DOM界面可以操纵网页的内容, 样式和结构。使普通HTML网页具有交互性(或操纵DOM)是发布JavaScript编程语言的原因。
因此, 即使引入了诸如Node.js之类的后端JavaScript技术, 使用DOM仍然构成了该语言的大部分功能。因此, DOM是在JavaScript应用程序中引入错误和错误的重要途径。
JavaScript错误报告研究发现, 与DOM相关的问题是造成大多数缺陷的原因, 这一点不足为奇, 为68％。
例如, 某些JavaScript程序员通常会在加载DOM元素之前犯错误, 从而导致代码错误。

< !DOCTYPE html> < html> < body> < script> document.getElementById("container").innerHTML = "Common JS Bugs and Errors"; < /script> < div id="container"> < /div> < /body> < /html>

如果以上代码在Chrome浏览器上运行, 则会引发错误, 可以在开发者控制台上看到该错误：

文章图片
引发该错误是因为JavaScript代码通常是根据其在文档中出现的顺序执行的。这样, 当代码运行时, 浏览器不知道所引用的< div> 元素。
为了解决这个问题, 你可以使用各种方法。最简单的方法是将< div id =” container” > < / div> 放在脚本标记的开头之前。你还可以使用jQuery之类的JavaScript库来确保先加载DOM, 然后才能对其进行访问。

< !DOCTYPE html> < html> < body> < div id="container"> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> < /script> < script> document.getElementById("container").innerHTML = "Common JS Bugs and Errors"; < /script> < /body> < /html>

基于语法当JavaScript解释器无法执行语法错误的代码时, 就会发生语法错误。如果创建应用程序并且解释器观察到与JavaScript编程语言的标准语法不匹配的令牌, 则将引发错误。根据JavaScript错误报告研究, 此类错误占该语言所有错误的12％。
语法错误(例如缺少括号或不匹配的括号)是JavaScript中语法错误的主要原因。
例如, 当你必须使用条件语句来解决多个条件时, 可能会错过根据需要提供括号的问题, 从而导致语法缺陷。
让我们看下面的例子。

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

是的, 条件语句的最后一个括号丢失了。你是否注意到以上代码的错误？
让我们更正它。

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

为避免此类语法错误, 你应该花时间学习JavaScript编程语言的语法规则。通过广泛的编码实践, 你可以轻松发现语法错误, 并避免在开发的应用程序中附带这些错误。
未定义/空关键字的使用不当一些JavaScript开发人员不知道如何正确使用undefined和null关键字。实际上, 该研究报告称, 关键字使用不当占所有JavaScript错误的5％。
null关键字是分配值, 通常将其分配给变量以表示不存在的值。令人惊讶的是, null也是一个JavaScript对象。
【JavaScript错误的5个常见原因(以及如何避免)】这是一个例子：

var codeJS = null; console.log(codeJS); //output is nullconsole.log(typeof codeJS); //output is object

另一方面, 未定义表示已声明的变量或任何其他属性缺少分配的值。这也可能意味着未声明任何内容。 undefined是其自身的一种类型。
这是一个例子：

var codeJS; console.log(codeJS); //output is undefinedconsole.log(typeof codeJS); //output is undefined

有趣的是, 如果相等运算符和身份运算符用于比较null和undefined关键字, 则后者将它们视为不相等。

console.log(null==undefined); //output is trueconsole.log(null===undefined); //output is 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开发人员需要多功能工具来对应用程序的性能进行故障排除并快速检测错误和错误。
因此, 使用一整套完善的测试工具, 你可以放心地确定影响网站性能的异常情况。你需要改善网站的性能并获得最佳的用户体验。
快乐的无错误JavaScript编程！
Alfrick Opidi撰写的文章