Mapa de jQuery vs. cada uno

En jQuery, las funciones mapy eachparecen hacer lo mismo. ¿Hay alguna diferencia práctica entre los dos? ¿Cuándo elegirías usar uno en lugar del otro?

El eachmétodo está destinado a ser un iterador inmutable, donde el mapmétodo puede usarse como un iterador, pero en realidad está destinado a manipular la matriz suministrada y devolver una nueva matriz.

Otra cosa importante a tener en cuenta es que la eachfunción devuelve la matriz original, mientras que la mapfunción devuelve una nueva matriz. Si usa en exceso el valor de retorno de la función de mapa, puede desperdiciar mucha memoria.

Por ejemplo:

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]

También puede usar la función de mapa para eliminar un elemento de una matriz. Por ejemplo:

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]

También notará que thisno está asignado en la mapfunción. Tendrá que proporcionar el primer parámetro en la devolución de llamada (p. Ej., Usamos ianteriormente). Irónicamente, los argumentos de devolución de llamada utilizados en cada método son el reverso de los argumentos de devolución de llamada en la función de mapa, así que tenga cuidado.

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

1: Los argumentos de las funciones de devolución de llamada se invierten.

.each()La función de devolución de llamada 's, $.each()' s y .map()'s toma primero el índice y luego el elemento

function (index, element) 

$.map()La devolución de llamada tiene los mismos argumentos, pero se invierte

function (element, index)

2: .each(), $.each()y .map()hacer algo especial conthis

each()llama a la función de tal manera que thisapunta al elemento actual. En la mayoría de los casos, ni siquiera necesita los dos argumentos en la función de devolución de llamada.

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

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

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

Para $.map()la thisvariable se refiere al objeto de ventana global.

3: map()hace algo especial con el valor de retorno de la devolución de llamada

map()llama a la función en cada elemento y almacena el resultado en una nueva matriz, que devuelve. Por lo general, solo necesita usar el primer argumento en la función de devolución de llamada.

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

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

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

La eachfunción itera sobre una matriz, llama a la función suministrada una vez por elemento y establece thisel elemento activo. Esta:

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

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

alertará a 5..continuación, 4..a continuación, 3..a continuación, 2..a continuación,1..

Map, por otro lado, toma una matriz y devuelve una nueva matriz con cada elemento modificado por la función. Esta:

function squared() {
    return this * this;
}

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

daría lugar a s ser [25, 16, 9, 4, 1].

Lo entendí por esto :

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] 

entonces, " cada " función devuelve la matriz original mientras que la función " mapa " devuelve una nueva 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.
});

Jquery.map tiene más sentido cuando está trabajando en matrices, ya que funciona muy bien con matrices.

Jquery.each se utiliza mejor cuando se itera por los elementos del selector. Lo cual se evidencia en que la función de mapa no utiliza un selector.

$(selector).each(...)

$.map(arr....)

Como puede ver, el mapa no está diseñado para usarse con selectores.