4 modi per rimuovere un elemento specifico da un array JavaScript

Gli array sono una delle strutture di dati comuni con cui interagirai in JavaScript. Quando si rimuove un elemento da un array, sono disponibili diversi metodi. Tutto dipende da dove si trova l'elemento che vuoi rimuovere e da come lo vuoi identificare.

Scopri quali sono i vari modi per rimuovere un elemento dell'array JavaScript, che sia all'inizio, alla fine o in una posizione intermedia.

1. Rimuovi il primo elemento da un array

Per rimuovere il primo elemento in un array, usa l'integrato di JavaScript spostare() metodo. Funziona immediatamente rimuovendo l'elemento e quindi spostando gli indici di tutti gli elementi rimanenti.

Dopo aver rimosso l'elemento, il metodo shift lo restituisce. Ciò significa che puoi assegnare l'elemento rimosso a un'altra variabile e usarlo in seguito, se lo desideri.

Ecco come:

cost demoArray = [1, 2, 3, 4, 5];
cost primoElemento = demoArray.shift();





instagram viewer


consolare.log (demoArray); // registra [2, 3, 4, 5]
consolare.log (primo elemento); // registra 1

2. Rimuovi l'ultimo elemento da un array

JavaScript ha un built-in pop() metodo per rimuovere l'ultimo elemento in un array. Come il spostare() metodo, pop() restituisce l'elemento rimosso dall'array.

cost demoArray = [1, 2, 3, 4, 5];
cost ultimoElemento = demoArray.pop();
consolare.log (demoArray); // registra [1, 2, 3, 4]
consolare.log (ultimo elemento); // registra 5

Shift e pop sono due dei più comuni Metodi di matrice JavaScript, ma possono portarti solo così lontano. Oltre a questi due, ci sono diversi metodi che ti danno maggiore precisione sugli elementi che rimuovi.

3. Utilizzo dell'operatore Elimina

In alternativa, puoi utilizzare JavaScript eliminare operatore per eliminare un dato elemento dell'array in corrispondenza di un indice specifico. Tuttavia, a differenza di altri metodi che abbiamo esaminato in precedenza, c'è un problema.

IL eliminare L'operatore rimuove solo il valore, lasciando un array con uno spazio vuoto nel suo indice. Tuttavia, la lunghezza dell'array originale rimane la stessa, anche se elimini l'ultimo elemento.

cost demoArray = [1, 2, 3, 4, 5];
eliminare demoArray[2];
consolare.log (demoArray[2]); // registra undefined
consolare.log (demoArray.length); // registra 5
consolare.log (demoArray); // registra [1, 2, vuoto, 4, 5]

4. Rimuovi un elemento dell'array per valore

È inoltre possibile eliminare un elemento dell'array specifico in base al valore. Non esiste un metodo integrato per farlo, ma puoi combinare due metodi esistenti per farlo: indice di() E giunzione().

Questi due ti permetteranno di rimuovere un elemento specifico da un array senza avere un indice. Innanzitutto, inizia trovando l'indice dell'elemento di interesse utilizzando indice di():

cost demoArray = [1, 2, 3, 4, 5];
cost targetElementIndex = demoArray.indexOf(4);
consolare.log (targetElementIndex); // registra 3

Il metodo indexOf restituisce l'indice della prima occorrenza del valore fornito, anche se il valore è presente più di una volta. Se non trova alcun elemento corrispondente, indexOf restituisce -1.

Ora che hai l'indice dell'elemento di destinazione, puoi usare il file giunzione() metodo per eliminare l'elemento in quell'indice. Tutto quello che devi fare è passare l'indice dell'elemento target come primo argomento, seguito dal numero di elementi che vuoi rimuovere.

Per rimuovere un solo elemento, passa un valore di 1 come secondo argomento:

demoArray.splice (targetElementIndex, 1);

IL giunzione() Il metodo restituisce un array degli elementi rimossi e modificherà l'array originale di elementi, proprio come spostare() E pop().

Se alcuni di questi metodi ti sono nuovi, dai un'occhiata al nostro cheatsheet JavaScript completo. Contiene tutti i metodi di matrice a tua disposizione, non solo per la rimozione, ma anche per altre operazioni come l'aggiunta, il looping, l'inversione e il filtraggio degli elementi.

Lavora con gli array JavaScript come un professionista

Sapere come lavorare con gli array in JavaScript è essenziale per tutti gli sviluppatori web a causa della frequenza con cui li incontrerai.

I concetti chiave da padroneggiare sono tutti i metodi integrati a tua disposizione che possono aiutarti a fare quasi tutto quando lavori con gli array.