Visita nuestros cursos en KODOTI. Click para unirte
Estudia con KODOTI. Únete

Trabajando con Arrays en Javascript y funciones con ejemplos prácticos

Veremos una serie de funciones JS útiles para los Arrays que harán que nuestro código sea más eficiente.

Rodríguez Patiño, Eduardo
978 lecturas
Rodríguez Patiño, Eduardo

Como todo desarrollador en un comienzo hemos resuelto mucha de las cosas a nuestro criterio debido a que desconociamos de features del mismo javascript y eso es debido porque no nos hemos puesto a investigar o somos reacio a actualizarnos. Por ejemplo, para encontrar un valor de un Array solemos hacer un for, algo como esto:

var obj = null,
    data = ['platano', 'manzana', 'papaya'];

for(var i = 0; i <= data.length -1; i++) {
    if(data[i] === 'platano') {
        obj = data[i];
    }
}

En general casi todo lo resolvemos con la misma lógica. Otro punto era la compatibilidad con el browser pero hoy en día ya no deberíamos temer a esto, al menos que nuestro proyecto exija dar soporte a navegadores antiguos como IE.

¿Por qué hago este tutorial?

Si bien las funciones que iré explicando más adelante ya deben ser conocidas para el 2019, mostraré una serie de TIPS y más allá de esto, hoy en día vemos mucho javascript y solemos hacer cálculos en memoria o del lado del cliente antes de procesar la data al servidor. Por ende, estos consejos te servirán para agilizar tus proyectos y hacer un código más eficiente.

Usaré Arrow para los ejemplos

Para todos los ejemplos voy a usar la función arrow que es una forma resumida de escribir function(){}.

Eliminando un índice de nuestro arreglo

Splice

Para esta función necesitamos 2 parámetros, el primero será el índice a eliminar y el otro es la cantidad de registros a eliminar a partir del índice.

let data = [
    {id: 1, name: 'Eduardo'},
    {id: 2, name: 'Pamela'},
    {id: 3, name: 'Susana'}
];
data.splice(0, 1);

// Nuevo Array[{id: 2, name: 'Pamela'}, {id: 3, name: 'Susana'}]

Este ejemplo lo que hizo fue remover a Eduardo de la lista del arreglo.

Nota: este ejemplo es muy práctico cuando se conoce el índice del Array.

Filter

Filter recibe una función anónima como parámetro en donde podemos especificar una condición para filtrar un arreglo. Bajo este criterio podemos hacer uso más rápido que el splice cuando no conocemos el índice del arreglo y en nuestro caso, solo disponemos del ID del registro.

let data = [
    {id: 1, name: 'Eduardo'},
    {id: 2, name: 'Pamela'},
    {id: 3, name: 'Susana'}
];
data = data.filter(x => x.id !== 1);

// Nuevo Array[{id: 2, name: 'Pamela'}, {id: 3, name: 'Susana'}]

Obteniendo un registro

Con ES6 tenemos disponible la función find que lo que hace es encontrar el primer registro según la condición que se especifique.

let data = [
    {id: 1, name: 'Eduardo'},
    {id: 2, name: 'Pamela'},
    {id: 3, name: 'Susana'}
];
let obj = data.find(x => x.id === 1);

// {id: 1, name: 'Eduardo'}

Nota: luego de realizar la búsqueda sino encontrará nada retornará NULL y en caso de éxito será un object el valor esperado, dejará de ser un Array. A los que vienen de .NET es similar al SingleOrDefault();

Agregando una nueva propiedad a todos los registros

Pues este TIP seguro ya lo han hecho pero nunca queda demás para que el usaba puro FOR. En este ejemplo lo que vamos hacer es validar si la persona es mayor o igual a los 21 años y por ende; veremos si tiene derecho al sufragio o no.

let data = [
    {id: 1, name: 'Eduardo', age: 30},
    {id: 2, name: 'Pamela', age: 25},
    {id: 3, name: 'Susana', age: 17}
];
data.forEach(x => x.canVote = x.age >= 21);

Con esto el array tiene una nueva propiedad llamada canVote el cua les un boolean.

Otra opción sería esta:

// Colaboración de Daniel Garcia
data = data.map(x => ({ ...x, canVote: x.age >= 21 }));

Pueden investigar sobre Spread Operator

Obtener todo los ID de nuestra lista de array

En algunos casos queremos procesar peticiones por lote y solo necesitamos el ID. Ejemplo, queremos eliminar de una grilla todo los usuarios seleccionados.

let data = [
    {id: 1, name: 'Eduardo'},
    {id: 2, name: 'Pamela'},
    {id: 3, name: 'Susana'}
];
let ids = data.map(x => x.id);
// [1, 2, 3]

Lo que hizo esta función fue recorrer los objetos y armar uno nuevo en función a lo especificado. En nuestro caso creo una nueva lista array que contiene solo los enteros de los IDs.

Conclusión

En la práctica y ahora que ando viendo mucho javascript con Vue, estas funciones me quedan a pelo y agilizan mucho mi trabajo reduciendo líneas de código. He compartido con ustedes las que más suelo usar y los ejemplos prácticos que le doy. En si, tenemos más funciones interesantes para los array como reduce, from, etc, ya es cuestión de ir investigando.

¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín