JavaScript 中常见的错误及其规避方法
JavaScript (JS) 是一种无处不在、功能强大且广受欢迎的编程语言。 然而，它也容易出现一些错误，这些错误往往会让开发者感到沮丧和困惑。
JS 被广泛应用于增强大多数 Web 应用程序客户端的用户交互性。 若没有 JavaScript，网页可能会显得单调乏味。 然而，这种语言的复杂性有时会让开发者对它产生既爱又恨的情感。
JavaScript 错误可能会导致应用程序出现意想不到的结果，并损害用户体验。 不列颠哥伦比亚大学 (UBC) 的一项研究试图探究 JavaScript 错误和缺陷的根本原因和影响。 研究结果揭示了一些影响 JS 程序性能的常见模式。
下图是一个饼图，展示了研究人员的主要发现：
在这篇文章中，我们将详细探讨研究中强调的以及日常开发中可能遇到的 JavaScript 错误的常见原因，并讨论如何使您的应用程序更加健壮。
DOM 相关问题
文档对象模型 (DOM) 在网站的交互性中扮演着至关重要的角色。 DOM 接口允许我们操作网页的内容、样式和结构。 正是有了操作 DOM 的能力，JavaScript 才使得纯 HTML 网页具有了交互性，这也是 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 id=”container”>` 元素。
为了解决此类问题，您可以使用多种方法。 最简单的方法是将 `<div id=”container”></div>` 元素放在 script 标签之前。 此外，您也可以使用 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%。
语法错误的主要原因包括缺少括号或不匹配的括号。
例如，当您必须使用条件语句来处理多个条件时，您可能忘记添加必需的括号，从而导致语法错误。
以下是一个示例：
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);
//output is null
console.log(typeof codeJS);
//output is object
另一方面，`undefined` 表示已声明的变量或任何其他属性缺少分配的值。 它也可以暗示根本没有声明任何东西。 `undefined` 本身就是一种类型。
以下是一个示例：
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefined
有趣的是，如果使用相等运算符 (`==`) 和恒等运算符 (`===`) 来比较 `null` 和 `undefined` 关键字，后者认为它们不相等。
console.log(null==undefined); //output is true console.log(null===undefined); //output is false
因此，了解 `null` 和 `undefined` 关键字的正确用法可以帮助您避免在 JavaScript 程序中引入错误。
调用未定义的方法
JavaScript 中另一个常见的错误原因是调用未定义的方法。 UBC 的研究人员发现，这个错误导致了 4% 的 JavaScript 错误。
以下是一个示例：
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
这是在 Chrome 开发者控制台上看到的错误：
出现上述错误是因为调用的函数 `speakNow()` 尚未在 JavaScript 代码中定义。
`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 开发者控制台中会出现 `undefined` 的错误：
因此，您应该避免在 JavaScript 代码中中断 `return` 语句。
总结
客户端 JavaScript 编程语言具有出色的功能，可以支持现代 Web 应用程序的功能。 但是，如果您不了解使该语言正常工作的特性，您的应用程序的性能可能会受到影响。
此外， JavaScript 开发者 需要通用的工具来对其应用程序的性能进行故障排除，并快速检测错误和缺陷。
因此，借助一套全面的测试工具，您可以自信地识别影响网站性能的异常情况。 这是您提高网站性能并实现最佳用户体验所需要的。
祝您编程愉快，代码无错！
文章作者：Alfrick Opidi