Eliminar elementos de un array en Javascript

5 minutos de lectura

Fecha: 4/4/2019

Eliminar elementos de un array en Javascript es una tarea habitual para los que desarrollamos en este lenguaje. De hecho, para hacerlo existen una gran cantidad de maneras distintas, según cual sea la necesidad.

Seguramente algunas te sonarán y otras no tanto. Pero al final de este post tendrás un cuadro completo de los métodos que tenemos disponibles para que escojas el que más te guste.

Eliminar el primer elemento

Para eliminar el primer elemento contamos con el método shift. Lo que realmente hace es borrar el elemento que tenga el índice cero y desplaza los demás hacia atrás.

Además de eso, devuelve el elemento que elimina, salvo que el array este vacío en cuyo caso devuelve undefined.

Se usa así de esta manera.

var mi_array = ['cero', 'uno', 'dos', 'tres', 'cuatro'];
mi_array.shift(); // devuelve "cero"
console.log(mi_array); // ['uno', 'dos', 'tres', 'cuatro']

Eliminar el último elemento

Si queremos eliminar el último el método que usaremos es pop. Se comporta exactamente igual que splice, solo que en vez de actuar sobre el primer elemento lo hace sobre el último.

Por tanto me ahorro la explicación y muestro el ejemplo:

var mi_array = ['cero', 'uno', 'dos', 'tres', 'cuatro'];
mi_array.pop(); // devuelve "cuatro"
console.log(mi_array); // ['cero', 'uno', 'dos', 'tres']

Eliminar el último o los últimos elementos

Esto ya es más curioso y menos conocido. En esta ocasión no usaremos un método sino que modificaremos una propiedad. La propiedad length.

La propiedad length establece o devuelve la cantidad de elementos del array. El valor es un entero sin signo de 32 bits que siempre es numéricamente mayor que el índice más alto en la matriz (esto se debe a que los índices empiezan en 0).

Yo casi siempre que lo he usado es para ver cuantos elementos hay, pero notemos que por definición también podemos usarlo para establecerlos. Y lógicamente si establecemos un número menor que el que tenía estamos borrando.

Por lo tanto si queremos borrar el último elemento haremos esto:

var mi_array = ['cero', 'uno', 'dos', 'tres', 'cuatro'];
mi_array.length = mi_array.length - 1;
console.log(mi_array); // ['cero', 'uno', 'dos', 'tres']

Si en vez del último queremos eliminar los tres últimos sería así:

var mi_array = ['cero', 'uno', 'dos', 'tres', 'cuatro'];
mi_array.length = mi_array.length - 3;
console.log(mi_array); // ['cero', 'uno']

Y si queremos borrarlos todos, es decir, vaciar el array. Basta con asignarle un 0.

var mi_array = ['cero', 'uno', 'dos', 'tres', 'cuatro'];
mi_array.length = 0;
console.log(mi_array); // []

Eliminar elementos según su índice

Ahora procedemos a eliminar elementos usando como referencia su índice, o lo que es lo mismo, su posición dentro del array. Para ello nos valemos de un método llamado splice.

Esta función sirve tanto para añadir un elemento en determinada posición, como para borrarlo. Pero como este post trata de la eliminar, voy a centrarme solo en eso.

Este método usado para borrar devuelve un array con los elementos que hemos eliminado

El método si estamos intentando eliminar requiere solo de dos parámetros:

1. El primero indica donde se comenzará a cambiar el array (con 0 como origen). Si supera la longitud del array, el punto inicial será la longitud del array. Si es negativo, empezará esa cantidad de elementos contando desde el final.
2. El número de elementos a eliminar del array. Si le damos un valor más alto que los elementos restantes (arr.length - start) simplemente borra todos los que falten. Si podemos un 0 o un número negativo no borra nada.

Puede ser denso de entender a la primera, pero con estos ejemplos se ve más fácil.

var mi_array = ['cero', 'uno', 'dos', 'tres', 'cuatro'];
mi_array.splice(2, 1); // devuelve ['dos']
console.log(mi_array); // ['cero', 'uno', 'tres', 'cuatro']

Si quisiéramos borrar el primero o incluso el último, podemos hacerlo asi.

// PARA BORRAR EL PRIMERO
var mi_array = ['cero', 'uno', 'dos', 'tres', 'cuatro'];
mi_array.splice(0, 1); // devuelve ['cero']
console.log(mi_array); // ['uno', 'dos', 'tres', 'cuatro']

// PARA BORRAR EL ÚLTIMO
var mi_array = ['cero', 'uno', 'dos', 'tres', 'cuatro'];
mi_array.splice(-1, 1); // devuelve ['cuatro']
console.log(mi_array); // ['cero', 'uno', 'dos', 'tres']
// QUE EQUIVALE A ESTO
var mi_array = ['cero', 'uno', 'dos', 'tres', 'cuatro'];
mi_array.splice(mi_array.length - 1, 1); // devuelve ['cuatro']
console.log(mi_array); // ['cero', 'uno', 'dos', 'tres']

