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

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

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

相关推荐

  • JavaScript中offsetWidth的bug及解决方法

    JavaScript中offsetWidth的bug及解决方法

    offsetWidth表示对象的可见宽度. 比如: #div1 { width: 100px; height: 200px; background: red; } 结果:100 #div1 { width: 100px; height: 200px; background: red; border: 2px solid black; } 结果:104 (100 + 2 + 2) #div1 { width: 100px; height: 200px; background: red; borde

  • javascript判断firebug是否开启的方法

    本文实例讲述了javascript判断firebug是否开启的方法.分享给大家供大家参考,具体如下: 经常用Firefox + Firebug调试JavaScript的朋友都知道,一但开启firebug,页面js的运行将显著变慢. 页面的javascript是否能够主动判断当前Firebug是否已开启呢? 答案是肯定的. Firebug已经更新了很多个版本了.印象中某个旧版本可以通过检测console.firebug来判断,不过现在已经无效了. 最近几个版本的firebug可以通过console

  • 详解JavaScript的BUG和错误

    计算机程序中的缺陷通常称为 bug. 它让程序员觉得很好,将它们想象成小事,只是碰巧进入我们的作品. 实际上,当然,我们自己把它们放在了那里. 如果一个程序是思想的结晶,你可以粗略地将错误分为因为思想混乱引起的错误,以及思想转换为代码时引入的错误. 前者通常比后者更难诊断和修复. 语言 计算机能够自动地向我们指出许多错误,如果它足够了解我们正在尝试做什么. 但是这里 JavaScript 的宽松是一个障碍. 它的绑定和属性概念很模糊,在实际运行程序之前很少会发现拼写错误. 即使这样,它也允许你做

  • 解决JavaScript实现省市联动过程中的bug

    先把实现省市联动遇到的问题描述一下 1.1.原来的思路 1.1.1.初始化加载省份 $.ajax({ 'type' : 'POST', 'dataType' : 'json', 'url' : '${rc.contextPath}/crm/merchantMgr/editMerchantBankAccount.htm?method=getBankProvinces', 'success' : function(msg) { bankProvinces = msg; for(var i=0;i<b

  • Node.js利用debug模块打印出调试日志的方法

    前言 大家都知道在node程序开发中时,经常需要打印调试日志.用的比较多的是debug模块,比如express框架中就用到了.下文简单举几个例子进行说明.文中相关代码示例,可在这里找到. 备注:node在0.11.3版本也加入了util.debuglog()用于打印调试日志,使用方法跟debug模块大同小异. 基础例子 首先,安装debug模块. npm install debug 使用很简单,运行node程序时,加上DEBUG=app环境变量即可. /** * debug基础例子 */ var

  • node.js中debug模块的简单介绍与使用

    node.js中debug模块的简单介绍与使用

    前言 相信使用node.js的朋友们都知道,一般在nodejs需要进行调试的时候,可以使用console.log()方法来将调试信息输出到控制台,当发布到生产环境的时候,需要将这些调试信息都注释掉,为了方便切换而不需要改动程序代码,可以使用nodejs的debug模块 var debug = require('debug')('myapp:main'); debug('现在的时间是 %s' , new Date()); 如果是开发环境,只需要设置环境变量 这样就可以输出调试信息 如果需要关闭调试

  • 分析JS中this引发的bug

    分析JS中this引发的bug

    在 js 中,this 这个上下文总是变化莫测,很多时候出现bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就可以了,以下就是我们给大家整理的相关内容: 在JavaScript中有一个很特别.很常用又常常让初学者很困扰的东西 ─ "this",在这堂课中会来谈谈这个"this". this通常会指向一个对象,同时this会在不同的情境下指向不同的对象.让我们来看几个不同的情境,帮助我们更了解"this". window object (

  • JS解决IOS中拍照图片预览旋转90度BUG的问题

    JS解决IOS中拍照图片预览旋转90度BUG的问题

    上篇文章[Js利用Canvas实现图片压缩功能]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编程了.通过度娘找到了相关资料,解决方法记录在此.这个问题的具体因素其实我还是不清楚是为何导致的,只有IOS和部分三星手机会出现此bug. 绝大部分的安卓机并无此问题. 解决此问题需要引入一个第三方 JS 库: exif.js 下载地址:https://github.com/exif-js/exif-

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

    就算最牛的JavaScript开发者也会犯错.有时候导致程序的执行结果和预期不一样,有时候根本无法运行.这里我总结了10个常见的错误,我相信不管是初级还是资深开发者都可能遇到. 相等混淆 x是否和y相等?x是否为真?在JavaScript中,如何正确地做相等判断很重要,但似乎很多人搞不清楚.简单概括一下,主要是下面三种情况:条件判断(if, &&, etc.),相等操作符(==),和严格相等操作符(===). 甚至,有的时候会不小心把赋值(=)当做相等操作符使用,千万不要搞错了! 避免使用

  • 弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】

    本文实例讲述了弱类型语言javascript开发中的一些坑.分享给大家供大家参考,具体如下: 测试1: (未声明变量自动提升为全局变量) test1(); function test1() { function setName() { name = '张三'; // 此处没有var声明,提升至全局 } setName(); console.log(name);// '张三' } 测试2: (函数内部局部变量的变量提升) test2(); function test2() { var a = 1;

  • Android开发中Signal背后的bug与解决

    目录 背景 出现SIGABRT的原因 SIGSEGV被捕获但是调用jni无法进行 小结 背景 熟悉我的老朋友可能都知道,之前为了应对crash与anr,开源过一个“民间偏方”的库Signal,用于解决在发生crash或者anr时进行应用的重启,从而最大程度减少其坏影响. 在维护的过程中,发生过这样一件趣事,就是有位朋友发现在遇到信号为SIGSEGV时,再调用信号处理函数的时候 void SigFunc(int sig_num, siginfo *info, void *ptr) { // 这里判

  • 你需要知道的10个最佳javascript开发实践小结

    尽管很多的开发人员都乐于颂扬javascript,但是仍旧有人看到它的阴暗面. 使用很多javascript代码的web页面会加载很慢,过多的使用javascript使得网页丑陋和拖沓.很快如何有效地使用javascript成为一个非常火热的话题. 这里让我们列出10个最佳javascript实践,帮助你有效地使用javascript. 1. 尽可能的保持代码简洁 可能大家都听到过了N遍这个代码简洁问题了.作为一个开发人员你可能在你的代码开发过程中使用了很多次,但千万不要在js开发中忘记这点.

  • JavaScript 开发中规范性的一点感想

    可谓一劳永逸,不要重复造轮子:) 1.常用的方法统一放置 例如:在用户注册时,时常需要判断文本框中字符是否是汉字.英文.数字或邮箱地址等等.何不把这些方法统一放在一个脚本中,取名叫做utility.js呢? 复制代码 代码如下: //待需要时另存为一个js function isNull(obj) { if (!obj || obj.length==0 || obj=="") { parent.MyAlert("标注名不能为空!",alertImg); return

  • Python程序员开发中常犯的10个错误

    Python是一门简单易学的编程语言,语法简洁而清晰,并且拥有丰富和强大的类库.与其它大多数程序设计语言使用大括号不一样 ,它使用缩进来定义语句块. 在平时的工作中,Python开发者很容易犯一些小错误,这些错误都很容易避免,本文总结了Python开发者最常犯的10个错误,一起来看下,不知你中枪了没有. 1.滥用表达式作为函数参数默认值 Python允许开发者指定一个默认值给函数参数,虽然这是该语言的一个特征,但当参数可变时,很容易导致混乱,例如,下面这段函数定义: 复制代码 代码如下: >>

  • 设计模式中的facade外观模式在JavaScript开发中的运用

    概念 外观模式(门面模式),是一种相对简单而又无处不在的模式.外观模式提供一个高层接口,这个接口使得客户端或子系统更加方便调用. 外观模式并不是适配器模式,适配器模式是一种包装器,用来对接口进行适配以便在不兼容系统中使用它.而创建外观元素则是图个方便.它并不用于达到需要特定接口的客户系统打交道这个目的,而是用于提供一个简化的接口. JavaScript代码示例 用一段再简单不过的代码来表示 var getName = function(){ return ''svenzeng" } var ge

  • JavaScript面试中常考的字符串操作方法大全(包含ES6)

    一.charAt() 返回在指定位置的字符. var str="abc" console.log(str.charAt(0))//a 二.charCodeAt() 返回在指定的位置的字符的 Unicode 编码. var str="abc" console.log(str.charCodeAt(1))//98 三.concat() 连接字符串. var a = "abc"; var b = "def"; var c = a.c

  • javascript开发中因空格引发的错误

    废话不多说,先上代码给大家看看 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

  • javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

    onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效. 好

随机推荐