一,为什么不要用for in语句
jqModal这个jquery插件估计很多人都使用过,在jqModal源码内部,有一个函数为hs,其中有个嵌套循环如下,
for(var i in {jqmShow:1,jqmHide:1})
for(var s in this[i])
if(H[this[i][s]])
H[this[i][s]].w[i](this);
return F;
}
第一个for in遍历的目标是个匿名对象,没有问题。
第二个for in遍历,根据上下文确认this[i]是一个数组对象(Array)。
很多JS先驱者都告诫过我们不要对数组对象使用for in语句进行遍历,原因除了性能外,还有可能产生意料之内的bug。不听先人言,吃亏在眼前呵呵。
今天偶拿jqModal为例,说明下这种bug到底什么时候会出现,当引以为戒。
二,问题重现
关键词:原生Array类、扩展Array类
for in 语句对数组对象进行遍历潜在的bug在于:如果原生Array类被其他的js脚本库进行了原型扩展(比如多加一个toJSON方法即Array.prototype.toJSON=xxxx),那么用for in遍历扩展后的Array对象的逻辑将与遍历原生Array对象的逻辑发生差异。
举个简单的例子,
var x=[1];
for(var s in x){
alert(s);
};
按常理,如果Array是原生js类,上面语句应该只执行一次alert方法,且s为数组的索引0。但是,如果Array类被扩展了,多了一个toJSON方法,那么上面的语句将执行两次alert,第一次s为索引0,第二次s为方法名'toJSON'。
如果你设计的代码的逻辑以原生Array类为基准,在某一天你的同事在页面里面引用了一个第三方的JS库,这个库又恰好扩展了Array类,结果将难以想象,很有可能原来的代码逻辑将不再成立。
关于这种扩展原生JS类的库,很有名的一个就是prototype.js,它给Array类扩展了很多方法诸如toJSON,each等等。我现在明白为啥jquery的创始人曾经对prototype火大了(不少人因为特殊原因在一个页面里用jquery同时又用prototype,会有很多意料之外的冲突问题,仅仅一个noConflict是无法解决的)。另外,jqModal的作者如果看得懂我这篇文章估计也会对埋怨prototype,说:“我用for in对数组遍历是不明智的,但是更该死的还是prototype。。。”
如上所述,如果你在用jqModal,同时因为别的原因在用prototype,恭喜你中招了。冲突将导致jqModal的弹框在ie6、ie7下面将无法利用closeClass设置的按钮进行自动关闭。跟踪调试代码你将发现,异常的地方就在本文开头提到的hs方法的for in 循环中。。。
三,解决问题
遍历数组的地方,用for var 语句代替for in。
转自:http://www.cnblogs.com/mamboer/archive/2010/10/19/no-for-in-on-array.html
分享到:
相关推荐
Javascript技巧-不要用for in语句对数组进行遍历的一些原因分析,需要的朋友可以参考下。
PHP, MySQL & JavaScript All-in-One For Dummies 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
Helps you grasp the technologies that power web applications Covers PHP version 7.2 Includes coverage of the latest updates in web development Perfect for developers to use to solve problems
object本身就是无对象的集合,因此在用 for-in 语句遍历对象的属性时,遍历出的属性顺序与对象定义时不同。 了解W3C标准: 根据 ECMA-262(ECMAScript)第三版中描述,for-in 语句的属性遍历的顺序是由对象定义时...
以e为底的对数.rar以e为底的对数.rar以e为底的对数.rar以e为底的对数.rar以e为底的对数.rar以e为底的对数.rar
javascript完美学习视频教程-----11.javascript流程控制-跳转语句、with语句
JavaScript应用实例-遍历文件夹.js
开源项目-pazams-go-for-javascript-developers.zip,pazams/go-for-javascript-developers
JavaScript之for循环语句(源代码)JavaScript之for循环语句(源代码)JavaScript之for循环语句(源代码)JavaScript之for循环语句(源代码)JavaScript之for循环语句(源代码)JavaScript之for循环语句(源代码)JavaScript之...
主要介绍了Javascript中For In语句用法,实例分析了javascript使用For In语句遍历数组的技巧,需要的朋友可以参考下
PHP, MySQL, JavaScript All-in-One For Dummies 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 ...
摘要:for-in遍历方式的循环计数器是字符串类型,遍历对象时为对象属性/方法名,遍历数组时为数组元素下标索引,与普通的for循环不同,for-in会将继承的属性/方法列出,这一点在使用时需要特别关注。 除了传统的for...
Speaking [removed] An In-Depth Guide for Programmers 1st Edition Like it or not, JavaScript is everywhere these days—from browser to server to mobile—and now you, too, need to learn the language or...
javascript小技巧-js小技巧收集.docjavascript小技巧-js小技巧收集.doc
Javascript使用技巧 -.mht
(1)For...In 声明用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。 - 2 - (2). 事件是可以被 JavaScript 侦测到的行为。 - 4 - (3)try...catch 的作用是测试代码中的错误。 - 5 - (4)。...
练习-Dev.f Dev.f在Javascript 1.-Factorial 2.-Fibonacci序列3.-对数组进行排序的3个练习
主要介绍了javascript数组遍历for与for in区别,是篇非常不错的文章,这里推荐给小伙伴们。