Y por si no había quedado claro voy a quitar todos menos el primero y el último.

var mi_array = ['cero', 'uno', 'dos', 'tres', 'cuatro'];
mi_array.splice(1, mi_array.length - 2); // devuelve ['uno', 'dos', 'tres']
console.log(mi_array); // ['cero', 'cuatro']

Esta es una manera muy cómoda y versátil para borrar elementos, pero por contra esta ligada a los índices. De manera que no nos sirve para eliminar un elemento por su valor.

Eliminar elementos según su valor

Ya hemos dejado los índices a un lado, ahora nos da lo mismo la posición que ocupan y nos centramos en su valor.

MÉTODO NATIVO

Y tenemos varias maneras de hacerlo, empezaré por la forma nativa del lenguaje, que es usando el método filter.

Por hacer un inciso si quieres saber más sobre filter, hace tiempo escribí otra entrada donde hablaba de map, filter y reduce. Que son métodos para iterar sobre un array. La puedes consultar pinchando aquí.

Como acabo de decir filter es un iterador, de manera que recorre uno a uno los elementos del mismo y mediante una función de callback que nosotros le pasamos decidimos cuales devuelve.

Veamos como funciona, para ello usaré el ejemplo de mi otra entrada que ademas viene bien porque no es un array de datos primitivos como hasta ahora, sino de objetos.

var cars = [{
    'brand': 'Ford',
    'model' : 'Focus'
  }, {
    'brand': 'Volkswagen',
    'model' : 'Golf'
  }, {
    'brand': 'Honda',
    'model' : 'Civic'
  }, {
    'brand': 'Seat',
    'model' : 'León'
}];

var cars = cars.filter(function(car) {
    return car.brand !== 'Seat'; 
});

console.log(cars); /* [{
    'brand': 'Ford',
    'model' : 'Focus'
  }, {
    'brand': 'Volkswagen',
    'model' : 'Golf'
  }, {
    'brand': 'Honda',
    'model' : 'Civic'
}]; */

Como peculiaridad notad que tengo que igualar la variable al resultado del método filter.

var cars = cars.filter(function(car) { ...

Esto se debe a que la iteración no actúa sobre el array original, sino que hace una copia, filtra los elementos y luego la devuelve.

USANDO ITERADORES

Si quisiéramos usar un iterador que sí actúe sobre el elemento original, podemos hacer uso de forEach (que es un iterador genérico y que a diferencia del filter no está enfocado a eliminar elementos).

Esta manera a nivel de código no es tan limpia y además necesitamos apoyarnos en splice. Pero funciona y por lo tanto la pongo.

Imaginemos que tenemos el array anterior. Para hacer lo mismo con forEach pondríamos esto:

cars.forEach(function(car, index, object) {
    if(car.brand === 'Seat'){
      object.splice(index, 1);
    }
});

console.log(cars); /* [{
    'brand': 'Ford',
    'model' : 'Focus'
  }, {
    'brand': 'Volkswagen',
    'model' : 'Golf'
  }, {
    'brand': 'Honda',
    'model' : 'Civic'
}]; */

Si quisiéramos rizar el rizo en vez de un forEach podríamos usar un bucle for, o un bucle while. En estos casos usamos el length del array para ir iterando sobre él, pero de esto ya no voy a poner ejemplos.

USANDO LODASH

Hasta ahora nos hemos valido de métodos y propiedades de los arrays o de iteradores genéricos. Pero existen librerías como Lodash que también nos ofrecen métodos para ello.

Si quieres saber qué es lodash aquí te dejo otro artículo que hice. En este caso tenemos el método _.remove().

Es prácticamente lo mismo que el método filter nativo. Pero que sí modifica el array original como lo hace un forEach y además devuelve otro array con los elementos eliminados.

Pongo el mismo ejemplo para que veáis como haríamos.

var cars = [{
    'brand': 'Ford',
    'model' : 'Focus'
  }, {
    'brand': 'Volkswagen',
    'model' : 'Golf'
  }, {
    'brand': 'Honda',
    'model' : 'Civic'
  }, {
    'brand': 'Seat',
    'model' : 'León'
}];

_.remove(cars, function(car) {
    return car.brand !== 'Seat'; 
}); /* Devuelve [{
    'brand': 'Seat',
    'model' : 'León'
}]; */

console.log(cars); /* [{
    'brand': 'Ford',
    'model' : 'Focus'
  }, {
    'brand': 'Volkswagen',
    'model' : 'Golf'
  }, {
    'brand': 'Honda',
    'model' : 'Civic'
}]; */

Y hasta aquí las maneras de eliminar elementos de un array en Javascript, hemos ido de las más sencillas a las más complejas usando incluso librerías como Lodash. Espero que este repaso os sea útil.