10个常见的JavaScript BUG | Fundebug博客
source link: https://blog.fundebug.com/2017/12/18/10-common-javascript-bugs-and-how-to-avoid-them/?
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
10个常见的JavaScript BUG
译者按: 安全起见,在开发中我基本不用==。
本文采用意译,版权归原作者所有
就算最牛的 JavaScript 开发者也会犯错。有时候导致程序的执行结果和预期不一样,有时候根本无法运行。这里我总结了 10 个常见的错误,我相信不管是初级还是资深开发者都可能遇到。
x 是否和 y 相等?x 是否为真?在 JavaScript 中,如何正确地做相等判断很重要,但似乎很多人搞不清楚。简单概括一下,主要是下面三种情况:条件判断(if, &&, etc.),相等操作符(==),和严格相等操作符(===)。
甚至,有的时候会不小心把赋值(=)当做相等操作符使用,千万不要搞错了!
避免使用赋值(=)
赋值(=)将右边的表达式赋值给左边的变量,例如:
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
。
在加载前引用
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 开始。
var myArray = new Array();
myArray[10] = “List of 10 Common Mistakes”;
myArray.length; // 输出11!
Recommend
-
108
重构:从Promise到Async/Await摘要: 夸张点说,技术的发展与历史一样,顺之者昌,逆之者亡。JS开发者...
-
46
Fundebug是全栈JavaScript实时错误监控平台,能够及时发现您的应用错误,助您提升用户体验。
-
48
-
50
-
32
-
8
2019-08-26Fundebug微信小程序BUG监控服务支持Source Map摘要: 自动还原真实出错位置,快速修复BUG。
-
29
作者 | Mark Smith 译者 | 王者 策划 | 万佳 在本文,我会澄清一些关于 MongoDB 的错误说法。 我加入 MongoDB 还不到一年...
-
2
JVM认知的常见10个误区_KimmKing的技术博客-CSDN博客JVM Java语言可能不是最强大的语言,但是JVM一定是最强大的虚拟机。 文章目录JVM一、JVM概述什么是JVM?JVM的生...
-
4
开发人员面临的10个最常见的JavaScript问题更新日期: 2022-11-04阅读: 67标签:
-
0
不知你是否遇到过这种情况:分明对表单设计已经有了一定了解与熟悉,但在实际操作中却又不禁陷入困扰和纠结。基于此,本文作者总结了表格设计中遇到的常见困扰点,在本篇文章中讲解了标签的疑问设计指南与表单域的设计疑问指南,希望能为你解决困惑。
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK