jQuery地图与各个

Question

在jQuery中，map和each函数似乎也做同样的事情。两者之间有什么实际差异？你什么时候选择使用一个而不是另一个？

Answer 1

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

另一个需要注意的重要事项是each函数返回原始数组，而map函数返回一个新数组。如果过度使用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] 

也可以使用映射函数从数组中删除项目。例如：

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函数映射。您必须在回调中提供第一个参数（例如，我们使用上面的i）。具有讽刺意味的是，每个方法中使用的回调参数都与map函数中的回调参数相反，所以要小心。

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

Answer 2

当你在数组上进行工作时，Jquery.map更有意义，因为它对数组表现很好。

Jquery.each在迭代选择器项目时最适用。这证明了map函数不使用选择器。

$(selector).each(...) 

$.map(arr....) 

正如你所看到的，map并不打算与选择器一起使用。

Answer 3

在阵列中的each函数迭代，调用提供的函数每一次元件，和设置this到有源元件。此：

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); 

将导致s为[25, 16, 9, 4, 1]。

Answer 4

1：回调函数的参数是相反的。

.each()的，$.each()'s和.map()的回调函数先取索引，然后将元件

function (index, element) 

$.map()的回调具有相同的参数，但颠倒

function (element, index) 

2：.each(),$.each()和.map()做一些特别的事this

each()以这样的方式调用函数，即this指向当前元素。在大多数情况下，你甚至不需要回调函数中的两个参数。

function shout() { alert(this + '!') } 

result = $.each(['lions', 'tigers', 'bears'], shout) 

// result == ['lions', 'tigers', 'bears'] 

对于$.map()的this变量指的是全球窗口对象。

3：map()做一些特别的东西有回调的返回值

map()呼吁每个元素的功能，并将结果保存在一个新的阵列，将其返回。您通常只需要在回调函数中使用第一个参数。

function shout(el) { return el + '!' } 

result = $.map(['lions', 'tigers', 'bears'], shout) 

// result == ['lions!', 'tigers!', 'bears!'] 

Answer 5

我理解它通过此：

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] 

所以，而 “地图” 函数返回一个新的数组

Answer 6

“ 每个” 功能返回原始阵列

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. 
});