前端遍历函数forEach() 、 $().each() 和 $.each() 学习总结

雨点打透心脏的1/2处 2023-06-28 11:22 29阅读 0赞

# 前端遍历函数 #

## forEach() ##

**1、forEach() 是JS遍历数组的方法**

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html> 
        <body> 
        	<h1>小白学习</h1>
        	<script>
        		var arr=[2,5,15,9,6,0,1,3];
        		arr.forEach(function(val,index,arr){
        		    // var 数组中当前的值
        		    // index 当前的值得下标
        		    // arr 原数组
        		    arr[index] = val+10;
        		})
        		console.log(arr);
    //--------------------------------------------------
                    arr.forEach(function(val,index){
        		    console.log(val);
        		});
        	</script>
        </body> 
    </html>

![20200109102242566.png][]

![20200109102630344.png][]

**2、forEach() 方法还可用于调用数组的每个元素，依次传递给回调函数 \[ 例子中的 myfunction(） \]。**

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html> 
        <body> 
        	<h1>小白学习</h1>
        	<button onclick="number.forEach(myfunction)">结账</button>
        	<p>总消费：<span id="total"></span> 元</p>
        	<script>
        		var sum=0;
        		var number=[2,5,15,9,6,1,3];
        		
        		function myfunction(item){
        		    sum = sum + item;
        		    total.innerHTML = sum;
        		}
        	</script>
        </body> 
    </html>

![20200109103613864.png][]

需要注意的是，如果是空数组，那么就不会去执行回调函数

## $().each() ##

**1、$().each：一般在[dom（文档对象模型）][dom]处理上面用的较多。**

例如：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="jquery-3.4.1.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>小白网页</title>
    </head>
    
    	<body> 
        	<h1>小白学习</h1>
        	<input type="checkbox" name="subject" value="语文"/>语文
        	<input type="checkbox" name="subject" value="数学" checked="checked"/>数学
        	<input type="checkbox" name="subject" value="英语"/>英语<br>
        	<script>
        	$(function(){
        	    $("input[name='subject']").each(function(index,val){
        		console.log(index+"---"+val.type+"---"+val.name+"---"+val.value);
        	    });
        	});
        	
        	</script>
        </body>
    </html>

![20200109143810180.png][]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="jquery-3.4.1.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>小白网页</title>
    </head>
    
    	<body> 
        	<h1>小白学习</h1>
        	<input type="hidden" name="name" value="小白1"/>
        	<input type="hidden" name="name" value="小白2"/>
        	<input type="hidden" name="name" value="小白3"/>
        	<script>
        	$(function(){
        	    $("input:hidden").each(function(index,val){
        	        console.log(index+"---"+val.type+"---"+val.name+"---"+val.value);
        	    });
        	});
        	
        	</script>
        </body>
    </html>

![20200109145954204.png][]

### $.each() ###

**$.each() 可遍历数组，也可用来处理json对象。**

1、遍历一维数组

![20200109151703843.png][]

2、遍历二维数组

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="jquery-3.4.1.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>小白网页</title>
    </head>
    
    	<body> 
        	<h1>小白学习</h1>
        	<script>
        	$(function(){
        	    var arrayTest = [[1,2,3],[4,5,6],[7,8,9]];
        	    $.each(arrayTest,function(index,item){ //n代表当前循环的次数,item为当前循环的对象
        		console.log(item[index]);//1;5;9
        		console.log(arrayTest[index]);//1,2,3 / 4,5,6 / 7,8,9
        		console.log(item);//1,2,3 / 4,5,6 / 7,8,9
        		$.each(item,function(){ //将第一次循环的对象再次循环,就实现了二维数据的遍历,如果有2以上的数组,则同理循环多次
        		    console.log(this);//1;2;3; 4;5;6; 7;8;9 this代表当前元素
        	        });
        	    });
        	});
    
        	</script>
        </body>
    </html>

3、处理json对象

![20200109154939288.png][]

4、处理二维数组中的 json对象

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="jquery-3.4.1.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>小白网页</title>
    </head>
    
    	<body> 
        	<h1>小白学习</h1>
        	<script>
        	$(function(){
        	    var arr = [{ name:'小白', age:'16' },{ name:'小黑', age:'17' },{ name:'小兰', age:'18' }];
        	    $.each(arr,function(index,json){
        	        console.log(json.name);
        	        console.log(json["name"]);
        	        $.each(json,function(key,value){ //n代表当前循环的次数,item为当前循环的对象
        	            console.log(key+'-----'+value);
        	        });
        	    });
        	});
        	
        	</script>
        </body>
    </html>

![20200109161330408.png][]

5、处理 dom元素

这个跟 $().each() 是差不多的，就不演示了。

## 总结 ##

这几个看起来好像区别不大，但是用法有不同之处，应用场景也有区别，所以还是要多去实践才能积累经验，更好的运用。

[20200109102242566.png]: https://img-blog.csdnimg.cn/20200109102242566.png
[20200109102630344.png]: https://img-blog.csdnimg.cn/20200109102630344.png
[20200109103613864.png]: https://img-blog.csdnimg.cn/20200109103613864.png
[dom]: https://blog.csdn.net/Alone_in_/article/details/103954707
[20200109143810180.png]: https://img-blog.csdnimg.cn/20200109143810180.png
[20200109145954204.png]: https://img-blog.csdnimg.cn/20200109145954204.png
[20200109151703843.png]: https://img-blog.csdnimg.cn/20200109151703843.png
[20200109154939288.png]: https://img-blog.csdnimg.cn/20200109154939288.png
[20200109161330408.png]: https://img-blog.csdnimg.cn/20200109161330408.png