Posts en array

Eliminar elementos de un array en Javascript

Muchas las cosas más sencillas son las que más dolores de cabeza nos llegan a dar, a pesar de tener muchos años de experiencia en el mundo del desarrollo web, aún tengo que Googlear las cosas más básicas prácticamente todos los días.

Es por eso que he decidido simplemente crear mi propia versión de estos tips, para así tener una referencia en mi sitio cuando inevitablemente tenga que buscarlos de nuevo, ésta vez. Remover elementos de un array en Javascript

El problema, como muchas cosas en la vida, (y en Javascript) es que no es tan simple como debería, y, como muchas cosas en la vida (y en Javascript) hay muchas maneras de hacerlo.

Remover un elemento utilizando .splice()

El método .splice() es probablemente la forma más fácil de manipular arrays, nos permite agregar, reemplazar, o eliminar un cierto elemento en base a su índice, ejemplo:

La ventaja de este método es: En realidad no elimina el elemento del array, si no que lo mueve. Básicamente el método regresa cualquier valor que se ha eliminado del array, en este caso lo guardamos en una nueva constante, para uso en un futuro.

Otro punto a notar, es que podemos quitar varios elementos utilizando éste mismo método, simplemente debemos aumentar la cantidad en el segundo argumento.

Remover el último elemento utilizando .pop()

El método .pop(), es algo así como el opuesto de .push(), mientras que .push() Agrega un nuevo elemento al final de un array, .pop() elimina el último elemento de un array, ejemplo:

Al igual que .splice(), .pop() regresará el elemento “removido” para que podamos usarlo en un futuro. Sin embargo, nótese que en ésta ocasión recibimos un string, y no un array.

Remover el primer elemento utilizando .shift()

El método .shift(), es el opuesto a .unshift(), y éstos a su vez son opuestos a .pop() y .push(), mientras que éstos últimos trabajan al final del array, los primeros hacen su magia al comienzodel array.

.shift() eliminará el primer elemento en nuestro array, ejemplo:

Una vez más, nótese que el valor que recibimos es un string

Remover un elemento en base a su valor

Hasta ahora hemos visto cómo eliminar elementos en base a su índice, pero, ¿Qué pasa cuándo necesitamos remover algo an base a su valor?

El procedimiento es parecido, pero en éste caso necesitamos primero encontrar el índice del elemento con ese valor.

Para encontrar el índice podemos utilizar .indexOf(), y lo utilizamos en conjunto con .splice(), ejemplo, quitemos “bar”:

Nótese la comparación para asegurarnos de que el índice existe, si no existe, regresará -1. Usualmente una comparación fallida regresaría 0, (traduciéndose a false), pero como los arrays comienzan en el índice 0, no nos ayudaría mucho ¿Cierto?

Remover elementos utilizando .filter()

Por último, podemos utilizar el método .filter() para crear un nuevo array con los valores deseados, técnicamente éste método no elimina los elementos del array, ya que el array original no cambia. Ejemplo, creemos un nuevo array sin “bar”: