首页 > Javascript > jquery中的each和map详解,别再傻傻分不清

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

随意转载^^但请附上教程地址。

标签:jquery each map

相关文章

评论已关闭