Manipular Arrays en JavaScript

Métodos útiles y curiosos que debes conocer para manipular Arrays en JavaScript.

trucos-arrays-javascript

Si desarrollas en JavaScript tarde o temprano tendrás que trabajar con Arrays. En este artículo queremos mostrar algunos trucos y métodos poco conocidos pero que resuelven problemas habituales y recurrentes que te puedes encontrar.

Eliminar elementos duplicados

Podemos hacer uso de Set() para obtener valores únicos de un Array.

const duplicados = [1, 1, 2, 3, 4, 4, 4, 5, 6, 6]
const elementosUnicos = [...new Set(duplicados)]
console.log(elementosUnicos)
// [1, 2, 3, 4, 5, 6]

Rellenar un Array con datos

En JavaScript, a diferencia de otros lenguajes, no es necesario definir el tamaño de un Array. Pero si necesitamos inicializarla con valores predefinidos podemos usar el método fill().

const nuevoArray = new Array(10).fill(1)
console.log(newArray) // [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

Fusionar Arrays

Se puede usar el método concat para fusionar múltiples arrays encadenándolas una detrás de otra, pero hay otra forma: usando el spread operator.

const numeros = [1, 2, 3]
const fruta = ['platano', 'fresa', 'limón']
const coleccion = [...numeros, ...fruta]
console.log(coleccion) // [1, 2, 3, 'platano', 'fresa', 'limón']

Eliminar elementos con valor falsos

En JavaScript estos son los elementos que se consideran valores falsy: null, undefined, false, NaN, 0, -0, 0n, "", es decir, que si se evalúan en una condición devuelven false en un contexto boleano.

Si tenemos un Array con estos elementos y queremos eliminarlos, podemos filtrarlos usando el método filter y el objeto primitivo Boolean:

const elementos = [null, 1, 2, 3, undefined, NaN, 4, ""]
const verdaderos = elementos.filter(Boolean)
console.log(verdaderos) // [1, 2, 3, 4]

Obtener el último elemento de un Array

Hay muchas maneras de obtener el último elemento de un Array, quizá la más eficiente sea esta:

const elementos = [1, 2, 3, 4, 5]
const ultimo = elementos.at(-1)
console.log(ultimo) // 5

Esta otra quizá sea más leíble:

const elementos = [1, 2, 3, 4, 5]
const [ultimo] = [...elementos].reverse();
console.log(ultimo) // 5

# Sumar todos los elementos de un Array

Con reduce se puede resolver de forma elegante la suma de los elementos de un Array.

const elementos = [25, 74, 846, 1098];
const resultado = elementos.reduce((x, y) => x + y, 0);
console.log(resultado); // 2043

Conclusión

En este artículo hemos visto algunos métodos útiles para manejar Arrays en JavaScript. Si no los conocías quizá te hayan parecido interesantes y alguno hasta creativo, espero que te sirva para mejorar tu proceso de desarrollo en JavaScript.