Actualización de ES10
Esta publicación resume los enfoques comunes para la eliminación de elementos de una matriz a partir de ECMAScript 2019 (ES10).
1. Casos generales
1.1. Eliminando el elemento Array por valor usando.splice()
| En el lugar : Sí |
| Elimina duplicados : Sí (bucle), No (indexOf) |
| Por valor / índice : Por índice |
Si conoce el valor que desea eliminar de una matriz, puede usar el método de empalme. Primero, debe identificar el índice del elemento de destino. Luego, usa el índice como elemento de inicio y elimina solo un elemento.
// With a 'for' loop
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
for( let i = 0; i < arr.length; i++){
if ( arr[i] === 5) {
arr.splice(i, 1);
}
} // => [1, 2, 3, 4, 6, 7, 8, 9, 0]
// With the .indexOf() method
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
const i = arr.indexOf(5);
arr.splice(i, 1); // => [1, 2, 3, 4, 6, 7, 8, 9, 0]
1.2. Eliminando el elemento Array usando el .filter()
método
| En el lugar : No |
| Elimina duplicados : Sí |
| Por valor / índice : Por valor |
El elemento específico se puede filtrar de la matriz proporcionando una función de filtrado. A continuación, se llama a dicha función para cada elemento de la matriz.
const value = 3
let arr = [1, 2, 3, 4, 5, 3]
arr = arr.filter(item => item !== value)
console.log(arr)
// [ 1, 2, 4, 5 ]
1.3. Eliminando el elemento Array extendiendoArray.prototype
| En el lugar : Sí / No (Depende de la implementación) |
| Elimina duplicados : Sí / No (Depende de la implementación) |
| Por valor / índice : Por índice / Por valor (Depende de la implementación) |
El prototipo de Array se puede ampliar con métodos adicionales. Estos métodos estarán disponibles para su uso en matrices creadas.
Nota: Algunos consideran que extender prototipos de objetos de la biblioteca estándar de JavaScript (como Array) es un antipatrón.
// In-place, removes all, by value implementation
Array.prototype.remove = function(item) {
for (let i = 0; i < this.length; i++) {
if (this[i] === item) {
this.splice(i, 1);
}
}
}
const arr1 = [1,2,3,1];
arr1.remove(1) // arr1 equals [2,3]
// Non-stationary, removes first, by value implementation
Array.prototype.remove = function(item) {
const arr = this.slice();
for (let i = 0; i < this.length; i++) {
if (arr[i] === item) {
arr.splice(i, 1);
return arr;
}
}
return arr;
}
let arr2 = [1,2,3,1];
arr2 = arr2.remove(1) // arr2 equals [2,3,1]
1.4. Eliminando el elemento Array usando el delete
operador
| En el lugar : Sí |
| Elimina duplicados : No |
| Por valor / índice : Por índice |
El uso del operador de eliminación no afecta la propiedad de longitud. Tampoco afecta los índices de elementos posteriores. La matriz se vuelve escasa, lo que es una forma elegante de decir que el elemento eliminado no se elimina sino que se vuelve indefinido.
const arr = [1, 2, 3, 4, 5, 6];
delete arr[4]; // Delete element with index 4
console.log( arr ); // [1, 2, 3, 4, undefined, 6]
El operador de eliminación está diseñado para eliminar propiedades de los objetos de JavaScript, cuyas matrices son objetos.
1.5. Eliminando el elemento Array usando Object
utilidades (> = ES10)
| En el lugar : No |
| Elimina duplicados : Sí |
| Por valor / índice : Por valor |
Se introdujo ES10 Object.fromEntries
, que se puede usar para crear la matriz deseada a partir de cualquier objeto similar a una matriz y filtrar elementos no deseados durante el proceso.
const object = [1,2,3,4];
const valueToRemove = 3;
const arr = Object.values(Object.fromEntries(
Object.entries(object)
.filter(([ key, val ]) => val !== valueToRemove)
));
console.log(arr); // [1,2,4]
2. Casos especiales
2.1 Eliminar elemento si está al final de la matriz
2.1.1. Cambio de matrizlength
| En el lugar : Sí |
| Elimina duplicados : No |
| Por valor / índice : N / A |
Los elementos de JavaScript Array se pueden eliminar del final de una matriz estableciendo la propiedad length en un valor menor que el valor actual. Se eliminará cualquier elemento cuyo índice sea mayor o igual que la nueva longitud.
const arr = [1, 2, 3, 4, 5, 6];
arr.length = 5; // Set length to remove element
console.log( arr ); // [1, 2, 3, 4, 5]
2.1.2. Usando el .pop()
método
| En el lugar : Sí |
| Elimina duplicados : No |
| Por valor / índice : N / A |
El método pop elimina el último elemento de la matriz, devuelve ese elemento y actualiza la propiedad de longitud. El método pop modifica la matriz en la que se invoca. Esto significa que, a diferencia de eliminar, el último elemento se elimina por completo y la longitud de la matriz se reduce.
const arr = [1, 2, 3, 4, 5, 6];
arr.pop(); // returns 6
console.log( arr ); // [1, 2, 3, 4, 5]
2.2. Eliminando elemento si está al comienzo de la matriz
| En el lugar : Sí |
| Elimina duplicados : No |
| Por valor / índice : N / A |
El .shift()
método funciona de manera muy similar al método pop, excepto que elimina el primer elemento de una matriz de JavaScript en lugar del último. Cuando se quita el elemento, los elementos restantes se desplazan hacia abajo.
const arr = [1, 2, 3, 4];
arr.shift(); // returns 1
console.log( arr ); // [2, 3, 4]
2.3. Eliminar elemento si es el único elemento en la matriz
| En el lugar : Sí |
| Elimina duplicados : N / A |
| Por valor / índice : N / A |
La técnica más rápida es establecer una variable de matriz en una matriz vacía.
let arr = [1];
arr = []; //empty array
Alternativamente, se puede utilizar la técnica de 2.1.1 estableciendo la longitud en 0.
indexOf()
+splice()
: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - Andrew 23/11/20 a las 22:49