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
随意转载^^但请附上教程地址。
评论已关闭