En introduktion til spredningsoperatøren og hvileparameter i JavaScript (ES6)

Både spredningsoperatoren og restparameteren skrives som tre på hinanden følgende prikker (…). Har de noget andet til fælles?

Spredoperatøren (...)

Spredningsoperatørenblev introduceret i ES6. Det giver dig mulighed for at udvide iterable objekter i flere elementer. Hvad betyder det egentlig? Lad os kontrollere nogle eksempler.

const movies = ["Leon", "Love Actually", "Lord of the Rings"];console.log(...movies);

Udskrifter:

Leon Love Actually the Lord of the Rings
const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Udskrifter:

1 4 5 7

Du bemærker måske, at både arrayet fra det første eksempel og sættet fra det andet er blevet udvidet til deres individuelle elementer (henholdsvis strenge og cifre). Hvordan kan dette være til nogen nytte, kan du spørge.

Den mest almindelige anvendelse er sandsynligvis at kombinere arrays. Hvis du nogensinde skulle gøre dette i tiderne før spredningsoperatøren, har du sandsynligvis brugt concat()metoden.

const shapes = ["triangle", "square", "circle"];const objects = ["pencil", "notebook", "eraser"];const chaos = shapes.concat(objects);console.log(chaos);

Udskrifter:

["Trekant", "firkantet", "cirkel", "blyant", "notesbog", "viskelæder"]

Det er ikke så dårligt, men hvad spread-operatøren tilbyder, er en genvej, der gør din kode også meget mere læsbar:

const chaos = [...shapes, ...objects];console.log(chaos);

Udskrifter:

["Trekant", "firkantet", "cirkel", "blyant", "notesbog", "viskelæder"]

Her er hvad vi ville få, hvis vi forsøgte at gøre det samme uden spredningsoperatøren:

const chaos = [shapes, objects];console.log(chaos);

Udskrifter:

[Array (3), Array (3)]

Hvad skete der her? I stedet for at kombinere arrays fik vi en chaosmatrix med shapesarrayet ved indeks 0 og objectsarrayet ved indeks 1.

Restparameteren (…)

Du kan tænke på restparameteren som det modsatte af spredningsoperatøren. Ligesom spredningsoperatøren giver dig mulighed for at udvide et array til dets individuelle elementer, giver resten-parameteren dig mulighed for at bundle elementer tilbage i et array.

Tildeling af værdier for en matrix til variabler

Lad os se på følgende eksempel:

const movie = ["Life of Brian", 8.1, 1979, "Graham Chapman", "John Cleese", "Michael Palin"];const [title, rating, year, ...actors] = movie;console.log(title, rating, year, actors);

Udskrifter:

"Brian's liv", 8.1, 1979, ["Graham Chapman", "John Cleese", "Michael Palin"]

Restparameteren lad os tage værdierne i moviearrayet og tildele dem til flere individuelle variabler ved hjælp af destrukturer. Denne måde title,, ratingog yearer tildelt de første tre værdier i arrayet, men hvor den virkelige magi sker er actors. Takket være actorsrestparameteren tildeles de resterende værdier af moviearrayet i form af et array.

Variadiske funktioner

Variadiske funktioner er funktioner, der tager et ubestemt antal argumenter. Et godt eksempel er sum()funktionen: vi kan ikke vide på forhånd, hvor mange argumenter der sendes til den:

sum(1, 2);sum(494, 373, 29, 2, 50067);sum(-17, 8, 325900);

I tidligere versioner af JavaScript håndteres denne form for funktion ved hjælp af argumentobjektet, som er et array-lignende objekt, der er tilgængeligt som en lokal variabel i hver funktion. Den indeholder alle værdier af argumenter, der sendes til en funktion. Lad os se, hvordan sum()funktionen kunne implementeres:

function sum() { let total = 0; for(const argument of arguments) { total += argument; } return total;}

Det virker, men det er langt fra perfekt:

  • Hvis du ser på definitionen for sum()funktionen, har den ingen parametre. Det kan være ret vildledende.
  • Det kan være svært at forstå, hvis du ikke er bekendt med argumentobjektet (som i: hvor pokker argumentskommer der fra ?!)

Sådan skriver vi den samme funktion med resten-parameteren:

function sum(...nums) { let total = 0; for(const num of nums) { total += num; } return total;}

Bemærk, at for...insløjfen også er blevet erstattet med for...ofsløjfen. Vi gjorde vores kode mere læselig og kortfattet på én gang.

Halleluja ES6!

Begynder du lige din rejse med programmering? Her er nogle artikler, der også kan interessere dig:

  • Er en kodende bootcamp noget for dig?
  • Er karriereændring virkelig mulig?
  • Hvorfor Ruby er et godt sprog at starte programmering med