En introduktion til Spread syntaks i JavaScript

Hvad er det, og hvorfor har vi brug for det?

Spread-syntaksen blev introduceret i ES6-specifikationen af ​​JavaScript. Siden har det vist sig at være et værdifuldt stykke kode, der gør koden ren og let at forstå.

MDN definerer som:

Spread-syntaks tillader, at en iterabel, såsom et arrayudtryk eller en streng, kan udvides på steder, hvor der forventes nul eller flere argumenter (for funktionsopkald) eller elementer (for array-literaler), eller et objektudtryk kan udvides på steder, hvor nul eller mere nøgleværdipar (for objektbogstaver) forventes.

Lad os alle være enige om, at den ovennævnte definition er en håndfuld, og at ingen af ​​os fangede et ord, den forsøgte at sige. Så lad os starte med de mest basale ting om spredningssyntaxen.

  • Spredningsoperatøren er kun 3 prikker ...
  • Det kan bruges på iterables som et array eller en streng.
  • Det udvider en iterabel til sine individuelle elementer
  • Det kan give et funktionsopkald med en matrix (eller en hvilken som helst anden iterabel), hvor der forventes 0 eller flere argumenter.

Eksempel

Nedenstående uddrag indeholder en funktion kaldet sum, der forventer 3 argumenter x, y og z. Vi har en matrix med 3 elementer, og vi vil sende elementerne i arrayet som argumenter for funktionen.

Før spredningsoperatøren blev introduceret, blev dette gjort via anvendelsesfunktionen.

Efter introduktionen af ​​spredningsoperatøren kunne det gøres meget enkelt:

Som det kan ses af ovenstående uddrag med spredningsoperatoren, behøver vi ikke bruge anvendelsesfunktionen. Dette sparer os for at skrive mere kode.

Ovenstående eksempel giver en meget grov og kort idé om spredningsoperatøren. Lad os først komme i flere detaljer vedrørende det samme, og så vil vi se flere eksempler.

Syntaks

Spredningsoperatøren kan bruges på mange måder og scenarier som f.eks

  • Indvendige funktionsopkald

Når det bruges i ovenstående scenarie kaldes det restparameteren. Vi vil se eksempler relateret til dette i eksemplet.

  • Oprettelse / udvidelse af en matrix / iterabel:

Eksempler

  • Som hvile

… Bruges som et argument for en variadisk funktion. En variadisk funktion er en funktion, der kan have et variabelt antal parametre.

Her når vi vender tilbage argumenter, ser vi, at vi får vores array tilbage, som vi passerede som separate værdier i opkaldet. Dette viser, at resten operatør faktisk fungerer nøjagtigt modsat af den spredte syntaks. Man udvider og en kondenserer værdien.

En ting mere at påpege er, at der ikke er noget specifikt antal parametre nævnt i funktionsdefinitionen. Dette betyder at bruge ... funktionen kan have et antal argumenter. Vi behøver ikke at specificere parametrene på forhånd.

Dette er især en meget fleksibel måde at modtage argumenter for en funktion, for hvilken det specifikke antal argumenter ikke bestemmes som Math.max og Math.min-funktionen. De er forskellige funktioner, da antallet af input kan være uendeligt for dem.

Tilbage til eksemplet for at få summen af ​​alle argumenterne

Vi er nødt til at gentage arrayet og tilføje alle de enkelte elementer for at producere resultatet.

  • Skub elementer i en matrix

push () -funktion bruges til at skubbe elementer ind i en matrix. Begrænsningen med push er, at vi skal skubbe elementer en efter en (push (1,2,3)). Hvis der er et array, hvis elementer skal indsættes i arrayet ved hjælp af push, får vi et multidimensionelt array, som vi ikke bad om.

Anvend igen til redning

Som vi kan se, at brug af anvendelse ikke ser meget elegant ud, og vi har brug for en enkel og lille syntaks for at gøre det. Lad os bruge spread ...

Elegant!

  • Kopiering af en matrix

Enkel!

Det samme resultat kan produceres ved hjælp af et objekt

  • Sammenkædning af 2 arrays

Sammenkædning sker ved hjælp af konkatfunktionen

Det samme kan opnås ved hjælp af ... operatøren

  • Konvertering af en streng til en matrix

Dette kan gøres ved hjælp af både splitfunktionen og ... operatøren

  • Anvendes i max- og min-funktioner

Nedenstående uddrag har tendens til at finde det maksimale element i arrayet, så vi passerer hele arrayet i funktionen, men vi får resultatet som NaN

Vi kan bruge anvendelse, men som det ses af de foregående eksempler, hader jeg at bruge det

Samme i min

Konklusion

Vi så mange situationer, hvor spredningsoperatøren er praktisk og reducerer vores kode og gør det også super let at forstå.

Hvis du kan lide det Clap? og følge? for mere.