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>后面
  • 将代码放到函数中,并且和bodyonload绑定。
<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,那么最好细化,比如firstNamelastNamedogNamenameOfTheWind

作用域问题

JavaScript中有函数作用域和全局作用域。如果你没有使用var关键字来声明,那么它是全局的。为了确保不同作用域的安全隔离,建议使用var。译者补充:建议使用let,更加安全,可参考本文:ES6之”let”能替代”var”吗?

函数调用缺少参数

在JavaScript中,在函数调用的时候少了几个参数,有时候并不会出错,但可能达不到预期的执行结果。所以,确保你传入了足够的函数参数。

从0开始

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

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

版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/12/18/10-common-javascript-bugs-and-how-to-avoid-them/

原文地址:https://www.cnblogs.com/fundebug/p/8353077.html

时间: 2024-10-11 11:06:08

10个常见的JavaScript BUG的相关文章

10个常见的IE bug和解决方法

1.IE6 幽灵文本(Ghost Text bug) 在我写本文之前,我遇到了这个bug.它相当的古怪和滑稽.一块不知哪来的重复的文本,被IE6显示在靠近原文本的下面.(译注:也可以参看 Explorer 6 Duplicate Characters Bug 获得bug演示).我无法解决它,所以我搜索它,果然,这是另一个IE6的bug. 对此有许多解决方法,但是没有一个对我的例子有效(因为网站的复杂性我无法使用其中的一些方法).所以我使用了hack.在原文本之后增加空格看起来能解决这个问题. 但

10个常见的Node.js面试题

如果你希望找一份有关Node.js的工作,但又不知道从哪里入手评测自己对Node.js的掌握程度. 本文就为你罗列了10个常见的Node.js面试题,分别考察了Node.js编程相关的几个主要方面. 在进入正文之前,需要提前声明两点: 这些问题只是Node.js知识体系的一个局部,并不能完全考察被面试者的实际开发能力. 对现实世界开发中遇到的问题,需要的是随机应变与团队合作,所以你可以尝试结对编程. Node.js面试题列表 什么是错误优先的回调函数? 如何避免回调地狱? 如何用Node来监听8

10个常见的 Android 新手误区

在过去十年的移动开发平台中,作为资深的移动开发人员,我们认为Android平台是一个新手最广为人知的平台.它不仅是一个廉价的工具,而且有着良好的开发社区,以及从所周知的编程语言(Java),使得开发Android应用程序变得前所未有的简单.即便是这样,我们仍然看到不少Android开发新手一遍又一遍地犯着同样的错误.以下是10个最常见的误区. 1.不读Android开发文档 Android开发者网站可以很好的帮助你.很多的文档也可以通过SDK工具下载.这些文档不仅仅是Javadoc API的参考

10 款强大的JavaScript图表图形插件推荐

转自:http://www.iteye.com/news/24535 网上有很多用于绘制图表图形的免费JavaScript插件和图表库,这类插件大量出现的原因,一是人们不再依赖于Flash,二是浏览器和精密的计算使呈现实时数据变得容易,而且各种向量绘图技术像VML.SVG和Canvas的发展也使之成为可能. 本文推荐10款强大的绘制图表图形的JavaScript插件.其中一些插件需要主流浏览器的支持,而另外一些经过整合后,也能在不同的平台和老版本的浏览器上工作.有些工具是独立的框架,大部分支持常

Android记录一个setTextColor常见的一个bug

今天写代码 一不小心就犯了个错误.仔细检查才发现,仅记录一下,防止各位同学犯同样的错误哦 代码如下: remote.setTextColor(summaryId, R.color.news_have_read); 如上,代码无论如何都不能正常显示颜色.只好换成如下代码: remote.setTextColor(summaryId,0xfdfdfdfd); 总不能写颜色值多麻烦..还是写的color.xml中吧. 最后才发现应该这样写才最对. remote.setTextColor(summary

10 个强大的JavaScript / jQuery 模板引擎推荐

模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易.本文整理了10 款基于JavaScript和jQuery的模板引擎,希望能对你的开发工作带来一些帮助. 1. NANO 最简单的jQuery模板引擎,完美实现对JSON的解析. 源码 / 演示 2. The "template" binding 该工具通过渲染模板将相关联的DOM元素组织到一起.

10种常见的软件架构模式

架构模式 架构模式是一个通用的.可重用的解决方案,用于在给定上下文中的软件体系结构中经常出现的问题.架构模式与软件设计模式类似,但具有更广泛的范围.在本文中,将简要地解释以下10种常见的体系架构模式,以及它们的用法.优缺点. 分层模式 客户端-服务器模式 主从设备模式 管道-过滤器模式 代理模式 点对点模式 事件总线模式 模型-视图-控制器模式 黑板模式 解释器模式 一. 分层模式 这种模式也称为多层体系架构模式.它可以用来构造可以分解为子任务组的程序,每个子任务都处于一个特定的抽象级别.每个层

10 个优秀的JavaScript开发框架

实用的Javascript开发框架 JavaScript基本上是一个面向对象的脚本语言,创建web应用程序和互动网站.Javascript框架也被称为Javascript库.JavaScript框架很容易提高设计web开发工作,提供了许多特性和功能,从而帮助开发人员提高网站开发任务.Javascript框架被认为是作为一个软件开发的应用程序必不可少的脚本语言,可以让web开发人员快速创建web设计和开发动态网站.使用这些javascript框架,你可以减少工作的时间,可以减少费用,为客户通过使用

浅析10种常见的黑帽seo手法

虽然博主并不认同黑帽seo手法,但是一些常见的黑帽手法还是需要了解的,增加自己对黑帽的认知,也可以在自己优化网站时适时的规避开这些黑帽手法,从而避免自己的网站被搜索引擎惩罚.好了,话不多说,下面进入今天的主题:10种常见的黑帽手法详解. 1.关键词堆积 这是老生常谈的问题,最常见的一种黑帽seo手法.在网站的内容中,我们讲究的是自然出现关键词,没必要出现时就不要出现,而有些人单纯的为了提升关键词的"密度"在文章中刻意并大量出现关键词,其引出的后果是语句不通顺,严重影响用户的阅读体验,导