JavaScript Splice: cos'è JavaScript Splice e cosa può fare?

Ripubblicato da Platone

Seguaci: 0

Immagina di avere una lista di ristoranti che vuoi provare e, dopo aver finalmente cenato in uno di essi, non vuoi solo cancellare il ristorante dalla tua lista, ma vuoi rimuoverlo completamente.

Quindi rimuovi il ristorante che hai provato e ora il tuo elenco originale contiene solo i ristoranti che devi ancora provare. Proprio qui, abbiamo descritto una delle cose che la giunzione JavaScript può fare.

Che cos'è il metodo di giunzione JavaScript e cosa può fare?

Ok, facciamo un po' indietro. Abbiamo descritto cosa può fare la giunzione JavaScript, ma cos'è esattamente?

Il metodo JavaScript splice() è un metodo integrato per le funzioni di array JavaScript. Splice modifica l'array originale rimuovendo, sostituendo o aggiungendo elementi. Il valore restituito è un nuovo array contenente gli elementi eliminati. Se non vengono rimossi elementi, viene restituito un array vuoto. La sintassi di base per la giunzione JavaScript è:

Array.splice(start, removeCount, newItem, newItem, newItem, ...)

Come rimuovere elementi da un array con splice JavaScript

Per rimuovere semplicemente un elemento da un array utilizzando la giunzione JavaScript, è necessario conoscere il numero di indice dell'elemento che si desidera rimuovere.

Tornando all'esempio che abbiamo riportato all'inizio di questo tutorial. Supponiamo che la nostra lista dei desideri del ristorante fosse composta da A, B, C e D, questo sarebbe l'array originale. Il ristorante che abbiamo provato sarebbe D. Per rimuovere D, avremmo bisogno di conoscere il suo numero di indice. Poiché l'indice dell'array inizia da 0, l'indice sarebbe (X-1). In questo caso, il numero di indice sarebbe 3.

Ora possiamo utilizzare il metodo JavaScript slice per rimuovere il ristorante che abbiamo già visitato dall'array originale: “`
const ristoranti = [“A”, “B”, “C”, “D”]

console.log(restaurants.splice(3, 1)) // output: ["D"]
console.log(ristoranti) // output: [“A”, “B”, “C”]
“`

Qui, possiamo vedere che l'array originale è stato unito in due: l'array originale con gli elementi rimanenti e il valore restituito è un array con gli elementi rimossi.

Per saperne di più su come utilizzare la giunzione JavaScript per rimuovere elementi da un array, dai un'occhiata questo post del blog.

Come aggiungere elementi a un array con la giunzione JavaScript

Puoi aggiungere nuovi elementi a un array usando anche la giunzione JavaScript. Tenendo presente l'intera sintassi della giunzione, è possibile aggiungere nuovi elementi definendo il numero di elementi che si desidera rimuovere come "0" e prima di dichiarare i nuovi elementi.

Ad esempio, aggiungiamo E al nostro array.

“`
const ristoranti = [“A”, “B”, “C”, “D”]

console.log(ristoranti.splice(3, 0,"E")) // output: []
console.log(ristoranti) // output: [“A”, “B”, “C”, “E”, “D”]
“`

Funziona anche se desideri rimuovere e aggiungere elementi al tuo array. Ad esempio, rimuoviamo D dall'array sopra e aggiungiamo F e G nella posizione di D.

“`
const ristoranti = [“A”, “B”, “C”, “D”]

console.log(restaurants.splice(3, 0,"E")) // output: ["D"]
console.log(ristoranti) // output: ["A", "B", "C", "F", "G"]
“`

Splice vs Slice: qual è la differenza tra i due metodi JavaScript?

Una confusione che molti sviluppatori JavaScript potrebbero avere è splice vs slice: sono uguali? Se no, qual è la differenza? Suonano terribilmente simili!

Sebbene sia lo splice che lo slice siano metodi JavaScript incorporati e suonino molto simili, in realtà svolgono ruoli diversi. Sia la giunzione che la sezione JavaScript possono essere utilizzate per manipolare gli elementi in un array.

Tuttavia, come accennato in precedenza, il metodo di giunzione JavaScript modifica direttamente l'array originale e, se presente, restituisce un array degli elementi rimossi. D'altra parte, il metodo slice JavaScript non modifica l'array originale, ma restituisce un nuovo array che è una "sezione" dell'array originale. È possibile definire "l'inizio" e la "fine" della selezione che si desidera venga restituita dal metodo slice.

Dopo aver letto questo articolo, dovresti avere una conoscenza di base di come utilizzare la giunzione JavaScript. Anche se sembra semplice, non sottovalutare tutta la magia che il metodo di giunzione può fare. Se vuoi saperne di più su cosa puoi fare con la giunzione, trova un mentore per aiutarti a padroneggiare JavaScript passo dopo passo!