jQuery 地图与每个地图

IT技术 javascript jquery
2021-01-29 22:20:21

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

6个回答

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) {});
map() 也将返回的数组展平
2021-03-13 22:20:21
何时使用 map 和 each。两者的性能优势是什么?
2021-03-21 22:20:21
错误, map 并不是要更改提供的数组,而是要根据输入数组和映射函数返回一个数组。
2021-04-03 22:20:21
@Seb,请阅读我指向每个函数的链接,第二段 jQuery.each 函数与 $().each() 不同。
2021-04-04 22:20:21
@DaveVandenEynde 如果你想使用 return false;
2021-04-08 22:20:21

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!']
@Hemant 刚刚在 Chrome 中测试了小提琴,它似乎工作正常。有三个警告对话框(“狮子!”、“老虎!”、“熊!”),最后result === ['lions', 'tigers', 'bears']
2021-03-13 22:20:21
function shout() { alert(this + '!') } result = $.each(['lions', 'tigers', 'bears'], shout)产生错误的结果它与你的答案相矛盾!!jsfiddle.net/9zy2pLev
2021-04-05 22:20:21

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 不打算与选择器一起使用。

不幸的是,每个函数都被命名了......这不是第一次,也不是最后一次我会被某人问到的
2021-03-27 22:20:21
map 并且每个都有一个选择器版本和一个 util-version。$.map 和 $.each 对比 $("").map 和 $("").each。
2021-04-06 22:20:21