Eliminar objeto de un array en JavaScript
-
Utilice el método
splice()
para eliminar un objeto de un array en JavaScript -
Uso del método
slice()
para eliminar un objeto de un array en JavaScript -
Utilice el método
filter()
para eliminar un objeto de un array
En este artículo, aprenderemos cómo eliminar un objeto de un array de JavaScript. El artículo presentará e implementará métodos como splice()
, slice()
y filter()
.
Utilice el método splice()
para eliminar un objeto de un array en JavaScript
El método splice()
podría ser el mejor método que podemos usar para eliminar el objeto de un array. Cambia el contenido de un array eliminando o reemplazando elementos existentes o agregando nuevos elementos en su lugar. La sintaxis del método splice()
se muestra a continuación.
Array.splice(index, count, items1, ..., itemX)
La opción index
se refiere a un número entero que especifica en qué posición agregar / eliminar elementos. También podemos usar valores negativos para especificar la posición desde el final del array. La opción count
es opcional e indica el número de elementos que se eliminarán. La opción items1, ..., itemX
también es opcional y se puede usar para agregar nuevos elementos a el array.
Al principio, declaramos una variable de array llamada myArray
, que contiene tres objetos en el array. Luego, en la segunda línea, usamos el método splice()
para el array. También indicamos 0
y 1
como argumentos. Luego registramos el array en la consola.
Inicialmente, el array contiene tres objetos. El valor 0
en el método splice()
indica el primer índice del array, es decir, el primer objeto. Significa que comenzaremos a eliminar del primer índice. El siguiente valor, 1
en el método, especifica que el método eliminará un elemento del punto de partida. Por lo tanto, el ejemplo siguiente eliminará el primer objeto del array.
Debemos tener en cuenta que el método splice()
modifica el array; por lo tanto, podemos usar el método slice()
para eliminar el objeto deseado del array sin cambiar el array original.
Ejemplo de código:
var myArray =
[{id: 1, name: 'John'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
myArray.splice(0, 1)
console.log(myArray)
Producción :
[{id:2, name:'Rick'},{id:3, name:'Anna'}]
Uso del método slice()
para eliminar un objeto de un array en JavaScript
El método slice()
devuelve la copia modificada de la parte del array seleccionada desde el principio hasta el final, pero el índice final pasado al método no se incluirá. La sintaxis del método slice()
se muestra a continuación.
Array.slice(startIndex, endIndex)
Aquí, startIndex
es el índice de base cero desde el que comenzamos la extracción. Se puede utilizar un índice negativo, que indica un desplazamiento desde el final de la secuencia. Por ejemplo, slice(-3)
extrae los últimos tres elementos de la secuencia. Si startIndex
no está definido, la función slice()
comienza desde el índice 0
, mientras que si startIndex
es mayor que el rango de índice del array, se devuelve un array vacía.
La opción endIndex
también es un índice de base cero antes del cual finalizar la extracción. El método slice()
extrae hasta el endIndex
pero incluye el propio endIndex
. Si se excluye la opción endIndex
, la función slice()
se extrae hasta el final de la secuencia, es decir, hasta el array.length
. Si endIndex
es mayor que la longitud de la secuencia, la función slice()
también se extrae hasta el final de la secuencia.
El método slice(1,3)
en el ejemplo siguiente extraerá los elementos del segundo índice al cuarto índice. Dado que no hay un cuarto índice en el array, extraerá los elementos hasta el final de la secuencia.
Ejemplo de código:
var myArray =
[{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.slice(1, 3);
console.log(newArray)
Producción :
[{id:2, name:'Rick'},{id:3, name:'Anna'}]
Utilice el método filter()
para eliminar un objeto de un array
El método filter()
crea una nueva matriz con los elementos que pasan la prueba proporcionada por la función. Significa que devolverá una nueva matriz de objetos. Si ningún elemento pasa la prueba, la función devolverá un array vacía. Usaremos la función de flecha para demostrar el método filter()
.
El método filter()
utiliza una terminología llamada función de devolución de llamada, que es como
var newArray = myArray.filter(
(element, index, array) => {
...Items passing this condition will be added to the new array...})
El método acepta tres argumentos. La opción element
es el elemento actual que se está procesando en el array. El index
es opcional e indica el índice del elemento actual que se está procesando en el array. Finalmente, la opción array
es el filtro de array invocado y opcional.
Primero, cree un array con objetos como se hizo en los métodos anteriores. Luego llame a la función filter()
con la variable de array. Especifique item
como argumento de la función de flecha y devuelva los elementos del array con la expresión item.id ! == 1
. Almacene la nueva matriz en la variable newArray
y regístrela en la consola.
El siguiente ejemplo solo devuelve el elemento del array cuyo id
no es igual al valor 1
. Por lo tanto, devuelve el segundo y tercer elemento del array.
Código de ejemplo:
var myArray =
[{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.filter((item) => item.id !== 1);
console.log(newArray);
Producción :
[{id:2, name:'Rick'},{id:3, name:'Anna'}]