5 formas de eliminar elementos de un arreglo con Javascript

5 formas de eliminar elementos de un arreglo con Javascript

- 3 min read

Photo by Devin Avery on Unsplash

Javascript es un lenguaje muy flexible que ofrece múltiples formas de solucionar un problema.

Por ejemplo: Eliminar elementos de un arreglo.

Tienes métodos que mutan el arreglo y métodos inmutables, revisemos algunos

Dentro de los métodos mutables puedes elegir:

sponsor

El contenido de este sitio es y será siempre gratuito para todos. Ayudame a mantenerlo así convirtiendote en auspiciador.
Matias Hernández Logo

Tu producto o servicio podría estar aquí

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

En el caso de los métodos inmutables tienes:

Array.slice y Array.filter

Array.pop

Te permite remover el último elemento de un arreglo cambiando el tamaño del arreglo original.

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

javascript
					
						const elementos  = [1,2,3,'4',5]

const last = elementos.pop()

console.log(last) // 5

console.log(elementos) // [1,2,3,'4']
					
				

Array.shift

Este es el método opuesto a Array.pop, permitiéndote remover el primer elemento de un arreglo, retornándolo para su uso posterior. Cambia el arreglo original pues “extrae” el elemento.

javascript
					
						const elementos  = [1,2,3,'4',5]

const first = elementos.shift()

console.log(first) // 1

console.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 tamaño (length) del arreglo no es afectado.

Puedes ver un ejemplo en este playground

javascript
					
						const elementos = [1,2,3,'4',5]

console.log(elementos, elementos.length)

delete elementos[1]

console.log(elementos, elementos.length)

					
				

Array.slice

Este método retorna una copia de una porción del arreglo determinada por los parámetros usados en slice(start, end) sin modificar el arreglo original.

Puedes revisar un demo aqui

javascript
					
						
const elementos = [1,2,3,'4',5]

// Obten una parte del arreglo desde el indice 0 al 2
// dejando fuera el indice 2
const piece1 = elementos.slice(0, 2)

console.log(piece1)
// [1,2,]

// Obten otra parte del arreglo desde el indice 3 al 5
const piece2 = elementos.slice(3,5)
console.log(piece2)
// ['4',5]

// une las pieces en un nuevo arreglo 
// usando el operador spread
const newElementos = [...piece1, ...piece2]
console.log(newElementos) //[1,2,'4',5]


const elementos2 = [...elementos.slice(0,2), ...elementos.slice(3,5)]


// Más dinámico
let indiceAEliminar = 2

const elementos3 = [...elementos.slice(0,indiceAEliminar), ...elementos.slice(indiceAEliminar+=1, elementos.lenght)]

console.log(elementos3)

					
				

Array.filter

Una de las formas más directas de remover elementos de un arreglo es utilizar Array.filter

Array.filter es un método inmutable que retorna un nuevo arreglo con los elementos que cumplan la condición implementada por la función utilizada como argumento.

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

sponsor

El contenido de este sitio es y será siempre gratuito para todos. Ayudame a mantenerlo así convirtiendote en auspiciador.
Matias Hernández Logo

Tu producto o servicio podría estar aquí

Es un método ideal para remover elementos de un arreglo de objetos.

Puedes ver un demo en este enlace

javascript
					
						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 condición item.name === 'Matias' para definir que se queda en el nuevo arreglo y que no.

Conclusión

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.

😃 Gracias por leer!

Te pareció interesante? Encuentra más contenido similar uniendote al Newsletter o siguiendome en Twitter.

⚙️ Edita en github
Sigue la conversación en Twitter Comparte en Twitter
han dado Like ❤️ Cristian Piña 

📖 Continúa leyendo