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
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.
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.
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
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
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
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
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.
