Question

como crear un nuevo arreglo con un map java script

Answer 1

Respuesta:

Así como mencione en mi artículo anterior, Javascript tiene funciones extraordinarias que hacen cosas asombrosas con pocas líneas de código. La función map(), es una de ellas.

Vamos a dar un repaso a una serie de ejemplos que nos permitirán conocer un poco mas a fondo esta función.

Para no perder la costumbre comenzaré con la definición de la documentación oficial, la cual expone lo siguiente:

El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.

Sin duda, creo que es un concepto menos complicado que el de la función reduce(), sin embargo a primera vista no queda del todo claro, si no vemos un ejemplo.

1) imagen

En el código de la imagen, tenemos un array con 3 elementos. En esta ocasión lo que necesitamos hacer es elevar a la segunda potencia cada elemento del array. Al invocar a la función map(), el proceso se podría explicar de la siguiente manera:

• Cada elemento (número) dentro del array es pasado como argumento por una función dentro del método map().

• Una vez dentro de la función interna, es recibida por el método pow() de la librería Math de Javascript , la cual puede ser invocada de manera global. Math.pow() representa la función que queremos aplicar a cada elemento del array.

• Math.pow() retorna un nuevo valor que es el resultado de elevar el número a la segunda potencia, en el caso del primer elemento retornaría 2 elevado a la 2 = 4. Cada valor se va acomodando en un índice que al final representara el nuevo array.

Esto es un proceso que sin duda se puede replicar con un bucle, no obstante, usando la función map( ) sería indudablemente mas limpio y sencillo de hacer.

En el caso de ReactJS, uno de los usos más comunes de esta función es para dar formato (HTML, CSS) a los datos que quieren mostrarse en pantalla. Veamos un caso simple de una barra de navegación:

2) imagen

Supongamos que recibimos las opciones que necesitamos agregar a una barra de navegación de manera dinámica. Antes de ser entregados al front-end, debo darle algo de formato para que pueda lucir bien. En este ejemplo muy simple, el proceso consiste en pasar cada uno de los elementos del array y envolverlos con las etiquetas <li></li> de html. Para lograr esto, me ayudo de los Templates Literals (Plantillas de cadena de texto) que nos permiten insertar variables y expresiones dentro de una cadena de texto (nótese el uso de backtips ` `, en lugar de comillas simples ‘ ’ y para insertar mi variable uso la notación ${miVariable}).

El resultado en consola sería el siguiente:

3) imagen

A partir de aquí, mis elementos ya estaría listos para ser insertados dentro de las etiquetas <ul></ul> para mostrar mi barra de navegación.

En nuestro último ejemplo, vamos a combinar la función map(), con la función reduce(), para lograr calcular el promedio de calificaciones de los alumnos de una salon de clases. La calificaciones se encontraran en un array multidimensional. El objetivo es retornar un array con el promedio de cada alumno. Para lograr esto vamos a chequear el siguiente código:

4) imagen