js-each、foreach、map-区别-示例详解

最新推荐文章于 2024-08-17 11:35:56 发布

startyangu

最新推荐文章于 2024-08-17 11:35:56 发布

阅读量5.8k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/startyangu/article/details/82926577

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

两种循环的区别：

each、foreach 循环数组或者对象，在循环中处理数据

map 是循环数组然后返回一个新的数据，在循环中处理数据并返回一个新的数据，看到map应该可以想到映射，其实map的也就是将一个数组映射为另外一个数组

----------------------------------------------------------------------------------------------------------------------------------------------------------------

each、foreach 详解

each为jquery的循环方法，foreach为js的循环方法，

两者最大的区别是

$.each（arr，function（index,item））参数为数组和回调函数，回调函数参数为元素在数组中得下标、每个元素

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>	
<style>
	div { color:blue; }
	p { color:green; margin:0; }
	span { color:red; }
</style>
  <script src="js/jquery-3.3.1.js"></script>
</head>
<body>

<div></div>
<p></p>
<span></span>
<script>
$(function () { 
	var arr = [ "a", "b", "c", "d", "e" ];
    //each循环
    $.each(arr,function(index,item){
        $("div").text(arr.join(","));
    });

    //each循环-箭头函数
    $.each(arr,(index,item) => {
        $("p").text(arr.join(","));
    });
     
	 
})
</script>
 
</body>
</html>

arr.foreach（function(item,index)）参数为回调函数，回调好吃的参数为，每个元素、元素在数组中的下标

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>	
<style>
	div { color:blue; }
	p { color:green; margin:0; }
	span { color:red; }
</style>
  <script src="js/jquery-3.3.1.js"></script>
</head>
<body>

<div></div>
<p></p>
<span></span>
<script>
$(function () { 
	var arr = [ "a", "b", "c", "d", "e" ];
    //foreach循环
    arr.forEach(function(item,index){
        $("div").text(arr.join(","));
    });
    //foreach循环-箭头函数
    arr.forEach((item,index) =>{
        $("p").text(arr.join(","));
     });
     
	 
})
</script>
 
</body>
</html>

结果

备注：jquery的 each 循环可以对对象做循环，示例如下

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>	
<style>
	div { color:blue; }
	p { color:green; margin:0; }
	span { color:red; }
</style>
  <script src="js/jquery-3.3.1.js"></script>
</head>
<body>

<div></div>
<p></p>
<span></span>
<script>
$(function () { 
	var obj = {"姓名":"张三","年龄":"25"}
    $.each(obj,function(key,val){
        $("div").append(key+":"+val+"</br>");
    });
	 
})
</script>
 
</body>
</html>

运行结果

Jquery-Map

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>	
<style>
	div { color:blue; }
	p { color:green; margin:0; }
	span { color:red; }
</style>
  <script src="js/jquery-3.3.1.js"></script>
</head>
<body>

<div></div>
<p></p>
<span></span>
<script>
$(function () { 
	var arr = [ "a", "b", "c", "d", "e" ];
    //jquery-map-获得新的数组
    arr = $.map(arr,function(item,index){
        return item+index;
    });
    $("div").text(arr.join(","));

    //jquery-mao-箭头函数-获得新的数组
    arr = $.map(arr,(item,index) => {
        return item +index+index+index+item;
    });
    $("p").text(arr.join(","));
	 
})
</script>
 
</body>
</html>

运行结果

Js-Map

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>	
<style>
	div { color:blue; }
	p { color:green; margin:0; }
	span { color:red; }
</style>
  <script src="js/jquery-3.3.1.js"></script>
</head>
<body>

<div></div>
<p></p>
<span></span>
<script>
$(function () { 
	var arr = [ "a", "b", "c", "d", "e" ];
    //js-Map-获取新的数组
    arr = arr.map(function(item,index){
        return item+index;
    });
    $("div").text(arr.join(","));

    //Js-Map-箭头函数-获取新的数组
    arr = arr.map((item,index) => {
        return item+index+index+index+item;
    });
    $("p").text(arr.join(","));
	 
})
</script>
 
</body>
</html>

运行结果