jQuery的each与map的区别
2017-04-29 14:38
381 查看
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,则有可能造成内存浪费。
测试例子:
总结:当遍历数组的时候,each因为没有返回值,所以用不用return都不会改变其值,map因为是创建一个新的数组,所以对原来的数组也不会造成影响。
当遍历对象的时候,each遍历时候如果改动了参数值(不管return有木有加),原来的对象即被改变了,而map遍历的时候改动了参数值(必须加return,否则返回[]),遍历创建的新的对象和原来的对象均被改变了。
语法分析:为包装集中的每一个元素调用回调函数,并将返回值收集到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,则有可能造成内存浪费。
测试例子:
总结:当遍历数组的时候,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'} }; $. b62b 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
相关文章推荐
- jquery中map函数与each函数的区别
- jquery中map函数与each函数的区别实例介绍
- 原生JS forEach()和map()遍历的区别以及兼容写法,jQuery $.each()和$.map()遍历
- Jquery 中map和each的区别
- jquery中map函数与each函数的区别实例介绍
- jQuery的each与map的区别
- jQuery中的 each() 与 map() 的区别
- jQuery中each跟map的区别
- jquery $.each()遍历array,map等集合
- jQuery数组($.each,$.grep,$.map,$.merge,$.inArray,$.unique,$.makeArray)处理函数详解
- jquery的$().each,$.each的区别
- jquery第九期:map,has,each用法
- jquery的$().each,$.each的区别
- jquery的$().each,$.each的区别
- jquery的$.each() 和$("div").each() 区别
- jquery的$().each,$.each的区别
- JQuery中隐式迭代和each的区别(通过反选功能解析)
- jquery的$().each和$.each的区别
- jquery的each方法遍历controller返回的json、map
- jquery的$().each,$.each的区别--下