Siguiendo con el manejo de Array o Listas en JavaScript, al igual que en entradas anteriores. debido a la importancia de estas estructuras, veremos en el día de hoy como podemos eliminar elementos o posiciones de un Array.
Tendremos en cuenta las distintas formas de hacerlo en JavaScript y que diferencias existen entre una y otra con el fin de optar por manejar la que mejor se adapte a las necesidades de nuestros proyectos.
Los Arrays, si deseas información más detallada sobre que son puedes pasarte por este artículo en el cual podrás estudiar los conceptos básicos de estos.
1. Borrar elementos de un array utilizando la función splice();
Este es uno de los métodos que me gusta para borrar elementos de un array en JavaScript, la sintaxis es la siguiente:
splice(index, numero_elementos);
El index establece la posición desde la cual queremos empezar a borrar elementos del array y numero_elementos la cantidad que queremos borrar a partir de la posición dada.
Ejemplo:
<script> var frutas = ["Pera", "Manzana", "Uva", "Mango"]; frutas.splice(2,1) console.log(frutas); </script>
En el código anterior indicamos borrar del array frutas 1 elemento a partir de la posición 2, quedando nuestro array de la siguiente forma:
["Pera", "Manzana", "Mango"]
Nota acerca de la función splice():
Elimina por completo la posición dada por lo tanto el tamaño o largo del array es modificado, teniendo como ejemplo el array utilizado anteriormente inicialmente tiene un largo de 4 elementos, luego de pasar la función splice() queda con un largo de 3 elementos.
2. Borrar elementos de un Array JavaScript haciendo uso del método delete
Analicemos ahora el método delete para borrar posiciones de un array y que características posee:
Sintaxis del método delete:
delete tu_array[index];
Si tenemos en cuenta la sintaxis solo debemos pasar nuestro array y el index (Posición) que deseamos borrar.
Ejemplo:
<script> var frutas = ["Pera", "Manzana", "Uva", "Mango"]; delete frutas[3]; console.log(frutas); </script>
Con el código anterior al imprimir con console.log(); nos muestra:
["Pera", "Manzana", "Uva"]
Más sin embargo si mostramos el largo del array con:
console.log(frutas.length);
Nos mostraría 4 (Que es el largo original del array), ¿y entonces no había borrado la posición?.
Nota acerca del método delete:
El método delete «borra» el valor contenido en la posición de un array, más no modifica el tamaño o largo del mismo, por ende el valor que toma el index que enviamos a eliminar será undefined, para cerciorarnos de ello veamos la siguiente demostración:
<script>
var frutas = ["Pera", "Manzana", "Uva", "Mango"];
delete frutas[3];
for (var i = 0; i < frutas.length; i++) {
console.log(frutas[i])
}
</script>
En el código anterior íteramos nuestro array mediante un ciclo for para obtener todos los valores ubicados en cada posición, pero antes eliminando de este el index número 3 y este es el resultado:
Pera Manzana Uva undefined
3. Buscando un elemento para luego eliminar la posición donde se encuentra:
De esta forma podemos usar la función splice() o el método delete, la idea es primero buscar el elemento obtener el index y luego usar cualquiera de las dos formas vistas anteriormente así:
<script>
var frutas = ["Pera", "Manzana", "Uva", "Mango"];
var index = frutas.indexOf("Uva");
frutas.splice(index, 1);
console.log(frutas)
</script>
Si analizamos un poco el código vemos que estamos obteniendo el index o la posición en el array donde se encuentre el elemento «Uva«, para luego pasarlo a la función splice(); funcionaría igual con el método delete.
Nota acerca de esta forma de eliminar valores de un array:
Hay que tener en cuenta que si en el array se encuentran valores repetidos o duplicados obtendremos siempre el index del primer valor encontrado ejemplo:
<script>
var frutas = ["Uva", "Manzana", "Uva", "Mango"];
var index = frutas.indexOf("Uva");
frutas.splice(index, 1);
console.log(frutas)
</script>
Tendríamos como resultado:
"Manzana", "Uva", "Mango"]
Optimizando cualquiera de las tres formas anteriores haciendo uso de una función:
Sabemos las ventajas del uso de funciones por lo cual también podemos incluir la eliminación de valores de un array en ellas para ser reutilizadas:
<script>
var frutas = ["Pera", "Manzana", "Uva", "Mango"];
function Eliminar_Valor(my_array, posicion, cant_valores) {
my_array.splice(posicion, cant_valores);
return my_array;
}
console.log(Eliminar_Valor(frutas, 2, 1));
</script>
Así que siempre que necesitemos eliminar un valor de un array solo hace falta llamar nuestra función pasandole: nuestro array, la posición desde la cual deseamos borrar y la cantidad de valores que deseamos.