在js中一般使用的循环有两种

1.常规的for(var i=0;i<length;i++)

2.for-in:for(var item in list)

但是个人更喜欢使用第一种循环,而不喜欢几乎从来不使用for-in这种写法,原因如下:

1.第一种写法能够很好的控制循环何时结束,以及对应的索引;而第二种循环无法控制

2.第二种写法在某种情况下,可能会导致一些奇怪的bug

针对原因2参见下面简单的案例:


以上是在jsBin中编辑的代码,在第一段代码中,对js的数组Array添加了一个新的方法(prototype 属性使您有能力向对象添加属性和方法),为了在某些时候能够方便使用。此时,如果用for-in循环出数组arr的内容,会发现在本来想要得到的0,1,2,3的后面会多一个function(){alert("myfunction">

注意:for..in循环会把某个类型的原型(prototype)中方法与属性给遍历出来,所以这可能会导致代码中出现意外的错误

上面只是简单的遍历一个数组,可能出现的问题还不够明显,如下所示


如果我们遍历的数组中存放的是业务对象,此时会发现,最后一次输出的是空,在被循环的数组中不存在这个名称为空的人员,此时出现的错误就导致某些业务无法正常使用或显示。

对于使用for-in可能导出的bug,有两种方式避免

1.在循环数组集合时,不使用for-in,统一使用for(var i=0;i<length;i++)这种形式;

2.在for-in循环中增加一个hasOwnProperty的判断;

hasOwnProperty函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有,返回true,否则返回false

该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法。


上述的两种方式,个人觉得第一种方式更好,因为是从根源上避免问题的发生,对于第二种方式,完全是为了解决问题而增加额外的处理完全没有这个必要。