Mapa jQuery vs.

No jQuery, as funções mape eachparecem fazer a mesma coisa. Existem diferenças práticas entre os dois? Quando você escolheria usar um em vez do outro?

O eachmétodo deve ser um iterador imutável, onde, como o mapmétodo pode ser usado como um iterador, é realmente destinado a manipular a matriz fornecida e retornar uma nova matriz.

Outro aspecto importante a ser observado é que a eachfunção retorna a matriz original enquanto a mapfunção retorna uma nova matriz. Se você usar em excesso o valor de retorno da função de mapa, poderá potencialmente desperdiçar muita memória.

Por exemplo:

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]

Você também pode usar a função de mapa para remover um item de uma matriz. Por exemplo:

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]

Você também notará que o thisnão está mapeado na mapfunção. Você precisará fornecer o primeiro parâmetro no retorno de chamada (por exemplo, usamos iacima). Ironicamente, os argumentos de retorno de chamada usados ​​em cada método são o inverso dos argumentos de retorno de chamada na função de mapa, portanto, tenha cuidado.

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

1: Os argumentos para as funções de retorno de chamada são revertidos.

.each()A função de retorno de chamada 's, $.each()' e .map()s leva primeiro o índice e, em seguida, o elemento

function (index, element) 

$.map()O retorno de chamada da empresa tem os mesmos argumentos, mas invertido

function (element, index)

2: .each(),, $.each()e .map()faça algo especial comthis

each()chama a função de maneira que thisaponte para o elemento atual. Na maioria dos casos, você nem precisa dos dois argumentos na função de retorno de chamada.

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

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

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

Para $.map()a thisvariável refere-se ao objeto de janela global.

3: map()faz algo especial com o valor de retorno do retorno de chamada

map()chama a função em cada elemento e armazena o resultado em uma nova matriz, que ele retorna. Geralmente, você só precisa usar o primeiro argumento na função de retorno de chamada.

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

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

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

A eachfunção itera sobre uma matriz, chamando a função fornecida uma vez por elemento e configurando thispara o elemento ativo. Este:

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

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

irá alertar 5..então 4..então 3..então 2..então1..

O mapa, por outro lado, pega uma matriz e retorna uma nova matriz com cada elemento alterado pela função. Este:

function squared() {
    return this * this;
}

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

resultaria em s sendo [25, 16, 9, 4, 1].

eu entendi com isso :

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] 

portanto, a função " each " retorna a matriz original, enquanto a função " map " retorna uma nova matriz

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

O Jquery.map faz mais sentido quando você está trabalhando em matrizes, pois executa muito bem com matrizes.

O Jquery.each é melhor usado ao iterar pelos itens do seletor. O que é evidenciado no fato de que a função de mapa não usa um seletor.

$(selector).each(...)

$.map(arr....)

como você pode ver, o mapa não se destina a ser usado com seletores.