JS判断对象是否存在的方法
Javascript语言的设计不够严谨,很多地方一不小心就会出错。
举例来说,请考虑以下情况。
现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明。用自然语言描述的算法如下:
if (myObj不存在){
声明myObj;
}
你可能会觉得,写出这段代码很容易。但是实际上,它涉及的语法问题,远比我们想象的复杂。Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法。只有对Javascript语言的实现细节非常清楚,才可能分得清它们的区别。
第一种写法:
根据直觉,你可能觉得可以这样写:
if (!myObj) {
myObj = { };
}
但是,运行这段代码,浏览器会直接抛出ReferenceError错误,导致运行中断。请问错在哪里?
对了,if语句判断myObj是否为空时,这个变量还不存在,所以才会报错。改成下面这样,就能正确运行了。
if (!myObj) {
var myObj = { };
}
为什么加了一个var以后,就不报错了?难道这种情况下,if语句做判断时,myObj就已经存在了吗?
要回答这个问题,就必须知道Javascript解释器的工作方式。Javascript语言是”先解析,后运行”,解析时就已经完成了变量声明,所以上面的代码实际等同于:
var myObj;
if (!myObj) {
var myObj = { };
}
因此,if语句做判断时,myObj确实已经存在了,所以就不报错了。这就是var命令的”代码提升”(hoisting)作用。Javascript解释器,只”提升”var命令定义的变量,对不使用var命令、直接赋值的变量不起作用,这就是为什么不加var会报错的原因。
第二种写法:
除了var命令,还可以有另一种改写,也能得到正确的结果:
if (!window.myObj) {
myObj = { };
}
window是JavaScript的顶层对象,所有的全局变量都是它的属性。所以,判断myobj是否为空,等同于判断window对象是否有myobj属性,这样就可以避免因为myObj没有定义而出现ReferenceError错误。
不过,从代码的规范性考虑,最好还是对第二行加上var:
if (!window.myObj) {
var myObj = { };
}
或者写成这样:
if (!window.myObj) {
window.myObj = { };
}
第三种写法:
上面这种写法的缺点在于,在某些运行环境中(比如V8、Rhino),window未必是顶层对象。所以,考虑改写成:
if (!this.myObj) {
this.myObj = { };
}
在全局变量的层面中,this关键字总是指向顶层变量,所以就可以独立于不同的运行环境。
第四种写法:
但是,上面这样写可读性较差,而且this的指向是可变的,容易出错,所以进一步改写:
var global = this;
if (!global.myObj) {
global.myObj = { };
}
用自定义变量global表示顶层对象,就清楚多了。
第五种写法:
还可以使用typeof运算符,判断myObj是否有定义。
if (typeof myObj == "undefined") {
var myObj = { };
}
这是目前使用最广泛的判断javascript对象是否存在的方法。
第六种写法:
由于在已定义、但未赋值的情况下,myObj的值直接等于undefined,所以上面的写法可以简化:
if (myObj == undefined) {
var myObj = { };
}
这里有两个地方需要注意,首先第二行的var关键字不能少,否则会出现ReferenceError错误,其次undefined不能加单引号或双引号,因为这里比较的是undefined这种数据类型,而不是”undefined”这个字符串。
第七种写法:
上面的写法在”精确比较”(===)的情况下,依然成立:
if (myObj === undefined) {
var myObj = { };
}
第八种写法:
根据javascript的语言设计,undefined == null(注意是“==“),所以比较myObj是否等于null,也能得到正确结果:
if (myObj == null) {
var myObj = { };
}
不过,虽然运行结果正确,但是从语义上看,这种判断方法是错的,应该避免。因为null指的是已经赋值为null的空对象,即这个对象实际上是有值的,而undefined指的是不存在或没有赋值的对象。因此,这里只能使用”比较运算符”(==),如果这里使用”精确比较运算符”(===),就会出错。
第九种写法:
还可以使用in运算符,判断myObj是否为顶层对象的一个属性:
if (!(‘myObj’ in window)) {
window.myObj = { };
}
第十种写法:
最后,使用hasOwnProperty方法,判断myObj是否为顶层对象的一个属性:
if (!this.hasOwnProperty(‘myObj’)) {
this.myObj = { };
}
总结:
1. 如果只判断对象是否存在,推荐使用第五种写法。
2. 如果除了对象是否存在,还要判断对象是否有null值,推荐使用第一种写法。
3. 除非特殊情况,所有变量都应该使用var命令声明。
4. 为了跨平台,建议避免使用window表示顶层对象。
5. 在Javascript语言中,null和undefined容易产生混淆。在可能同时涉及两者的情况下,建议使用”精确比较”运算符(===)。
原文链接:http://www.qingdou.me/4993.html
JS判断对象是否存在的方法的更多相关文章
- js遍历对象的属性和方法
js遍历对象的属性和方法 一.总结 二.实例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: 在构造函数中判断参数值是否为undefined,如 ...
- Js判断对象是否为空,Js判断字符串是否为空
Js判断对象是否为空,Js判断字符串是否为空,JS检查字符串是否为空字符串 >>>>>>>>>>>>>>>&g ...
- Js判断对象是否是数组的方法
1.ECMAScript5中有一个现成的方法:Array.isArray(). var obj = {1:[1],2:[2]}, arr = [1], str = "1"; Arr ...
- js 判断对象相等
文笔不是很好,一直在博客园属于那种只看不说的那种,有次心血来潮,想把自己的一些心得记录下来,我认认真真写了大半个小时,谁知一点保存,会话超时然后我的东西不知道去哪里,当时想死的心都有,写博客也就没那个 ...
- JavaScript中判断对象类型的种种方法
我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...
- js判断数据类型的四种方法
1.typeof typeof是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型.返回的结果用该类型的字符串(全小写字母)形式表示,包括number,string,boolean,und ...
- 转 JavaScript中判断对象类型的种种方法
我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...
- [转]js判断数据类型的四种方法
原文地址:https://www.cnblogs.com/crackedlove/p/10331317.html 1.typeof typeof是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的 ...
- js判断对象数组中是否存在某个对象
1. 如果要判断数组中是否存在某个元素的话很好判断,直接用数组的indexOf方法就好,存在返回当前索引不存在返回-1 var arr=[1,2,3,4] arr.indexOf(3) arr.ind ...
随机推荐
- (C#) 多线程修改布尔值, volatile
参考: https://msdn.microsoft.com/en-us/library/x13ttww7(VS.80).aspx http://stackoverflow.com/questions ...
- HDU5221 Occupation 树链剖分
题意: 给出一棵树,root=1,树有点权,有一个人叫做M 有3种操作: 1 u v 把u到v路径上的所有点的点权都给M 2 u 若u的点权在M手上,拿走 3 u 把u为根的子树的所有点权都给M 每一 ...
- [实变函数]3.2 可测集 (measurable set)
1 $\bbR^n$ 中集合 $E$ 称为可测的 (measurable), 如果 $$\bee\label{3.2:Caratheodory} m^*T=m^*(T\cap E)+m^*(T\cap ...
- ICANN认证企业列表
查询地址: http://www.internic.net/alpha.html
- JConsole connection failed
最近用jconsole本地连接eclipse失败 , 如下图 : 在eclipse.ini中添加如下代码即可 -Dcom.sun.management.jmxremote.port=9999-Dcom ...
- Python快速教程
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 怎么能快速地掌握Python?这是和朋友闲聊时谈起的问题. Python包含的内容 ...
- crm plugin 未能加载文件或程序集“xxxx,”或它的某一个依赖项。系统找不到指定的文件。
plugin运行出错. 1 plugin文件如果是 注册到disk,应该是注册到 C:\Program Files\Microsoft Dynamics CRM\Server\bin\assembl ...
- Dynamics CRM 2011 权限管理(转)
http://www.cnblogs.com/LeoTang/p/3344265.html Dynamics CRM 2011 权限管理 CRM系统基于角色的权限主要通过部门.角色.用户.团队来 进行 ...
- Excel粘贴到textarea换行符替换
复制到→ Excel列表的内容复制到textarea中后,前台取到的文本是这样的: chrome监视显示 console.log输出 现在需要将excel中的每行数据拼接起来用“;”隔开,方法如下: ...
- js注意事项
在数组顶部插入一条数据 data.result.unshift({ Value: 'all', Text: '请选择分类' }); 执行iframe中的javascript方法 window.fram ...