Rimuovi oggetto da un array in JavaScript

1. Usa il metodo splice() per rimuovere un oggetto da un array in JavaScript
2. Utilizzo del metodo slice() per rimuovere un oggetto da un array in JavaScript
3. Usa il metodo filter() per rimuovere un oggetto da un array

In questo articolo impareremo come rimuovere un oggetto da un array JavaScript. L’articolo introdurrà e implementerà metodi come splice(), slice() e filter().

Usa il metodo splice() per rimuovere un oggetto da un array in JavaScript

Il metodo splice() potrebbe essere il metodo migliore che possiamo usare per rimuovere l’oggetto da un array. Modifica il contenuto di un array rimuovendo o sostituendo elementi esistenti o aggiungendo nuovi elementi sul posto. La sintassi per il metodo splice() è mostrata di seguito.

Array.splice(index, count, items1, ..., itemX)

L’opzione indice si riferisce a un numero intero che specifica in quale posizione aggiungere/rimuovere elementi. Possiamo anche usare valori negativi per specificare la posizione dalla fine dell’array. L’opzione count è facoltativa e indica il numero di elementi da rimuovere. Anche l’opzione items1, ..., itemX è facoltativa e può essere utilizzata per aggiungere nuovi elementi all’array.

All’inizio dichiariamo una variabile array chiamata myArray, che contiene tre oggetti nell’array. Quindi, nella seconda riga, utilizziamo il metodo splice() per l’array. Indichiamo anche 0 e 1 come argomenti. Quindi registriamo l’array nella console.

Inizialmente, l’array contiene tre oggetti. Il valore 0 nel metodo splice() indica il primo indice dell’array, cioè il primo oggetto. Significa che inizieremo a rimuovere dal primo index. Il valore successivo, 1 nel metodo, specifica che il metodo rimuoverà un elemento dal punto di partenza. Pertanto, l’esempio seguente rimuoverà il primo oggetto nell’array.

Da notare che il metodo splice() modifica l’array; quindi, possiamo usare il metodo slice() per rimuovere l’oggetto desiderato dall’array senza cambiare l’array originale.

Esempio di codice:

var myArray =
    [{id: 1, name: 'John'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
myArray.splice(0, 1)
console.log(myArray)

Produzione:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

Utilizzo del metodo slice() per rimuovere un oggetto da un array in JavaScript

Il metodo slice() restituisce la copia modificata della porzione dell’array selezionata dall’inizio alla fine, ma l’indice di fine passato al metodo non verrà incluso. La sintassi per il metodo slice() è di seguito.

Array.slice(startIndex, endIndex)

Qui, startIndex è l’indice in base zero da cui iniziamo l’estrazione. È possibile utilizzare un indice negativo, che indica un offset dalla fine della sequenza. Ad esempio, slice(-3) estrae gli ultimi tre elementi della sequenza. Se startIndex non è definito, la funzione slice() parte dall’indice 0, mentre se startIndex è maggiore dell’intervallo di indice dell’array, viene restituito un array vuoto.

L’opzione endIndex è anche un indice in base zero prima del quale terminare l’estrazione. Il metodo slice() estrae fino a endIndex ma include lo stesso endIndex. Se l’opzione endIndex è esclusa, la funzione slice() estrae fino alla fine della sequenza, cioè fino a array.length. Se endIndex è maggiore della lunghezza della sequenza, anche la funzione slice() estrae fino alla fine della sequenza.

Il metodo slice(1,3) nell’esempio seguente estrarrà gli elementi dal secondo indice al quarto indice. Poiché non esiste un quarto indice nell’array, estrarrà gli elementi fino alla fine della sequenza.

Esempio di codice:

var myArray =
    [{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.slice(1, 3);
console.log(newArray)

Produzione:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

Usa il metodo filter() per rimuovere un oggetto da un array

Il metodo filter() crea un nuovo array con gli elementi che superano il test fornito dalla funzione. Significa che restituirà un nuovo array di oggetti. Se nessun elemento supera il test, la funzione restituirà un array vuoto. Useremo la funzione freccia per dimostrare il metodo filter().

Il metodo filter() utilizza una terminologia chiamata funzione di callback, che funziona come

var newArray = myArray.filter(
    (element, index, array) => {
        ...Items passing this condition will be added to the new array...})

Il metodo accetta tre argomenti. L’opzione element è l’elemento corrente in elaborazione nell’array. L’index è facoltativo e indica l’indice dell’elemento corrente in elaborazione nell’array. Infine, l’opzione array è il filtro dell’array richiamato e opzionale.

Innanzitutto, crea un array con oggetti come fatto nei metodi sopra. Quindi chiama la funzione filter() con la variabile array. Specificare item come argomento della funzione freccia e restituire gli elementi dell’array con l’espressione item.id ! == 1. Memorizzare il nuovo array nella variabile newArray e registrarlo nella console.

L’esempio seguente restituisce solo l’elemento dell’array il cui id non è uguale al valore 1. Pertanto, restituisce il secondo e il terzo elemento dell’array.

Codice di esempio:

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);

Produzione:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]