找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发js的几种遍历方式

2019-01-19 21:55:00 分类：JavaScript 阅读(815) 评论(0)
标准的前端开发流程图
web前端交互开发流程
前端开发管理流程图

根据遍历的数组，对象，DOMList将5种遍历方式分为四类：
一、只能遍历数组的：（1）for循环，（2）原生forEach
二、既能比那里数组也能遍历对象的：（1）for in，（2）$.each()，（3）第三方库扩展的forEach
三、遍历DOMList：（1）for in，（2）$(selector).each()
四、遍历数组、对象和DOMList：for in

  1. for循环 适用于：数组。
    （1） 缺点：循环结束后 i 仍然存在于作用域。 解决方法：函数自执行。
    （2）return：函数被终止。 break：终止循环。 continue：跳过当前循环
    没有使用函数自执行：
    javascript 代码
var demoArr = [‘Javascript’, ‘Gulp’, ‘CSS3’, ‘Grunt’, ‘jquery’, ‘angular’]
for (var i = 0; i < demoArr.length; i++) {
    console.log(demoArr[i])
}
console.log(i) //6

函数自执行：
javascript 代码

var demoArr = [‘Javascript’, ‘Gulp’, ‘CSS3’, ‘Grunt’, ‘jquery’, ‘angular’]
;(function() {
    for (var i = 0; i < demoArr.length; i++) {
        console.log(demoArr[i])
    }
    console.log(‘1’)
})()
console.log(i) //i is not defined 未定义
  1. for in 适用于数组、对象和DOMList。其他与for循环一样
    for(var key in demoArr/demoObj){}
    遍历DOMList示例：
    html 代码
<ul class=”list”>
    <li class=”item”>11</li>
    <li class=”item”>22</li>
    <li class=”item” data-item=”do”>33</li>
</ul>
<script>
    var domList = document.getElementsByClassName(‘item’)
    for (var item in domList) {
        console.log(item, ‘:’ + domList[item].innerHTML) //0:11 1:22 2:33
    }
</script>
  1. $.each 适用于数组和对象
    $.each(denoArr/demoObj,function(e,ele){}) —- e即key，ele即val
    （1）只能用return终止。return true; 终止当前一次循环，不终止函数。return false; 终止循环，不终止函数。
    javascript 代码
var demoArr = [‘Javascript’, ‘Gulp’, ‘CSS3’, ‘Grunt’, ‘jquery’, ‘angular’]
;(function() {
    $.each(demoArr, function(e, ele) {
        if (e == 2) {
            return true
        }
        console.log(e)
    })
    console.log(‘执行函数’)
})() ////0,1,3,4,5,执行函数</p>
;(function() {
    $.each(demoArr, function(e, ele) {
        if (e == 2) {
            return false
        }
        console.log(e)
    })
    console.log(‘执行函数’)
})() ////0,1,执行函数
  1. forEach 适用于数组。
    （1）只能用return终止循环。在这里return相当于for循环中的continue。只能终止当前一次循环。
    （2）可以添加第二个参数，没有第二个参数时，this指向window。
    （3）原生forEach不适用于IE。但在很多第三方库里扩展了这个方法。比如angular，可以在IE使用，也可以遍历对象
    javascript 代码
var arr1 = []
demoArr.forEach(function(val, index) {
    if (index == 2) {
        return
    } else {
        this.push(val)
        console.log(this)
    }
}, arr1) // [“Javascript”, “Gulp”, “Grunt”, “jquery”, “angular”]
  1. $(selector).each() 适用于DOMList
    html 代码
<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>循环的方式</title>
    </head>
    <body>
        <ul class=”list”>
            <li></li>
            <li></li>
            <li data-item=”do”></li>
        </ul>
    </body>
    <script src=”https://cdn.bootcss.com/jquery/3.2.1/jquery.js”></script>
    <script>
        $(‘.list li’).each(function(i, ele) {
            console.log(i, ele)
            // console.log(this == ele); // true
            $(this).html(i)
            if ($(this).attr(‘data-item’) == ‘do’) {
                $(this).html(‘data-item: do’)
            }
        })
    </script>
</html>
web前端开发的整个流程
前端开发详细流程图
前端到后端开发流程
» 本文来自：前端开发者 » 《前端开发js的几种遍历方式》
» 本文链接地址：https://www.rokub.com/7839.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论