for in 循环遍历之坑

问题描述：最近在做项目时，用for..in对元素进行遍历竟然多循环了一次，这让我百思不得其解，最后通过找资料，知道了问题所在之处

例子1：

<ul>
    <li class="condition"></li>
    <li class="condition"></li>
    <li class="condition"></li>
</ul>
<script type="text/javascript">
    for(var i in $('.condition')){
           console.log(typeof i)
           console.log(i)
      }
</script>

打印结果

i 的类型是string

i=0
i=1
i=2
i=length
i=prevObject
i=jquery
i=constructor
i=toArray
.
.
.

i的类型是string,竟然不是数字。它不仅打印出了0,1,2，还打印出length,prevObject

例子2：

<script type="text/javascript">
    var arr = [1,2,3,4];
    Array.prototype.name= "我是个bug"; //数组原型上加一个name属性
    for(var i in arr){
      console.log(i)
    }
</script>

打印结果

0 1 2 3 name

竟然把原型上的name也打印出来了

总结：

1. for...in循环中的循环计数器（i）是字符串而不是数字，它包含当前属性的名称或当前数组元素的索引
2. for..in循环会把某个类型的原型(prototype)中方法与属性给遍历出来，使用对象的hasOwnProperty()方法来避免这个问题
3. for..in 循环适合遍历对象，但在遍历非对象时候可以用each()或者 for循环来遍历

参考： [JavaScript中for..in循环陷阱介绍]