js中for-in的坑

在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的对象实例，因此几乎所有的实例对象都可以使用该方法。

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