jQuery地图与每个

在jQuery中, mapeach函数似乎做同样的事情。 两者有没有实际的区别? 你什么时候select使用一个而不是另一个?

each方法都是一个不可变的迭代器,其中map方法可以作为一个迭代器,但实际上是为了操作提供的数组并返回一个新的数组。

另外需要注意的是each函数都返回原始数组,而map函数返回一个新的数组。 如果过度使用地图函数的返回值,则可能会浪费大量内存。

例如:

 var items = [1,2,3,4]; $.each(items, function() { alert('this is ' + this); }); var newItems = $.map(items, function(i) { return i + 1; }); // newItems is [2,3,4,5] 

您还可以使用地图function从数组中删除项目。 例如:

 var items = [0,1,2,3,4,5,6,7,8,9]; var itemsLessThanEqualFive = $.map(items, function(i) { // removes all items > 5 if (i > 5) return null; return i; }); // itemsLessThanEqualFive = [0,1,2,3,4,5] 

你还会注意到this不是在map函数中映射的。 您将不得不在callback中提供第一个参数(例如,我们在上面使用了i )。 具有讽刺意味的是,每个方法中使用的callback参数与map函数中的callback参数相反,所以要小心。

 map(arr, function(elem, index) {}); // versus each(arr, function(index, elem) {}); 

1:callback函数的参数是相反的。

.each()$.each().map()的callback函数首先获取索引,然后元素

 function (index, element) 

$.map()的callback函数具有相同的参数,但相反

 function (element, index) 

2: .each()$.each().map()对此做了一些特殊的处理

each()以这种方式调用函数,使其指向当前元素。 在大多数情况下,你甚至不需要callback函数中的两个参数。

 function shout() { alert(this + '!') } result = $.each(['lions', 'tigers', 'bears'], shout) // result == ['lions', 'tigers', 'bears'] 

对于$.map()thisvariables引用全局窗口对象。

3: map()对callback的返回值做了一些特殊的处理

map()调用每个元素上的函数,并将结果存储在一个新的数组中,并返回。 您通常只需要在callback函数中使用第一个参数。

 function shout(el) { return el + '!' } result = $.map(['lions', 'tigers', 'bears'], shout) // result == ['lions!', 'tigers!', 'bears!'] 

each函数迭代一个数组,每个元素调用一次提供的函数,并将其设置为活动元素。 这个:

 function countdown() { alert(this + ".."); } $([5, 4, 3, 2, 1]).each(countdown); 

会提醒5..然后4..然后3..然后2..然后1..

另一方面,映射需要一个数组,并返回一个新的数组,每个元素都被该函数改变。 这个:

 function squared() { return this * this; } var s = $([5, 4, 3, 2, 1]).map(squared); 

会导致[25, 16, 9, 4, 1]

我明白了这一点

 function fun1() { return this + 1; } function fun2(el) { return el + 1; } var item = [5,4,3,2,1]; var newitem1 = $.each(item, fun1); var newitem2 = $.map(item, fun2); console.log(newitem1); // [5, 4, 3, 2, 1] console.log(newitem2); // [6, 5, 4, 3, 2] 

所以,“ 每个 ”函数返回原始数组,而“ 地图 ”函数返回一个新的数组

 var intArray = [1, 2, 3, 4, 5]; //lets use each function $.each(intArray, function(index, element) { if (element === 3) { return false; } console.log(element); // prints only 1,2. Breaks the loop as soon as it encountered number 3 }); //lets use map function $.map(intArray, function(element, index) { if (element === 3) { return false; } console.log(element); // prints only 1,2,4,5. skip the number 3. }); 

当你在数组上工作的时候,Jquery.map更有意义,因为它在数组中performance得非常好。

迭代select器项目时,最好使用Jquery.each。 这certificate了map函数不使用select器。

 $(selector).each(...) $.map(arr....) 

正如你所看到的,map并不是用来和select器一起使用的。