前端开发JavaScript的几种遍历方式
摘要： 标准的前端开发流程图 web前端交互开发流程 前端开发管理流程图 根据遍历的数组，对象，DOMList将5种遍历方式分为四类： 一、只能遍历数组的：（1）for循环，（2）原生forEach 二、既能比那里数组也……
| 标准的前端开发流程图 |
| 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)
}
}, arr1) // [“Javascript”, “Gulp”, “Grunt”, “jquery”, “angular”]
- $(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前端开发的整个流程 |
| 前端开发详细流程图 |
| 前端到后端开发流程 |
» 本文来自：前端开发者 » 《前端开发JavaScript的几种遍历方式》
» 本文链接地址：https://www.rokub.com/7839.html
» 您也可以订阅本站：https://www.rokub.com
近期评论