s和jQuery的map方法遍历区别

水深无声 2023-10-05 14:43 28阅读 0赞

###### js和jQuery的map方法遍历区别 ######

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>map方法的区别</title>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script>
    			var arr=[1,2,3,4,5];
    			var obj={1:2,3:4,5:6,7:8}
    			//利用原生js的map方法遍历
    			arr.map(function(value,index,array){
    				console.log(index,value,array);
    			});
    			obj.map(function(value,index,array){
    				console.log(index,value,array);
    			});
    			//利用jQuery的map方法遍历
    			$.map(arr,function(value,index){
    				console.log(index,value);
    			});
    			$.map(obj,function(value,index){
    				console.log(index,value);
    			});
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

###### js和jQuery的map（）区别： ######

*  ###### js： ######
    
     *  和原生的forEach方法一样，不能遍历伪数组
     *  第一个参数是value，第二个参数是index，第三个参数是array：当前被遍历的数组
 *  ###### jQuery： ######
    
     *  和jQuery中的each静态方法一样，map的静态方法可以遍历伪数组
     *  第一个参数是数组arr，第二个参数是function，function中的第一个参数是value，第二个参数是index

###### js和jQuery的map（）写法： ######

*  ###### js： ######
    
     *      arr.map(function(value,index,array){
            	console.log(index,value,array);
            });
 *  ###### jQuery: ######
    
     *      $.map(arr,function(value,index){
            	console.log(index,value);
            });

###### jQuery中的each方法和map方法的区别： ######

*  ###### each静态方法的默认的返回值就是遍历谁就返回谁 ######
 *  ###### map静态方法默认的返回值是一个空数组 ######
 *  ###### each静态方法不支持在回调函数中对遍历的数组进行处理 ######
 *  ###### map静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回 ######

var res=$.map(obj,function(value,index){
    	console.log(index,value);
    	return value+index;
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201129105840522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201129105653619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201129105636237.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA==,size_16,color_FFFFFF,t_70