jQuery.map - ¿Usos prácticos para la función?

Question

Estoy tratando de obtener una mejor comprensión de la función jQuery.map.

Por lo tanto, en términos generales .map toma una matriz y la "asigna" a otra serie de elementos.

ejemplo sencillo:

$.map([0,1,2], function(n){ 
    return n+4; 
}); 

resultados en [4,5,6]

creo que entiendo lo que hace. Quiero saber por qué alguien lo necesita. ¿Cuál es el uso práctico de esta función? ¿Cómo estás usando esto en tu código?

Answer 1

$.map tiene que ver con la conversión de elementos en un conjunto.

En cuanto a la DOM, a menudo lo utilizan para arrancar rápidamente los valores de mis elementos:

var usernames = $('#user-list li label').map(function() { 
    return this.innerHTML; 
}) 

Lo anterior convierte los <label> elementos dentro de una lista de usuarios que sólo el texto contenido en el mismo. Entonces puedo hacer:

alert('The following users are still logged in: ' + usernames.join(', ')); 

Answer 2

Aquí hay una cosa para la que podrías usarlo.

$.map(["item1","item2","item3"], function(n){ 
    var li = document.createElement ('li'); 
    li.innerHTML = n; 
    ul.appendChild (li); 
    return li; 
}); 

Answer 3

Mapping tiene dos propósitos principales: el acaparamiento de propiedades de una serie de artículos, y la conversión de cada elemento en otra cosa.

Suponga que tiene una matriz de objetos que representan a los usuarios:

var users = [ 
    { id: 1, name: "RedWolves" }, 
    { id: 2, name: "Ron DeVera" }, 
    { id: 3, name: "Jon Skeet" } 
]; 

Mapping es una forma cómoda de agarrar una cierta propiedad de cada elemento. Por ejemplo, se puede convertir en una matriz de ID de usuario:

var userIds = $.map(users, function(u) { return u.id; }); 

Como otro ejemplo, supongamos que tiene una colección de elementos:

var ths = $('table tr th'); 

Si desea almacenar el contenido de los mesa cabeceras para su uso posterior, se puede obtener una gran variedad de su contenido HTML:

var contents = $.map(ths, function(th) { return th.html(); }); 

Answer 4

conversión de valores de código para codificar el texto habría un uso posible. Por ejemplo, cuando tiene una lista de selección y cada valor indexado tiene un texto de código correspondiente.

Answer 5

Mapa es un high-order function, que le permite aplicar cierta función a una secuencia dada, generando una nueva secuencia resultante que contiene los valores de cada elemento original con el valor de la función aplicada.

A menudo lo utilizan para obtener un selector válida de todos mis paneles jQuery UI por ejemplo:

var myPanels = $('a').map(function() { 
    return this.hash || null; 
}).get().join(','); 

que devolverá una cadena separada por comas de los paneles disponibles en la página actual como esto:

"#home,#publish,#request,#contact" 

Y eso es un selector válida que se puede utilizar:

$(myPanels);// do something with all the panels 

Answer 6

Ejemplo:

$.map($.parseJSON(response), function(item) {  
    return { value: item.tagName, data: item.id }; 
}) 

Aquí servidor será devolver la "respuesta" en formato JSON, utilizando $.parseJSON se está convirtiendo objeto JSON a la matriz objeto de JavaScript.

Mediante el uso de $.map para cada valor del objeto que va a llamar a la function(item) para mostrar el valor del resultado: item.tagName, data: item.id

Answer 7

Recientemente he descubierto un excelente ejemplo de .map en un entorno práctico.

Teniendo en cuenta la cuestión de cómo anexar opciones a una caja de selección dada esta matriz (u otra matriz):

selectValues = { "1": "test 1", "2": "test 2" }; 

this StackOverflow answer utiliza .map:

$("mySelect").append(
    $.map(selectValues, function(v,k) { 
    return $("<option>").val(k).text(v); 
    }) 
);