5 formas de eliminar elementos de un arreglo con Javascript

Photo by Devin Avery on Unsplash

TLDR

Leccin en video en egghead

Javascript es un lenguaje muy flexible que ofrece mltiples formas de solucionar un problema.

Por ejemplo: Eliminar elementos de un arreglo.

Tienes mtodos que mutan el arreglo y mtodos inmutables, revisemos algunos

Dentro de los mtodos mutables puedes elegir:

Array.pop, Array.shift y el operador delete.

En el caso de los mtodos inmutables tienes:

Array.slice y Array.filter

Array.pop

Te permite remover el ltimo elemento de un arreglo cambiando el tamao del arreglo original.

El elemento que se remueve es retornado a menos que no queden elementos en el arreglo, en ese caso obtienes undefined.

const elementos  = [1,2,3,'4',5]const last = elementos.pop()console.log(last) // 5console.log(elementos) // [1,2,3,'4']

Array.shift

Este es el mtodo opuesto a Array.pop, permitindote remover el primer elemento de un arreglo, retornndolo para su uso posterior. Cambia el arreglo original pues "extrae" el elemento.

const elementos  = [1,2,3,'4',5]const first = elementos.shift()console.log(first) // 1console.log(elementos) // [2,3,'4',5]

Operador delete

Este es en realidad un operador que te permite remover remover una propiedad de un objeto.

Al eliminar un elemento del arreglo el tamao (length) del arreglo no es afectado.

Puedes ver un ejemplo en este playground

const elementos = [1,2,3,'4',5]console.log(elementos, elementos.length)delete elementos[1]console.log(elementos, elementos.length)

Array.slice

Este mtodo retorna una copia de una porcin del arreglo determinada por los parmetros usados en slice(start, end) sin modificar el arreglo original.

Puedes revisar un demo aqui

const elementos = [1,2,3,'4',5]// Obten una parte del arreglo desde el indice 0 al 2// dejando fuera el indice 2const piece1 = elementos.slice(0, 2)console.log(piece1)// [1,2,]// Obten otra parte del arreglo desde el indice 3 al 5const piece2 = elementos.slice(3,5)console.log(piece2)// ['4',5]// une las pieces en un nuevo arreglo // usando el operador spreadconst newElementos = [...piece1, ...piece2]console.log(newElementos) //[1,2,'4',5]const elementos2 = [...elementos.slice(0,2), ...elementos.slice(3,5)]// Ms dinmicolet indiceAEliminar = 2const elementos3 = [...elementos.slice(0,indiceAEliminar), ...elementos.slice(indiceAEliminar+=1, elementos.lenght)]console.log(elementos3)

Array.filter

Una de las formas ms directas de remover elementos de un arreglo es utilizar Array.filter

Array.filter es un mtodo inmutable que retorna un nuevo arreglo con los elementos que cumplan la condicin implementada por la funcin utilizada como argumento.

De forma interna, filter itera sobre los elementos del arreglo y aplica la funcin argumento en cada item retornando un valor _boolean, s_i el elemento pasa la condicin se retorna true indicando que este ser agregado al nuevo arreglo.

Es un mtodo ideal para remover elementos de un arreglo de objetos.

Puedes ver un demo en este enlace

const elementos = [  {    id : 1,    name: 'Matias'  },  {    id: 2,    name: 'Juan'  } ]const filtrados = elementos.filter(item => item.name === 'Matias')console.log(filtrados)

En este caso, usas la condicin item.name === 'Matias' para definir que se queda en el nuevo arreglo y que no.

Conclusin

En resumen las opciones para eliminar elementos de un arreglo son variadas y dependen siempre del caso de uso, tienes opciones que modifican el arreglo original como pop y shift y opciones que crean un nuevo arreglo como slice y filter.