10个在JavaScript开发中常遇到的BUG


Posted in Javascript onDecember 18, 2017

就算最牛的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有一个很不错的功能,当你把光标放在某个大括号的时候,和它匹配的大括号会高亮出来。

10个在JavaScript开发中常遇到的BUG

不匹配的引号

在定义字符串的时候,你可以自由使用单引号或则双引号。但是,如果一个字符串单引号开始,双引号结束就不行了。而且你需要注意本身字符串中的单引号或则双引号。

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的代码通常是按顺序执行,如果你引用了后面才创建的元素将会报错。

10个在JavaScript开发中常遇到的BUG

<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开始

10个在JavaScript开发中常遇到的BUG

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

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

 

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
再谈JavaScript线程
Jul 10 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 #Javascript
javaScript中的空值和假值
Dec 18 #Javascript
浅谈Webpack自动化构建实践指南
Dec 18 #Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 #Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 #Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 #Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
个人自我鉴定怎么写
2013/10/28 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
介绍信的写法
2015/01/31 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL