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

标准的前端开发流程图
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

评论 抢沙发

评论前必须登录!