jQuery map contra cada

Question

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

Answer 1

El método each está destinado a ser un iterador inmutable, mientras que el método map se puede utilizar como un iterador, pero está destinado a manipular la matriz suministrada y devolver una nueva matriz.

Otra cosa importante a tener en cuenta es que la función each devuelve la matriz original mientras que la función map 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 utilizar 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 habrá dado cuenta de que el this no se asigna en la función map. Deberá proporcionar el primer parámetro en la devolución de llamada (por ejemplo, usamos i arriba). Irónicamente, los argumentos de devolución de llamada utilizados en cada método son los reveses de los argumentos de devolución de llamada en la función de mapa, así que ten cuidado.

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

Answer 2

Jquery.map tiene más sentido cuando se trabaja en arreglos, ya que funciona muy bien con las matrices.

Jquery.each se utiliza mejor al iterar a través de elementos del selector. Lo cual se evidencia porque la función de mapa no usa un selector.

$(selector).each(...) 

$.map(arr....) 

como puede ver, el mapa no está destinado para ser utilizado con selectores.

Answer 3

Los each itera función sobre una matriz, llamando a la función suministrado una vez por elemento, y el establecimiento de this para el elemento activo. Este:

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

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

le alertará 5.. continuación 4.. continuación 3.. continuación 2.. continuación 1..

mapa por el contrario toma una matriz y devuelve una nueva matriz con cada elemento cambiado por la función. Esto:

function squared() { 
    return this * this; 
} 

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

daría como resultado s siendo [25, 16, 9, 4, 1].

Answer 4

1: Los argumentos para las funciones de devolución de llamada están invertidos.

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

function (index, element) 

$.map()' de devolución de llamada s tiene los mismos argumentos, pero a la inversa

function (element, index) 

2: .each(), $.each(), y .map() hacen algo especial con this

each() llama a la función de tal manera que this apunta 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 variable this se refiere al objeto de ventana global.

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

map() llama a la función de cada elemento, y almacena el resultado en una nueva matriz, lo que vuelve. 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!'] 

Answer 5

i entiende por este:

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] 

así, "cada" función devuelve la matriz original, mientras que "mapa" función devuelve una nueva matriz

Answer 6

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