Javascript y sus Arrays

Cuando empezamos a trabajar o estudiar, es muy común encontrarnos con tener que trabajar con lenguajes con los que no hemos tenido una formación completa o que hemos aprendido mediante un curso. Por eso, hoy te traigo 7 métodos muy prácticos para alejarte un poco de los fors y foreach.

Realizar una acción sobre todos los 

elementos de una lista

Este es el método más común, y si has trabajado con react, angular o algún otro framework frontend es imposible que no sepas cómo funciona, pero por si eres de esos despistados, aquí va tu explicación.

La función map nos permite iterar sobre todos los elementos de un array y modificar el valor de los elementos de este y realizar los cambios que necesitemos, vamos a verlo con un ejemplo que seguro que te queda más claro.

1let numeros = [1,2,3,4,5]
2
3let numerosNuevos = numeros.map(n=> n*2);
4console.log(numeros);
5console.log(numerosNuevos);

1let numeros = [1,2,3,4,5]
2let numerosNuevos = [];
3
4for(i=0; i< numeros.length; i++){
5    numerosNuevos.push(numeros[i] * 2)
6}
7console.log(numeros)
8console.log(numerosNuevos)

¿Qué estamos haciendo aquí?, en primer lugar he definido un array con números del 1 al 5, nuestro objetivo es multiplicar por dos cada uno de estos números, para ello vamos ha usar la función map.

La forma de trabajar de estas funciones aunque a primera vista parezca rara, una vez te acostumbras es bastante sencilla. Lo que nos encontramos dentro de los parámetros de la función es algo que se llama callback y será el código que se ejecute por cada una de las vueltas que haría nuestro for.

Te puedes fijar que la petición está formada por n=> n*2 la letra n (aunque la puedes llamar cómo quieras) será el objeto que vamos a estar tratando en cada iteración, de una forma bastante parecida a un for each, y el return se encuentra implícito cuando solo tenemos una línea de código.

Si necesitáramos realizar un proceso más complejo podríamos hacerlo de esta manera

1let numeros = [1,2,3,4,5]
2
3let numerosNuevos = numeros.map(n=> {
4   resultado = n*2;
5   return resultado;
6});
7console.log(numeros);
8console.log(numerosNuevos);

Para poder ver el potencial que tienen los siguientes métodos vamos a definir una lista de prueba con algo más de contenido que unos simples números

1let objetos = [
2    {
3        "tipo":"coche",
4        "color":"blanco",
5        "precio":100,
6        "disponible":false
7    },
8    {
9        "tipo":"coche",
10        "color":"negro",
11        "precio":200,
12        "disponible":true
13    },
14    {
15        "tipo":"moto",
16        "color":"rojo",
17        "precio":300,
18        "disponible":true
19    },
20    {
21        "tipo":"moto",
22        "color":"azul",
23        "precio":400,
24        "disponible":false
25    },
26    {
27        "tipo":"moto",
28        "color":"amarillo",
29        "precio":500,
30        "disponible":false
31    }
32]

Filtrado de elementos de una lista

Filtrar elementos es algo con lo que nos encontramos de forma bastante habitual, pero es una tarea que podemos reducir a una simple línea de código veamos cómo

1let nuevaLista = objetos.filter(n=> n.disponible == true)
2
3console.log(nuevaLista)

1let nuevaLista = []
2
3for(let i=0; i< objetos.length; i++){
4    if(objetos[i].disponible == true) nuevaLista.push(objetos[i])
5}
6
7console.log(objetos)

En realidad lo que está haciendo la función filter es almacenar los elementos que devuelven un true al ejecutar la función, de esta forma si necesitamos realizar comparaciones más complejas no tendremos ningún tipo de problema en recuperar los datos.

Encontrar elementos según un criterio

¿Tienes una lista de objetos y necesitas encontrar un elemento que coincida con tus criterios? No te preocupes que también eso esta pensado, podemos utilizar el método find(), en este caso, el método nos devolverá el primer elemento de la lista que esté disponible

1let elemFind = objetos.find(n=> n.disponible ==true);
2console.log(elemFind);

1let elemFind = {}
2
3for(let i=0; i< objetos.length; i++)
4{
5    if(objetos[i].disponible == true){
6        elemFind = objetos[i];
7        break;
8    } 
9}

Por otro lado, igual no nos interesa recuperar el objeto en si mismo y lo que queremos es saber la posición en la que se encuentra dentro de la lista, para ello podemos utilizar findIndex(), vemos cómo

1let posicionObjeto = objetos.findIndex(n=> n.disponible ==true);
2console.log(posicionObjeto);

1let elemFind = {}
2
3for(let i=0; i< objetos.length; i++)
4{
5    if(objetos[i].disponible == true){
6        elemFind = objetos[i];
7        break;
8    } 
9}

Revisar si todos o algún criterio se está cumpliendo

Para mi, personalmente, revisar con una simple función si todos los elementos de una lista cumplen una característica, esto puede ser práctico para realizar validaciones de formularios u otro tipo de elementos. pero ¿Cómo lo haríamos?

1let todoDisponible = listaFind.every(n=> n.disponible==true);
2console.log(todoDisponible)

1let todoDisponible = true;
2for(let i=0; i<objetos.length; i++){
3    if(objetos[i].disponible == false){
4        todoDisponible=false;
5        break;
6    }
7}

En ambos casos la ejecución de este código nos devolverá falso, ya que tenemos en nuestra lista varios elementos que no se encuentran disponibles. Ahora bien, ¿Qué pasaría si nos interesara encontrar saber si algún elemento de la lista cumple una condición?

1let algunDisponible = objetos.some(n=> n.disponible==true);
2console.log(algunDisponible )

1let algunDisponible  = false;
2for(let i=0; i<objetos.length; i++){
3    if(objetos[i].disponible == true){
4        algunDisponible =true;
5        break;
6    }
7}

Inicializar todos los elementos de una lista

Este seguramente será de mucha ayuda a los que trabajéis con infinidad de listas, el proceso de inicializarlas suele dar bastante pereza ya que implica, por lo general, realizar mucho código repetitivo. No te preocupes más, para eso tenemos el método fill()

1let lista = ['','','','','','','']
2lista.fill(3)
3console.log(lista)

1let lista = ['','','','','','','']
2for(let i=0; i<lista.length;lista++) lista[i] = "3"