Hva er spredt syntaks i JavaScript | Forklart med eksempler

Spredningsoperatøren brukes til å utvide en matriseforekomst eller en strengforekomst over en liste over argumenter som individuelle elementer, argumentene kan også være null eller mindre enn lengden på den iterable array/streng.

JavaScript ga ut mange funksjoner med utgivelsen av ES6 JavaScript tilbake i 2015, en av funksjonene som var nye i JavaScript var spredningsoperatøren; Spredningsoperatøren har en lignende identifikator som resten parametere som er trippel-dot "..." Før variabelnavnet.

Spredningsoperatøren (...)

Triple-dot-identifikatoren når det brukes før et variabelt navn i et argument er kjent som spredningssyntaks eller et spredningsargument. Spredningsargumentet bryter det iterable objektet (matrisen eller en streng) og gir dem videre til argumentene.

Syntaks

(... variablename)

For å forstå forskjellen mellom normal variabel utgang og spredningsvariabelen ut, ta en titt på figuren nedenfor:

Hvordan spredning fungerer med konsoll.Logg()

For å forstå den grunnleggende funksjonaliteten til spredningsoperatøren, vil du ganske enkelt lage et strengobjekt og passere det inne i konsoll.Logg() funksjon. Bruk deretter spredningsoperatøren til å passere den inn i konsoll.Logg() For å undersøke oppførselen til spredningsoperatøren:

String = "Google";
konsoll.Logg ("Normalt syntaksresultat:"+ streng)
konsoll.Logg ("Spredt syntaksresultat:");
konsoll.logg (... streng);

Du får følgende utdata når du utfører kodebiten over:

Pilen peker på den normale strengutgangen, og det røde rektangelet omslutter utgangen fra spredningssyntaksen. Du kan legge merke til hull mellom hvert tegn i spredningssyntaksutgangen som er fordi hvert tegn blir behandlet som et annet element.

Passerer spredt syntaks i argumenter for en funksjon

Hele formålet med spredningssyntaksen og spredningsoperatøren er å lage spredningsargumentene og passere dem inne i funksjonen. For å demonstrere dette skal du lage en funksjon som vil ta 5 argumenter og vil skrive ut resultatet av verdiene som er gitt innenfor argumentene med følgende kodelinjer:

funksjon Printsum (a, b, c, d, e)
konsoll.Logg (A+B+C+D+E);

Du skal opprette en matrise med 5 heltallverdier inne i den ved hjelp av følgende linje:

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

For det siste trinnet skal du kalle denne funksjonen ved å bruke spredningsargumentene og passere i tall Array ved å bruke spredningssyntaks som et enkelt argument med følgende linje:

Printsum (... tall);

Det komplette utdraget ville være:

funksjon Printsum (a, b, c, d, e)
konsoll.Logg (A + B + C + D + E);

tall = [1, 2, 3, 4, 5, 6];
Printsum (... tall);

Etter å ha utført koden, får du følgende utdata:

Alle elementene i tallarrayen ble passert som individuelle argumenter til funksjonen, og deretter ble hvert argument lagt til trykt på konsollen.

Men hva om tallene dine har flere elementer enn funksjonens argumenter?; Vel, i så fall vil bare de første 5 elementene i matrisen bli brukt, og andre vil bli kastet, og dermed forhindrer noen feil.

For å vise dette, ta den ovennevnte funksjonen og passere i følgende matrise inni den:

Array:

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

Ved å bruke følgende kommando:

Printsum (... tall);

Du vil se følgende resultat på konsollen:

Du kan se, selv om vi hadde flere elementer i matrisen som ble sendt inn i argumentets liste med spredningssyntaks, ble de ekstra elementene alle kastet, og derfor fikk vi ingen feil.

Hvordan sammenkoble matriser ved hjelp av spredning?

Vi kan til og med bruke spredningssyntaksen eller spredningsoperatøren til sammenkoblingsarrayelementer med andre elementer ved å passere i den komplette matrisen innenfor et enkelt element.

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

Du får følgende utdata:

Du kan se at Finallarray har begge Array1 og Array2 sammenkoblet inni den, og vi ga bare to elementer i "finalarray".

Det er for spredningssyntaksen i JavaScript.

Konklusjon

Spread Syntax ble introdusert i JavaScript som en ny funksjon med utgivelsen av ES6. Spredt syntaks eller ofte kjent som spredningsargumentet brukes til å utvide elementene i et iterable objekt -: matrise eller streng - over en liste over argumenter for en funksjon ved å passere hvert element individuelt. Denne funksjonaliteten til ES6 JavaScript -programmeringsspråket gjør det mulig å håndtere visse scenarier der du har flere argumenter enn parametrene til funksjonen. Spredningsoperatøren kan også brukes til å sammenkoble elementer i matrisen som vi undersøkte ved hjelp av et eksempel.