jQuery map vs. each

Jquery。Map在处理数组时更有意义，因为它在处理数组时表现得非常好。

Jquery。Each最好在遍历选择器项时使用。map函数不使用选择器就证明了这一点。

$(selector).each(...)


$.map(arr....)

如您所见，map并不打算与选择器一起使用。

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]

还可以使用map函数从数组中删除项。例如:

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)。具有讽刺意味的是，each方法中使用的回调参数与map函数中的回调参数相反，因此要小心。

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

each函数遍历数组，对每个元素调用一次所提供的函数，并将this设置为活动元素。这样的:

function countdown() {
alert(this + "..");
}


$([5, 4, 3, 2, 1]).each(countdown);

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

另一方面，Map接受一个数组，并返回一个新数组，其中每个元素都被函数更改。这样的:

function squared() {
return this * this;
}


var s = $([5, 4, 3, 2, 1]).map(squared);

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

1:回调函数的参数颠倒。

.each()’s， $.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!']

我是这样理解的:

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]

因此，"each"函数返回原始数组，而"map"函数返回一个新数组

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