视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript中利用各种循环进行遍历的方式总结_基础知识
2020-11-27 21:45:23 责编:小采
文档

为了方便例子讲解,现有数组和json对象如下




for in

for(var item in arr|obj){} 可以用于遍历数组和对象

遍历数组时,item表示索引值, arr表示当前索引值对应的元素 arr[item]
遍历对象时,item表示key值,arr表示key值对应的value值 obj[item]



关于for in,有以下几点需要注意:

在for循环与for in循环中,i值都会在循环结束之后保留下来。因此使用函数自执行的方式避免。
使用return,break,continue跳出循环都与for循环一致,不过关于return需要注意,在函数体中,return表示函数执行终止,就算是循环外面的代码,也不再继续往下执行。而break仅仅只是终止循环,后面的代码会继续执行。



参数arg表示数组每一项的元素,实例如下



具体有以下需要注意的地方

  • forEach无法遍历对象
  • forEach无法在IE中使用,firefox和chrome实现了该方法
  • forEach无法使用break,continue跳出循环,使用return时,效果和在for循环中使用continue一致
  • do/while

    函数具体的实现方式如下,不过有一点值得注意的是,当使用continue时,如果你将i++放在了后面,那么i++的值将一直不会改变,最后陷入死循环。因此使用do/while一定要小心谨慎一点。

    不建议使用do/while的方式来遍历数组

    
    
    $.each
    
    
    
    
     
    

    可以用来遍历数组和对象,其中e表示索引值或者key值,ele表示value值

    
    
    

    输出为

    0 "Javascript"
    1 "Gulp"
    2 "CSS3"
    3 "Grunt"
    4 "jQuery"
    5 "angular"
    

    这里有很多需要注意的地方

  • 使用return 或者return true为跳过一次循环,继续执行后面的循环
  • 使用return false为终止循环的执行,但是并不终止函数执行
  • 无法使用break与continue来跳过循环
  • 循环中this值输出类似如下

    
    
    
    

    关于上面的this值,遍历一下

    
    
    

    为什么length 和 [[PrimitiveValue]]没有遍历出来?突然灵光一动,在《javascript高级编程》中找到了答案,大概意思就是javascript的内部属性中,将对象数据属性中的Enumerable设置为了false

    
    $(selecter).each
    

    专门用来遍历DOMList

    
    
    

    i: 序列值 ele: 只当前被遍历的DOM元素
    this 当前被遍历的DOM元素,不能调用jQuery方法
    $(this) == $(ele) 当前被遍历元素的jquery对象,可以调用jquery的方法进行dom操作
    使用for in 遍历DOMList

    因为domList并非数组,而是一个对象,只是因为其key值为0,1,2… 而感觉与数组类似,但是直接遍历的结果如下

    
    
    

    因此我们在使用for in 遍历domList时,需要将domList转换为数组

    
    
    

    类似这样的对象还有函数的属性arguments对象,当然字符串也是可以遍历的,但是因为字符串其他属性的enumerable被设置成了false,因此遍历出来的结果跟数组是一样的,也就不用担心这个问题了.
    小补充

    如果你发现有些人写函数这样搞,不要惊慌,也不要觉得他高大上鸟不起

    
    
    

    ()(), !function() {}() +function() {}() 三种函数自执行的方式^_^

    下载本文
    显示全文
    专题