Johdanto hajautusoperaattoriin ja lepo-parametriin JavaScriptissä (ES6)

Sekä hajautusoperaattori että loput-parametri kirjoitetaan kolmina peräkkäisinä pisteinä (…). Onko heillä mitään muuta yhteistä?

Levitysoperaattori (…)

Levitysoperaattoriesiteltiin ES6: ssa. Se tarjoaa sinulle mahdollisuuden laajentaa toistettavia objekteja useiksi elementeiksi. Mitä se todella tarkoittaa? Tarkistetaan joitain esimerkkejä.

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

Tulosteet:

Leon Rakkaus Oikeastaan ​​Sormusten herra
const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Tulosteet:

1 4 5 7

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

Yleisin käyttö on luultavasti matriisien yhdistäminen. Jos joudut joskus tekemään tämän ennen levitysoperaattoria, käytit todennäköisesti concat()menetelmää.

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

Tulosteet:

["Kolmio", "neliö", "ympyrä", "lyijykynä", "muistikirja", "pyyhekumi"]

Se ei ole liian huono, mutta leviämisoperaattori tarjoaa pikakuvakkeen, joka tekee koodistasi myös helpommin luettavissa:

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

Tulosteet:

["Kolmio", "neliö", "ympyrä", "lyijykynä", "muistikirja", "pyyhekumi"]

Tässä on mitä saisimme, jos yritämme tehdä saman ilman levitysoperaattoria:

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

Tulosteet:

[Taulukko (3), Taulukko (3)]

Mitä täällä tapahtui? chaosMatriisien yhdistämisen sijaan saimme shapesmatriisin indeksillä 0 ja objectstaulukossa 1 olevan taulukon kanssa.

Loput parametri (…)

Voit ajatella loput-parametria päinvastaiseksi kuin levitysoperaattori. Aivan kuten levitysoperaattori antaa sinun laajentaa taulukkoa sen yksittäisiin elementteihin, loput -parametri antaa sinun niputtaa elementit takaisin taulukkoon.

Taulukon arvojen määrittäminen muuttujille

Katsotaanpa seuraava esimerkki:

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);

Tulosteet:

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

Loput parametrin avulla otetaan moviematriisin arvot ja osoitetaan ne useille yksittäisille muuttujille käyttämällä uudelleenjärjestelyä. Tällä tavalla title, ratingja yearniille määritetään taulukon kolme ensimmäistä arvoa, mutta missä todellinen taika tapahtuu actors. Loput-parametrin ansiosta actorshänelle määritetään moviematriisin jäljellä olevat arvot taulukon muodossa.

Variadiset toiminnot

Variadic functions are functions which take an indefinite number of arguments. One good example is the sum() function: we can’t know upfront how many arguments will be passed to it:

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

In earlier versions of JavaScript, this kind of function would be handled using the arguments object, which is an array-like object, available as a local variable inside every function. It contains all values of arguments passed to a function. Let’s see how the sum() function could be implemented:

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

It does work, but it’s far from perfect:

  • If you look at the definition for the sum() function, it doesn’t have any parameters. It can be quite misleading.
  • It can be hard to understand if you’re not familiar with the arguments object (as in: where the heck are the arguments coming from?!)

Näin kirjoitamme saman funktion loput parametrilla:

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

Huomaa, että for...insilmukka on myös korvattu for...ofsilmukalla. Teimme koodistamme heti luettavamman ja ytimekkäämmän.

Hallelujah ES6!

Oletko vasta aloittamassa matkaa ohjelmoinnilla? Tässä on joitain artikkeleita, jotka saattavat myös kiinnostaa sinua:

  • Onko koodaava bootcamp jotain sinulle?
  • Onko uramuutos todella mahdollista?
  • Miksi Ruby on hieno kieli, jolla voidaan aloittaa ohjelmointi