jQuery map和each的区别

Question

jQuery map和each的区别

javascriptjquery

241

在jQuery中，map和each函数看起来做的事情是一样的。它们之间是否存在实际差异？在何时使用其中一个而不是另一个？

- dthrasher

参见：https://dev59.com/BXA65IYBdhLWcg3w1SRC - ryenus

6个回答

94

1：回调函数的参数被颠倒了。

.each()、$.each() 和.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 变量指向全局的 window 对象。

3: map() 对回调函数的返回值进行特殊处理

map() 对每个元素调用该函数，并将结果存储在一个新数组中并返回它。通常情况下，您只需要使用回调函数的第一个参数。

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

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

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

- Patrick McElhaney

函数 shout() { alert(this + '!') } result = $.each(['狮子', '老虎', '熊'], shout) 会产生错误的结果，这与您的答案相矛盾！https://jsfiddle.net/9zy2pLev/ - Hemant

@Hemant 刚在 Chrome 中测试了这个小工具，看起来运行良好。有三个警告对话框（“狮子！”，“老虎！”，“熊！”），最后 result === ['lions', 'tigers', 'bears']。 - Patrick McElhaney

22

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]。

- Magnar

18

我是通过这种方式理解它的:

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”函数返回一个新数组。

- Till

1

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

- Aamir Shaikh

0

Jquery.map在处理数组时表现非常出色，因此在处理数组时更为合理。

Jquery.each最好用于迭代选择器项。这可以从map函数不使用选择器中看出。

$(selector).each(...)

$.map(arr....)

正如您所看到的，map 不适用于选择器。

- Jeremy B.

2

不幸命名的 each 函数... 这不是我第一次被绊倒，也不会是最后一次，因为有人问到时我总是会弄混。 - Jeremy B.

8

map和each都有一个选择器版本和一个工具版本。$.map和$.each与$("").map和$("").each不同。 - Magnar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bendewey · Accepted Answer

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]

你还会注意到在map函数中没有映射this。你将不得不在回调中提供第一个参数（例如，我们以上使用了i）。具有讽刺意味的是，在each方法中使用的回调参数与map函数中的回调参数相反，所以要小心。

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