问题描述:最近在做项目时,用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也打印出来了
总结:
- for...in循环中的循环计数器(i)是字符串而不是数字,它包含当前属性的名称或当前数组元素的索引
- for..in循环会把某个类型的原型(prototype)中方法与属性给遍历出来,使用对象的hasOwnProperty()方法来避免这个问题
- for..in 循环适合遍历对象,但在遍历非对象时候可以用each()或者 for循环来遍历
参考: [JavaScript中for..in循环陷阱介绍]