标准的前端开发流程图 |
web前端交互开发流程 |
前端开发管理流程图 |
根据遍历的数组,对象,DOMList将5种遍历方式分为四类:
一、只能遍历数组的:(1)for循环,(2)原生forEach
二、既能比那里数组也能遍历对象的:(1)for in,(2)$.each(),(3)第三方库扩展的forEach
三、遍历DOMList:(1)for in,(2)$(selector).each()
四、遍历数组、对象和DOMList:for in
- for循环 适用于:数组。
(1) 缺点:循环结束后 i 仍然存在于作用域。 解决方法:函数自执行。
(2)return:函数被终止。 break:终止循环。 continue:跳过当前循环
没有使用函数自执行:
javascript 代码
for (var i = 0; i < demoArr.length; i++) {
console.log(demoArr[i])
}
console.log(i) //6
函数自执行:
javascript 代码
;(function() {
for (var i = 0; i < demoArr.length; i++) {
console.log(demoArr[i])
}
console.log(‘1’)
})()
console.log(i) //i is not defined 未定义
- 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>
- $.each 适用于数组和对象
$.each(denoArr/demoObj,function(e,ele){}) —- e即key,ele即val
(1)只能用return终止。return true; 终止当前一次循环,不终止函数。return false; 终止循环,不终止函数。
javascript 代码
;(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,执行函数
- 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)
}
- $(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>
$(‘.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
评论前必须登录!
注册