搜索
您的当前位置:首页正文

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循环来遍历
Top