在 jQuery 中,map
和each
函数似乎做同样的事情。两者之间有什么实际区别吗?你什么时候会选择使用一个而不是另一个?
jQuery 地图与每个地图
该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) {});
1:回调函数的参数颠倒了。
.each()
's, $.each()
's, and .map()
's 回调函数先取索引,再取元素
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!']
该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]
。
我是这样理解的:
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 ”函数返回一个新数组
当您处理数组时,Jquery.map 更有意义,因为它对数组执行得非常好。
在遍历选择器项时最好使用 Jquery.each。这证明 map 函数不使用选择器。
$(selector).each(...)
$.map(arr....)
如您所见, map 不打算与选择器一起使用。