Johdanto hajotusoperaattorille ja lepoparametrille JavaScript-ohjelmassa (ES6)

Sekä hajautusoperaattori että loput parametri kirjoitetaan kolmena peräkkäisenä pisteenä (…). Onko heillä jotain muuta yhteistä?

lähde

Levitysoperaattori (…)

Levitysoperaattori otettiin käyttöön ES6: ssa. Se tarjoaa sinulle mahdollisuuden laajentaa toistettavissa olevat objektit useisiin elementteihin. Mitä se tarkoittaa? Katsotaanpa joitain esimerkkejä.

const-elokuvat = ["Leon", "Rakkaus tosiasiallisesti", "Renkaiden herra"];
console.log (... elokuvia);

tulosteita:

Leon Rakastaa Oikeasti Renkaiden Herraa
vakionumerot = uusi sarja ([1, 4, 5, 7]);
console.log (... numerot);

tulosteita:

1 4 5 7

Saatat huomata, että sekä ensimmäisen esimerkin taulukko että toisen joukko on laajennettu niiden yksittäisiin elementteihin (merkkijonot ja numerot vastaavasti). Kuinka tästä voi olla hyötyä, voit kysyä.

Yleisin käyttö on todennäköisesti taulukkojen yhdistäminen. Jos jouduit koskaan tekemään tämän levitysoperaattoria edeltävinä aikoina, käytit todennäköisesti concat () -menetelmää.

muodonmuodot = ["kolmio", "neliö", "ympyrä"];
const esineet = ["lyijykynä", "muistikirja", "pyyhekumi"];
const kaaos = muodot.kukka (esineet);
console.log (kaaos);

tulosteita:

[“Kolmio”, “neliö”, “ympyrä”, “lyijykynä”, “muistikirja”, “pyyhekumi”]

Se ei ole kovin huono, mutta haja-operaattori tarjoaa pikakuvakkeen, joka tekee koodistasi myös paremmin luettavissa olevan:

const chaos = [... muodot, ... esineet];
console.log (kaaos);

tulosteita:

[“Kolmio”, “neliö”, “ympyrä”, “lyijykynä”, “muistikirja”, “pyyhekumi”]

Tässä on mitä saamme, jos yrittäisimme tehdä saman ilman levitysoperaattoria:

const chaos = [muodot, esineet];
console.log (kaaos);

tulosteita:

[Ryhmä (3), ryhmä (3)]

Mitä täällä tapahtui? Taulukoiden yhdistämisen sijasta saimme kaaosmatriisin, jonka muodot ovat taulukossa indeksissä 0 ja objektimatriisissa indeksissä 1.

lähde

Lepoparametri (…)

Voit ajatella lepoparametria vastakohtana hajotusoperaattorille. Aivan kuten hajautusoperaattori antaa sinun laajentaa taulukon yksittäisiin elementteihin, loput-parametrilla voit niputtaa elementit takaisin taulukkoon.

Taulukon arvojen osoittaminen muuttujille

Katsotaanpa seuraavaa esimerkkiä:

const movie = ["Brianin elämä", 8.1, 1979, "Graham Chapman", "John Cleese", "Michael Palin"];
const [nimi, luokitus, vuosi, ... näyttelijät] = elokuva;
console.log (nimi, luokittelu, vuosi, näyttelijät);

tulosteita:

”Brianin elämä”, 8.1, 1979, [“Graham Chapman”, “John Cleese”, “Michael Palin”]

Lepoparametrin avulla voimme ottaa elokuvamatriisin arvot ja määrittää ne useille yksittäisille muuttujille hajottamalla. Tällä tavalla otsikolle, arvosanalle ja vuodelle annetaan taulukon kolme ensimmäistä arvoa, mutta missä todellinen taikuus tapahtuu, on näyttelijät. Lepoparametrin ansiosta näyttelijät saavat elokuvamatriisin jäljellä olevat arvot taulukon muodossa.

Variadiset toiminnot

Vaihtoehtoiset funktiot ovat toimintoja, jotka ottavat määräämättömän määrän argumentteja. Yksi hyvä esimerkki on summa () -funktio: emme voi tietää etukäteen, kuinka monta argumenttia sille toimitetaan:

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

Aikaisemmissa JavaScript-versioissa tällaista toimintoa käsitellään argumenttiobjektilla, joka on matriisimainen objekti, joka on saatavana paikallisena muuttujana jokaisen toiminnon sisällä. Se sisältää kaikki funktiolle siirretyt argumentit. Katsotaanpa kuinka sum () -toiminto voitaisiin toteuttaa:

funktion summa () {
  lasketaan yhteensä = 0;
  varten (const argument of argument)) {
    yhteensä + = argumentti;
  }
  tuotto yhteensä;
}

Se toimii, mutta se ei ole kaukana täydellisyydestä:

  • Jos tarkastelet summan () funktion määritelmää, siinä ei ole mitään parametreja. Se voi olla melko harhaanjohtava.
  • Voi olla vaikea ymmärtää, jos et tunne argumenttiobjektia (kuten: missä helvetissä argumentit tulevat ?!)

Näin kirjoitamme saman toiminnon lepoparametrilla:

funktion summa (... lukumäärä) {
  lasketaan yhteensä = 0;
  (lukumäärä)
    yhteensä + = num;
  }
  tuotto yhteensä;
}

Huomaa, että silmukka for ... on myös korvattu silmukan for ... silmukalla. Teimme koodistamme paremmin luettavissa ja ytimekäs kerralla.

Hallelujah ES6!

Aloitatko matkan vain ohjelmoinnilla? Tässä on artikkeleita, jotka saattavat kiinnostaa myös sinua:

  • Onko koodaava käynnistysleiri jotain sinulle?
  • Onko uranvaihto todella mahdollista?
  • Miksi Ruby on loistava kieli ohjelmoinnin aloittamiseen