Chiariamo la confusione intorno ai metodi slice (), splice () e split () in JavaScript

I metodi integrati in JavaScript ci aiutano molto durante la programmazione, una volta che li abbiamo compresi correttamente. Vorrei spiegare tre di loro in questo articolo: i slice(), splice()e split()metodi. Forse perché la loro denominazione è così simile da essere spesso confusa, anche tra sviluppatori esperti.

Consiglio agli studenti e agli sviluppatori junior di leggere attentamente questo articolo perché questi tre metodi possono essere richiesti anche nelle INTERVISTE DI LAVORO.

Alla fine puoi trovare un riepilogo di ciascun metodo. Se preferisci, puoi anche guardare la versione video qui sotto:

Quindi iniziamo…

Array JavaScript

Innanzitutto, devi capire come funzionano gli array JavaScript . Come in altri linguaggi di programmazione, utilizziamo array per memorizzare più dati in JS. Ma la differenza è che gli array JS possono contenere diversi tipi di dati contemporaneamente.

A volte abbiamo bisogno di eseguire operazioni su quegli array. Quindi usiamo alcuni metodi JS come slice () e splice () . Di seguito puoi vedere come dichiarare un array in JavaScript:

let arrayDefinition = [];   // Array declaration in JS

Ora dichiariamo un altro array con diversi tipi di dati. Lo userò di seguito negli esempi:

let array = [1, 2, 3, "hello world", 4.12, true];

Questo utilizzo è valido in JavaScript. Un array con diversi tipi di dati: stringa, numeri e un valore booleano.

Fetta ()

Il metodo slice () copia una data parte di un array e restituisce quella parte copiata come un nuovo array. Non cambia l'array originale.

array.slice(from, until);

  • Da: Taglia l'array a partire da un indice di elemento
  • Fino a: affetta l'array fino a quando un altro elemento index

Ad esempio, voglio tagliare i primi tre elementi dall'array sopra. Poiché il primo elemento di un array è sempre indicizzato a 0, inizio ad affettare "da" 0.

array.slice(0, until);

Ora ecco la parte difficile. Quando voglio tagliare i primi tre elementi, devo dare il parametro until come 3. Il metodo slice () non include l'ultimo elemento dato.

array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included

Questo può creare confusione. Ecco perché chiamo il secondo parametro "fino a".

let newArray = array.slice(0, 3);   // Return value is also an array

Infine, assegno l'Array affettato alla variabile newArray . Vediamo ora il risultato:

Nota importante: il metodo Slice () può essere utilizzato anche per le stringhe.

Giunzione ()

Il nome di questa funzione è molto simile a slice () . Questa somiglianza di denominazione spesso confonde gli sviluppatori. Il metodo splice () cambia un array, aggiungendo o rimuovendo elementi da esso. Vediamo come aggiungere e rimuovere elementi con splice ( ) :

Rimozione di elementi

Per rimuovere gli elementi, dobbiamo fornire il parametro index e il numero di elementi da rimuovere:

array.splice(index, number of elements);

L'indice è il punto di partenza per rimuovere gli elementi. Gli elementi che hanno unnumero di indice inferiore dall'indice dato non verranno rimossi:

array.splice(2);  // Every element starting from index 2, will be removed

Se non definiamo il secondo parametro, ogni elemento a partire dall'indice dato verrà rimosso dall'array:

Come secondo esempio, do il secondo parametro come 1, quindi gli elementi che iniziano dall'indice 2 verranno rimossi uno per uno ogni volta che chiamiamo il metodo splice () :

array.splice(2, 1);

Dopo la prima chiamata:

Dopo la 2a chiamata:

Questo può continuare fino a quando non c'è più l'indice 2.

Aggiunta di elementi

Per aggiungere elementi, dobbiamo assegnarli come 3 °, 4 °, 5 ° parametro (dipende da quanti aggiungerne) al metodo splice () :

array.splice (indice, numero di elementi, elemento, elemento);

Per fare un esempio, sto aggiungendo una e B in fin dall'inizio della matrice e rimuovo nulla:

array.splice(0, 0, 'a', 'b');

Diviso ( )

I metodi Slice () e splice () sono per gli array. Ilmetodo split () viene utilizzato per le stringhe . Divide una stringa in sottostringhe e le restituisce come un array. Richiede 2 parametri ed entrambi sono opzionali.

string.split(separator, limit);

  • Separatore: definisce come dividere una stringa ... con virgola, carattere ecc.
  • Limite: limita il numero di divisioni con un dato numero

Il metodo split () non funziona direttamente per gli array . Tuttavia, possiamo prima convertire gli elementi del nostro array in una stringa, quindi possiamo usare il metodo split () .

Vediamo come funziona.

In primo luogo, convertiamo il nostro array in una stringa con il metodo toString () :

let myString = array.toString();

Ora dividiamo myString con virgole, limitiamole a tre sottostringhe e restituiamole come un array:

let newArray = myString.split(",", 3);

Come possiamo vedere, myString è diviso da virgole. Poiché limitiamo la divisione a 3, vengono restituiti solo i primi 3 elementi.

NOTA: se abbiamo un utilizzo come questo:array.split("");ogni carattere della stringa verrà diviso come sottostringhe:

Sommario:

Fetta ()

  • Copia gli elementi da un array
  • Li restituisce come un nuovo array
  • Non cambia l'array originale
  • Inizia il sezionamento da ... fino al dato indice: array.slice (da, a)
  • La sezione non include il parametro di indice "fino a"
  • Può essere utilizzato sia per array che per stringhe

Giunzione ()

  • Utilizzato per aggiungere / rimuovere elementi dall'array
  • Restituisce un array di elementi rimossi
  • Cambia l'array
  • Per aggiungere elementi: array.splice (indice, numero di elementi, elemento)
  • Per rimuovere elementi: array.splice (indice, numero di elementi)
  • Può essere utilizzato solo per gli array

Diviso ( )

  • Divide una stringa in sottostringhe
  • Li restituisce in un array
  • Accetta 2 parametri, entrambi sono opzionali: string.split (separator, limit)
  • Non cambia la stringa originale
  • Può essere utilizzato solo per gli archi

Esistono molti altri metodi incorporati per array e stringhe JavaScript, che semplificano il lavoro con la programmazione JavaScript. Successivamente, puoi consultare il mio nuovo articolo sui metodi di sottostringa JavaScript.

Se vuoi saperne di più sullo sviluppo web, sentiti libero di seguirmi su Youtube !

Grazie per aver letto!