jquery中的each和map详解,别再傻傻分不清
使用jquery好些年了,经常使用each来遍历DOM节点,但是$(dom).each()和$.each()真的分清楚了吗?还有jquery中还有$(dom).map()和$.map()来搅和,这下子可真的分不清了。
首先要明白$(dom).和$.的区别
jquery赋予任何一个jQuery对象即$(dom)一个each方法和一个map方法,而$.each()和$.map()方法可以看做是jquery的一个方法函数,不依赖于任何dom元素。
对于dom元素自身的each()和map()方法,使用以下方式来操作DOM元素都是可以的,但是他们也有差别,例如:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <title>jquery中的each和map详解,别再傻傻分不清</title> </head> <body> <ul id="test1"> <li class="each">1</li> <li class="each">2</li> </ul> <ul id="test2"> <li class="map">1</li> <li class="map">2</li> </ul> <script src="jquery/jquery-1.11.1.min.js" type='text/javascript'></script> <script type="text/javascript"> $(".each").each(function(){ console.log(this); $(this).text(2*($(this).text())); }).css("color", "red"); $(".map").map(function(){ console.log(this); $(this).text(2*($(this).text())); }).css("color", "red"); </script> </body> </html>
运行上面的程序之后,在console.log行两者达到的效果相同,没有差异,this指向每次迭代中的当前DOM元素。
后面一句通过修改该DOM元素的内容,同样可以生效,也没有差异。然而,在外层的链式操作中使用$(".each").each().css("color", "red")使得文字变成红色,而$(".map").map().css("color", "red")文字却没有变成红色。
原因:使用each()将会返回原来的对象数组,与迭代器中的元素在内存中是指向同一个区域的;而map()将会返回一个新的数组,相当于在内存中复制一份返回,后面的css着色操作是作用于内存中新的区域而非之前的对象数组。
所以通常我们对DOM元素进行遍历时常常使用each(),完全没有必要再建立新的数组以至于浪费内存。
那么,map()究竟是用来做什么呢?且看如下例子:
test1 = $.each([52, 97], function(index, value) { return value*2; }); test2 = $.map([52, 97], function(value, index) { return value*2; }); console.log(test1); console.log(test2);
很明显,上面的理论依然成立,each()依然是返回旧的数组,map()将会返回新的数组,这时使用map()来处理数组时更合适。注意:$.each()和$.map()的第二个参数的索引与值之间的顺序!
虽然$.each()在返回值上不会更新,但是若此时不需要返回值建议还是使用$.each()来遍历,毕竟更省内存一些。
除了jquery之外,向underscore.js也提供了each和map方法,主要用于数据的处理而非dom元素处理。
$.each()与_.each()对应
$.map()与_.map()对应
他们有什么区别呢?请看下篇《underscore.js中的each和map方法与jquery进行比较》
文章网址:http://blog.zhengshuiguang.com/js/jquery-each-map.html
随意转载^^但请附上教程地址。
评论已关闭