jQuery的each与map的区别

客官°小女子只卖身不卖艺 2022-06-15 23:26 191阅读 0赞

1、$.map(array,function)

语法分析：为包装集中的每一个元素调用回调函数，并将返回值收集到jQuery对象的实例中，在回调函数中，this指向每次迭代中的当前DOM元素。

2、$.each(array,function)

语法分析：对数组array中的每一个元素，调用function函数处理，但没有返回值（因此不管在callback里面加不加return，效果都是一样的）。

$.each()函数可用于迭代任何集合，无论是名/值对象（JavaScript对象）或数组。

（1）遍历数组(有附件参数)

$.each(Array, function(p1, p2)\{

this;    //这里的this指向每次遍历中Array的当前元素

p1; p2;  //访问附加参数

\}, \['参数1', '参数2'\]);

（2）遍历对象(没有附加参数)

$.each(Object, function(name, value) \{

this;    //this指向当前属性的值

name;    //name表示Object当前属性的名称

value;   //value表示Object当前属性的值

\});

两者的区别：

map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。

each()返回的是原来的数组，并不会新创建一个数组。

map()方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。

![Image 1][]

测试例子：

总结：当遍历数组的时候，each因为没有返回值，所以用不用return都不会改变其值，map因为是创建一个新的数组，所以对原来的数组也不会造成影响。

当遍历对象的时候，each遍历时候如果改动了参数值（不管return有木有加），原来的对象即被改变了，而map遍历的时候改动了参数值（必须加return，否则返回\[\]），遍历创建的新的对象和原来的对象均被改变了。

var obj1 = [10,20];
    $.each(obj1,function(i,param){
        return param+1;
    });
    //[10, 20]
    //obj1:[10,20]
    
    var obj2 = [10,20];
    $.each(obj2,function(i,param){
        return [param+1];
    });
    //[10, 20]
    //obj2:[10,20]
    
    var obj3 = [10,20];
    $.each(obj3,function(i,param){
        return [[param+1]];
    });
    //[10, 20]
    //obj3:[10,20]
    
    var obj4 = [10,20];
    $.map(obj4,function(param){
        return param+1;
    });
    //[11, 21]
    //obj4:[10,20]
    
    var obj5 = [10,20];
    $.map(obj5,function(param){
        return [param+1];
    });
    //[11, 21]
    //obj5:[10,20]
    
    var obj6 = [10,20];
    $.map(obj6,function(param){
        return [[param+1]];
    });
    //[[11],[21]]
    //obj6:[10,20]
    
    var obj7 = {
        1:{
        id:'001'},
        2:{
        id:'002'}
    };
    $.each(obj7,function(i,param){
        return (param.id += 1);
    });
    //{1:{id:'0011'},2:{id:'0021'}};
    //obj7:{1:{id:'0011'},2:{id:'0021'}}
    
    var obj7 = {
        1:{
        id:'001'},
        2:{
        id:'002'}
    };
    $.each(obj7,function(i,param){
        (param.id += 1);
    });
    //{1:{id:'0011'},2:{id:'0021'}};
    //obj7:{1:{id:'0011'},2:{id:'0021'}}
    
    var obj8 = {
        1:{
        id:'001'},
        2:{
        id:'002'}
    };
    $.map(obj8,function(param){
        return param.id += 1;
    });
    //["0011", "0021"]
    //obj8:{1:{id:'0011'},2:{id:'0021'}}
    
    var obj8 = {
        1:{
        id:'001'},
        2:{
        id:'002'}
    };
    $.map(obj8,function(param){
        param.id += 1;
    });
    //[]
    //obj8的值：{1:{id:'0011'},2:{id:'0021'}}
    
    var obj9 = {
        1:{
        id:'001'},
        2:{
        id:'002'}
    };
    $.each(obj9,function(i,param){
        return [[param.id += 1]];
    });
    //{1:{id:'0011'},2:{id:'0021'}}
    //obj9:{1:{id:'0011'},2:{id:'0021'}}
    
    var obj10 = {
        1:{
        id:'001'},
        2:{
        id:'002'}
    };
    $.map(obj10,function(param){
        return [[param.id += 1]];
    });
    // [["0011"],["0021"]]
    //obj10的值: {1:{id:'0011'},2:{id:'0021'}}
    
    转载的链接：http://blog.csdn.net/liaozhongping/article/details/53502974

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery的each中的break与continue

jQuery的each中的break与continue 在jquery的each方法中直接使用break与continue会报错，我们可以采用下列变通的办法

一时失言乱红尘/ 2022年08月08日 11:51/ 0 赞/ 105 阅读

相关 jQuery 中的 each()

通过它，你可以遍历对象、数组的属性值并进行处理。使用说明 each函数根据参数的类型实现的效果不完全一致： 1、遍历对象(有附加参数) $.each(Object,

旧城等待，/ 2022年08月05日 12:25/ 0 赞/ 113 阅读

相关 jQuery的each与map的区别

1、$.map(array,function) 语法分析：为包装集中的每一个元素调用回调函数，并将返回值收集到jQuery对象的实例中，在回调函数中，this指向每次迭

客官°小女子只卖身不卖艺/ 2022年06月15日 23:26/ 0 赞/ 192 阅读

相关原生JS forEach()和map()遍历的区别以及兼容写法，jQuery $.each()和$.map()遍历

一、原生JS forEach()和map()遍历共同点： 1.都是循环遍历数组中的每一项。 2.forEach() 和 map() 里面每一

清疚/ 2022年06月08日 02:08/ 0 赞/ 163 阅读

相关原生JS forEach()和map()，jQuery$.each()和$.map()

一、原生JS forEach()和map() 共同点： 1.都是循环遍历数组中的每一项。 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数

淡淡的烟草味﹌/ 2022年05月15日 11:30/ 0 赞/ 208 阅读

相关 jQuery.each

each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等在jav

不念不忘少年蓝@/ 2021年12月03日 06:23/ 0 赞/ 228 阅读

相关 jquery的$().each,$.each的区别

在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。 $().e

灰太狼/ 2021年11月14日 14:08/ 0 赞/ 306 阅读

相关 forEach()与each()方法的区别

forEach() 为JavaScript(ES5)的方法，而 each() 方法是JQuery的方法，forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

素颜马尾好姑娘i/ 2021年10月24日 00:58/ 0 赞/ 282 阅读

相关 $('').each() 与 $.each() 的区别

请移步 [https://mrceel.cn/each-each/][https_mrceel.cn_each-each] [https_mrceel.cn_each-e

一时失言乱红尘/ 2021年09月15日 11:36/ 0 赞/ 277 阅读

相关 jquery的$().each,$.each的区别

最近一直在研究JS，今天看到遍历模块的时候，看到了这个函数： $(selector).each(function(index,element)) 但是想想，这个函数和之前项

以你之姓@/ 2021年09月14日 09:46/ 0 赞/ 327 阅读