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 相关文章推荐
js实现的常用的左侧导航效果
Oct 17 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
详解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 图片水印类代码
2012/08/27 PHP
基于php缓存的详解
2013/05/15 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
python距离测量的方法
2018/03/06 Python
python实现可逆简单的加密算法
2019/03/22 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
python 通过文件夹导入包的操作
2020/06/01 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
视图的作用
2014/12/19 面试题
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
英语国培研修感言
2014/02/13 职场文书
演讲主持词
2014/03/18 职场文书
新闻编辑求职信
2014/04/09 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
环保建议书范文
2015/09/14 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
HTTP中的Content-type详解
2022/01/18 HTML / CSS