JavaScript 开发中常见的 10 个 Bug 及避坑指南

引言：JavaScript 常见错误概述

即便是技术顶尖的 JavaScript 开发者也难免犯错。这些错误有时会导致程序运行结果与预期不符，严重时甚至导致程序无法执行。本文梳理了 10 个高频出现的错误案例，无论初级还是资深开发者都可能遇到。

相等判断混淆：赋值、相等与严格相等

相等判断混淆

在 JavaScript 中，判断 x 是否等于 y，或者 x 是否为真值，正确执行相等判断至关重要，但许多开发者对此存在误解。主要涉及三种场景：条件判断（如 if、&& 等）、相等操作符（==）以及严格相等操作符（===）。

此外，开发者有时会将赋值操作符（=）误用为相等判断符，务必注意区分。

避免误用赋值操作符

赋值操作符（=）的作用是将右侧表达式的值赋给左侧变量，例如：

var a = 3;

上述语句声明了一个新变量 a，并将其值设为 3。

表达式可以是程序中的任何有效内容，可类比为语言中的名词，而操作符（+、-、*、/）则类比为动词。初学者常犯的错误是将赋值操作符（=）误当作相等判断符使用。

if (a=4){...}

这会导致代码执行结果与预期不符。

慎用相等操作符

相等操作符（==）及其对应的不等操作符（!=）虽然便捷，但存在隐患，建议谨慎使用。原因如下：

0 == '0'

在相等操作符下，0 和字符串 '0' 会被判定为相等。这是因为解释器发现左右两侧类型不一致，会先进行隐式类型转换。这种隐式转换容易引发各类难以排查的问题。

若需判断字符串中的数字与某个数值是否完全一致，建议采用以下方式：

parseInt(0) === parseInt('0')

因此，推荐使用严格相等（===）或严格不等（!==）操作符。

0 === '0'

使用严格相等时，上述比较将返回 false。

语法结构错误：大括号、引号与括号

大括号遗漏

随着程序复杂度增加，尤其是使用 JavaScript 对象存储数据时，大括号的使用频率会显著上升。以下代码示例中遗漏了一个大括号：

{
 “status”: “OK”,
 “results”: [{
 “id”: 12,
 “title”: “Coding JavaScript For Dummies”,
 “author”: “Chris Minnick and Eva Holland”,
 “publication_date”: ““,
 “summary_short”: ““,
 “link”: {
 “type”: “review”,
 “url”: ““,
 “link_text”: “Read the New York Times Review 
of Coding JavaScript For Dummies”
 },
 “awards”: [{
 “type”: “Nobel Prize”,
 “url”: ““,
 }]
}

能否识别出缺失的部分？在不确定时，使用具备高亮匹配功能的编辑器（如 Sublime Text）会非常有帮助，将光标置于大括号处时，匹配的另一个大括号会高亮显示。

引号不匹配

定义字符串时，单引号和双引号可自由选用。但若字符串以单引号开头，却以双引号结尾，则会引发错误。同时需注意字符串内部是否包含单引号或双引号。

var movieName = “Popeye'; // error!
var welcomeMessage = ‘Thank you, ‘ + firstName + ‘, let's learn JavaScript!' // error!

总体而言，这是一个灵活且实用的功能，但使用时务必小心。

圆括号缺失

此类错误常出现在条件语句中，特别是在包含多个条件判断时。

if (x > y) && (y < 1000) {
...
}

仔细观察会发现括号缺失，正确的写法应为：

if ((x > y) && (y < 1000)) {
...
}

语句规范：分号与大小写敏感性

分号遗漏

JavaScript 中的语句通常以分号结尾。若每条语句独占一行，省略分号通常不会报错，但建议不要省略，因为这可能带来潜在问题。若使用自动代码美化工具，可能会错误地将不同行的代码合并，从而导致错误。

最佳策略是始终添加分号。

大小写错误

JavaScript 对大小写敏感，变量和函数命名需格外小心，不可混淆大小写。例如，Document 对象的 getElementById 函数常被误写为 getElementByID。

执行时机与命名规范：DOM 引用与保留字

提前引用

JavaScript 代码通常按顺序执行。若在脚本中引用尚未创建的元素，将会报错。

<html>
<head>
 <script>
 document.getElementById(“myDiv”).innerHTML = “This div is my div”;
 </script>
</head>
<body>
 <div id = “myDiv”>This div is your div.</div>
</body>
</html>

在脚本执行期间，浏览器尚不知晓 myDiv 元素的存在。

避免此问题的方法有多种：

将代码放置在文档末尾，即 </body> 标签之后。

将代码封装在函数中，并与 body 的 onload 事件绑定。

<html>
<head>
 <script>
 function nameMyDiv() {
 document.getElementById(“myDiv”).innerHTML = “This div is my div”;
 }
 </script>
</head>
<body onload = “nameMyDiv();”>
 <div id = “myDiv”>This div is your div</div>
</body>
</html>

滥用保留字作为变量名

使用保留字作为变量名是一个难以追踪的问题。JavaScript 中有超过 60 个保留字，不可能全部记住以避免使用。最佳实践是使用更具描述性的字符来命名变量。

例如，name 是一个保留字。若喜欢使用 name，建议细化为 firstName、lastName、dogName 或 nameOfTheWind 等更具描述性的名称。

作用域、参数与数组索引基础

作用域问题

JavaScript 中存在函数作用域和全局作用域。若未使用 var 关键字声明变量，该变量将变为全局变量。为确保不同作用域的安全隔离，建议使用 var。译者补充：建议优先使用 let，安全性更高，可参考本文：ES6之”let”能替代”var”吗?。

函数调用缺少参数

在 JavaScript 中，调用函数时若缺少部分参数，有时不会报错，但可能无法达到预期的执行结果。因此，务必确保传入足够的函数参数。

索引从 0 开始

永远不要忘记数组索引是从 0 开始的。

var myArray = new Array();
myArray[10] = “List of 10 Common Mistakes”;
myArray.length; // 输出11!