Cosa è la sintassi di diffusione in JavaScript | Spiegato con esempi

L'operatore di diffusione viene utilizzato per espandere un'istanza di array o un'istanza di stringa su un elenco di argomenti come singoli elementi, gli argomenti possono anche essere zero o inferiori alla lunghezza dell'array/stringa iterabile.

JavaScript ha rilasciato molte funzionalità con il rilascio di ES6 JavaScript nel 2015, una delle caratteristiche che erano nuove di JavaScript era l'operatore di diffusione; L'operatore di diffusione ha un identificatore simile ai parametri di riposo che è il triplo punto "..." Prima del nome variabile.

L'operatore di diffusione (...)

L'identificatore a triplo punto se utilizzato prima di un nome variabile in un argomento è noto come sintassi di diffusione o un argomento diffuso. L'argomento diffuso rompe l'oggetto iterabile (array o una stringa) e li trasmette agli argomenti.

Sintassi

(… Variablename)

Per comprendere la differenza tra l'output variabile normale e la variabile di diffusione, dai un'occhiata alla figura seguente:

Come funziona la diffusione con la console.tronco d'albero()

Per comprendere la funzionalità di base dell'operatore di diffusione, creerai semplicemente un oggetto stringa e lo passerai all'interno del console.tronco d'albero() funzione. Successivamente, utilizzare l'operatore di diffusione per passarlo all'interno del console.tronco d'albero() Per esaminare il comportamento dell'operatore di diffusione:

string = "Google";
console.log ("Risultato di sintassi normale:"+ String)
console.log ("Risultato della sintassi spread:");
console.log (... stringa);

Otterrai il seguente output quando esegui lo snippet di codice sopra:

La freccia punta all'uscita della stringa normale e il rettangolo rosso sta racchiudendo l'uscita della sintassi di diffusione. È possibile notare gli spazi tra ogni carattere dell'output di sintassi di diffusione che è perché ogni carattere viene trattato come un elemento diverso.

Passando la sintassi di diffusione negli argomenti di una funzione

L'intero scopo della sintassi di diffusione e l'operatore di diffusione è quello di creare gli argomenti di diffusione e passarli all'interno della funzione. Per dimostrare ciò, stai per creare una funzione che prenderà 5 argomenti e stamperai il risultato dei valori passati all'interno degli argomenti con le seguenti righe di codice:

funzione printsum (a, b, c, d, e)
console.log (a+b+c+d+e);

Stai per creare un array con 5 valori interi al suo interno usando la riga seguente:

numeri = [1,2,3,4,5];

Per l'ultimo passaggio, chiamerai questa funzione usando gli argomenti di diffusione e trasmetti nel numeri Array usando la sintassi di diffusione come un singolo argomento con la riga seguente:

printsum (... numeri);

Lo snippet completo sarebbe:

funzione printsum (a, b, c, d, e)
console.log (a + b + c + d + e);

numeri = [1, 2, 3, 4, 5, 6];
printsum (... numeri);

Dopo aver eseguito il codice, otterrai il seguente output:

Tutti gli elementi all'interno dell'array di numeri sono stati passati come singoli argomenti alla funzione e quindi ogni argomento è stato aggiunto stampato sulla console.

Ma cosa succede se il tuo array di numeri ha più elementi degli argomenti della funzione?; Bene, in quel caso, verranno usati solo i primi 5 elementi dell'array e altri saranno scartati, prevenendo quindi qualsiasi errore.

Per mostrare questo, prendi la funzione sopra menzionata e passa nella seguente array al suo interno:

Vettore:

Numeri = [3,52,6,7,1,3,5,3,1,5,3,6,7,3,5,6,1,2];

Usando il seguente comando:

printsum (... numeri);

Vedrai il seguente risultato sulla console:

Puoi vedere, anche se abbiamo avuto più elementi all'interno dell'array che sono stati passati nell'elenco dell'argomento con la sintassi diffusa, gli elementi extra sono stati tutti scartati e quindi non abbiamo ottenuto errori.

Come concaterare array usando lo spread?

Possiamo persino usare la sintassi di diffusione o l'operatore di diffusione per concaterare elementi di array con altri elementi passando nell'array completo all'interno di un singolo elemento.

Array1 = [2, 3, 4, 5, 6, 6, 7, 7];
Array2 = [1, 10, 2, 44, 66, 22, 11, 33, 56];
FinalArray = [... Array1, ... Array2];
console.Log (FinalArray);

Otterrai il seguente output:

Puoi vedere che il Finallarray ha entrambi il Array1 E Array2 concatenati al suo interno e abbiamo dato solo due elementi nel "FinalArray".

Questo è per la sintassi di diffusione in JavaScript.

Conclusione

La sintassi di diffusione è stata introdotta in JavaScript come una nuova funzionalità con il rilascio di ES6. Sintassi di diffusione o comunemente noto come argomento di diffusione viene utilizzato per espandere gli elementi di un oggetto iterabile -: array o stringa - su un elenco di argomenti di una funzione passando individualmente ogni elemento. Questa funzionalità del linguaggio di programmazione JavaScript ES6 consente di gestire determinati scenari in cui si hanno più argomenti dei parametri della funzione. L'operatore di diffusione può anche essere utilizzato per concatenare elementi dell'array che abbiamo esaminato con l'aiuto di un esempio.