译者按: 安全起见,在开发中我基本不用==。

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

就算最牛的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/

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

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

    1.IE6 幽灵文本(Ghost Text bug) 在我写本文之前,我遇到了这个bug.它相当的古怪和滑稽.一块不知哪来的重复的文本,被IE6显示在靠近原文本的下面.(译注:也可以参看 Explor ...

  2. 10个常见的Node.js面试题

    如果你希望找一份有关Node.js的工作,但又不知道从哪里入手评测自己对Node.js的掌握程度. 本文就为你罗列了10个常见的Node.js面试题,分别考察了Node.js编程相关的几个主要方面. ...

  3. 10个最好的 JavaScript 动画库和开发框架

    虽然 CSS3 动画功能能够让我们以简单轻松的方式实现动画效果,但是浏览器兼容性问题让人头疼.不过不用担心,我们还有另外的武器——JavaScript,它同样可以帮助你实现各种各样的动画效果,而且借助 ...

  4. Linux下命令行cURL的10种常见用法示例

    curl的命令行工具功能非常强大,这些数据交互的功能基本上都是通过URL方式进行的,下面这篇文章主要给大家分享了在Linux中命令行cURL的10种常见用法示例,通过示例代码介绍的非常详细,需要的朋友 ...

  5. 几种常见的JavaScript混淆和反混淆工具分析实战

    几种常见的JavaScript混淆和反混淆工具分析实战 xiaix2016-03-05+8共1195751人围观 ,发现 5 个不明物体WEB安全 信息安全常被描述成一场军备竞赛,白帽与黑帽,渗透测试 ...

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

    虽然博主并不认同黑帽seo手法,但是一些常见的黑帽手法还是需要了解的,增加自己对黑帽的认知,也可以在自己优化网站时适时的规避开这些黑帽手法,从而避免自己的网站被搜索引擎惩罚.好了,话不多说,下面进入今 ...

  7. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

  8. IPv6系列-初学者的10个常见困扰

    本文是<IPv6系列>文章的第二篇<常见困扰>,紧接<入门指南>,用于解答IPv6的10个常见困扰. 小慢哥的原创文章,欢迎转载 目录 ▪ 本文缘由 ▪ 困扰1. ...

  9. 10 个优秀的JavaScript开发框架

    阅读目录 TouchStone.js Meteor Knockout Enyo.js Reactive-coffee ExtJS Aurajs Cappuccino canjs Feathersjs ...

随机推荐

  1. 背水一战 Windows 10 (95) - 选取器: 自定义文件保存选取器

    [源码下载] 背水一战 Windows 10 (95) - 选取器: 自定义文件保存选取器 作者:webabcd 介绍背水一战 Windows 10 之 选取器 自定义文件保存选取器 示例1.演示如何 ...

  2. python爬虫学习之正则表达式的基本使用

    一.正则表达式 1. 正则表达式是字符串处理的有力工具和技术. 2. 正则表达式使用某种预定义的模式去匹配一类具有共同特征的字符串,主要用于处理字符串,可以快速.准确地完成复杂的查找.替换等处理要求, ...

  3. Cobaltstrike、armitage联动

    i 春秋作家:fengzi 原文来自:Cobaltstrike.armitage联动 在使用Cobaltstrike的时候发现他在大型或者比较复杂的内网环境中,作为内网拓展以及红队工具使用时拓展能力有 ...

  4. JavaPoet开源项目的使用

    一.介绍 JavaPoet项目可以动态的生成Java文件,这是一个很强大和很动态的方法,使用注解的时候假如需要生成新的Java文件就可以通过这个开源项目实现. 项目地址:https://github. ...

  5. Im4java 操作 ImageMagick 处理图片

    背景 之前用的是JMagick,各种限制各种坑,直到使用了Im4java,真是相当的好用啊. 项目描述 ImageMagic的安装可参考:图片处理软件 ImageMagick 的安装和使用 Im4ja ...

  6. Kali学习笔记22:缓冲区溢出漏洞利用实验

    实验机器: Kali虚拟机一台(192.168.163.133) Windows XP虚拟机一台(192.168.163.130) 如何用Kali虚拟机一步一步“黑掉”这个windowsXP虚拟机呢? ...

  7. lua入门demo(HelloWorld+redis读取)

    1. lua入门demo 1.1. 入门之Hello World!! 由于我习惯用docker安装各种软件,这次的lua脚本也是运行在docker容器上 openresty是nginx+lua的各种模 ...

  8. 神经网络架构PYTORCH-宏观分析

    基本概念和功能: PyTorch是一个能够提供两种高级功能的python开发包,这两种高级功能分别是: 使用GPU做加速的矢量计算 具有自动重放功能的深度神经网络从细的粒度来分,PyTorch是一个包 ...

  9. RISC-V指令集介绍 - 整数基本指令集

    1. 寄存器 32个x寄存器,RV32下x reg是32位宽 x0:硬连线 常数0 专门的零寄存器 x1-x31:31个通用reg 返回地址:没有强制要求那一个x作为lr,但是一般用x1 pc:额外的 ...

  10. 机器学习入门05 - 泛化 (Generalization)

    原文链接:https://developers.google.com/machine-learning/crash-course/generalization 泛化是指模型很好地拟合以前未见过的新数据 ...