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循环陷阱介绍]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,766评论 18 399
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,948评论 18 139
  • 毕加索说, 优秀的艺术家模仿,伟大的艺术家则是剽窃。 高更又说, 别过于摹仿自然,艺术是一种抽象。 塞尚 又说, ...
    阁的画本阅读 4,170评论 60 205
  • 感赏自己今天顺利完成了一天的工作,在本学期的最后一天课由于搭档老师请假,整天的课程由我0来上,感谢孩子们还算配合。...
    旦子阅读 169评论 0 0
  • 梦到自己坐了一列奇怪的火车去别处,一天后折返,眼前人神情凄怆,一遍遍只问我一句【你怎么一走三十年?】 那个情景很奇...
    子棋阅读 456评论 1 1