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

jquery reduce

Question

Estoy tratando de comprender mejor la función jQuery.map .

En términos generales, .map toma una matriz y la "asigna" a otra serie de elementos.

ejemplo fácil:

$.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

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

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

Answer 2

Ejemplo:

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

Aquí el servidor devolverá la "respuesta" en formato JSON, utilizando $.parseJSON está convirtiendo el objeto JSON en una matriz de objetos JavaScript.

Al usar $.map para cada valor de objeto llamará a la function(item) para mostrar el valor del resultado: item.tagName, data: item.id

Answer 3

El mapa es una función de alto orden que le permite aplicar determinada 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 uso para obtener un selector válido de todos mis paneles jQuery UI, por ejemplo:

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

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

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

Y ese es un selector válido que se puede usar:

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

Answer 4

El mapeo tiene dos propósitos principales: agarrar propiedades de una matriz de elementos y convertir cada elemento en otra cosa.

Supongamos 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" }
];

El mapeo es una forma conveniente de agarrar una propiedad determinada de cada artículo. Por ejemplo, puede convertirlo en una matriz de ID de usuario:

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

Como otro ejemplo, digamos que tienes una colección de elementos:

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

Si desea almacenar el contenido de esos encabezados de tabla para su uso posterior, puede obtener una matriz de sus contenidos HTML:

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

Answer 5

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

Answer 6

Recientemente descubrí un excelente ejemplo de $.map en un entorno práctico.

Dada la pregunta de Cómo agregar opciones a un cuadro de selección dada esta matriz (u otra matriz):

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

esta respuesta de usa .map :

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

Answer 7

$.map se trata de convertir elementos en un conjunto.

En cuanto al DOM, a menudo lo uso para obtener rápidamente valores de mis elementos:

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

Lo anterior convierte los elementos <label> dentro de una lista de usuarios en solo el texto contenido en ellos. Entonces puedo hacer:

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