Javascript jQuery映射与每个

在jQuery中，

映射

和

每个

函数似乎都做同样的事情。两者之间有什么实际区别吗？什么时候您会选择使用一个而不是另一个？

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

在遍历选择器项时，最好使用Jquery.each。映射功能不使用选择器就是明证

$(selector).each(...)

$.map(arr....)

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

该方法是一个不可变的迭代器，其中as方法可以用作迭代器，但实际上是用来操作提供的数组并返回一个新数组

另一个需要注意的重要事项是，

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]

还可以使用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

）。具有讽刺意味的是，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:回调函数的参数是反向的。

's、's和's的回调函数首先获取索引，然后获取元素

function (index, element) 

的回调具有相同的参数，但相反

function (element, index)

2:，并对该

执行一些特殊操作

each（）

调用函数的方式是

this

指向当前元素。在大多数情况下，回调函数中甚至不需要这两个参数

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

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

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

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

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

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

对于

，此

变量引用全局窗口对象

3:

map（）

对回调的返回值进行特殊处理

map（）

调用每个元素上的函数，并将结果存储在一个新数组中，然后返回该数组。通常只需要使用回调函数中的第一个参数

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

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

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

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

错误，map不是为了更改提供的数组，而是基于输入数组和映射函数返回一个新数组。@Seb，请阅读我对each函数第二段jQuery的链接。每个函数与$（）.each（）.allow map（）在使用map和each时展平返回的数组。这两个系统的性能优势是什么？@ DaveVandenEynde，如果你想在循环的中间使用<代码>返回false；代码>每个函数的名称。。。这不是第一次，也不是最后一次，我会被一个人问到关于Map的问题绊倒，每个人都有一个选择器版本和一个util版本。$。map和$。每个vs$（“”）。map和$（“”）。每个。另请参见：

函数shout（）{alert（this+！'）}result=$。每个（['lions'，tigers'，bears'，shout）

产生错误的结果它与您的答案相矛盾@赫曼特刚刚测试了镀铬小提琴，它似乎工作得很好。有三个警告对话框（'lions！'、'tigers！'、'bears！'），最后是

result==['lions'、'tigers'、'bears']

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