Eliminar objeto de un array en JavaScript

Ashok Chapagai 12 octubre 2023
  1. Utilice el método splice() para eliminar un objeto de un array en JavaScript
  2. Uso del método slice() para eliminar un objeto de un array en JavaScript
  3. Utilice el método filter() para eliminar un objeto de un array
Eliminar objeto de un array en JavaScript

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'}]
Ashok Chapagai avatar Ashok Chapagai avatar

Ashok is an avid learner and senior software engineer with a keen interest in cyber security. He loves articulating his experience with words to wider audience.

LinkedIn GitHub

Artículo relacionado - JavaScript Array