Uvod u operater širenja i parametar odmora u JavaScript-u (ES6)

Programiranje

I operator širenja i parametar ostatak zapisani su u tri uzastopne točke (...). Imaju li još nešto zajedničko?

Operator širenja (...)

Operator širenjauveden je u ES6. Pruža vam mogućnost proširenja iterabilnih objekata u više elemenata. Što to zapravo znači? Provjerimo neke primjere.

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

Ispisi:

Leon Love Zapravo Gospodar prstenova 
const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Ispisi:

1 4 5 7

Mogli biste primijetiti da su i niz iz prvog primjera i skup iz drugog prošireni u svoje pojedinačne elemente (nizove i znamenke). Možete li pitati kako ovo može biti od koristi?

Vjerojatno je najčešća kombinacija nizova. Ako ste to ikad morali učiniti u vrijeme prije operatora širenja, vjerojatno ste koristili concat()metodu.

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

Ispisi:

[„Trokut“, „kvadrat“, „krug“, „olovka“, „bilježnica“, „gumica“]

To nije loše, ali ono što nudi operator širenja je prečac, što čini i vaš kod čitljivijim:

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

Ispisi:

[„Trokut“, „kvadrat“, „krug“, „olovka“, „bilježnica“, „gumica“]

Evo što bismo dobili kada bismo pokušali učiniti isto bez operatora širenja:

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

Ispisi:

[Niz (3), Niz (3)]

Što se ovdje dogodilo? Umjesto kombiniranja nizova, dobili smo chaosniz s shapesnizom na indeksu 0 i objectsnizom na indeksu 1.

Ostali parametar (...)

O parametru rest možete razmišljati kao o suprotnosti operatora širenja. Baš kao što vam operator širenja omogućuje proširivanje niza u pojedinačne elemente, parametar ostatak omogućuje grupiranje elemenata natrag u niz.

Dodjeljivanje vrijednosti niza varijablama

Pogledajmo sljedeći primjer:

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

Ispisi:

"Život Briana", 8.1, 1979, ["Graham Chapman", "John Cleese", "Michael Palin"]

Parametar ostatak uzmimo vrijednosti movieniza i dodijelimo ih nekoliko pojedinačnih varijabli pomoću destrukturiranja. Na taj način title, ratingte yearsu dodijeljene prve tri vrijednosti u polju, ali gdje je prava čarolija se događa actors. Zahvaljujući parametru rest actorsdobiva dodijeljene preostale vrijednosti movieniza u obliku niza.

Varijadne funkcije

Varijadne funkcije su funkcije koje uzimaju neograničen broj argumenata. Dobar primjer je sum()funkcija: ne možemo unaprijed znati koliko će joj argumenata biti proslijeđeno:

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

U ranijim verzijama JavaScripta ovakva bi se funkcija obrađivala pomoću objekta argument, koji je objekt nalik na niz, dostupan kao lokalna varijabla unutar svake funkcije. Sadrži sve vrijednosti argumenata proslijeđenih funkciji. Pogledajmo kako bi se sum()funkcija mogla implementirati:

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

Djeluje, ali daleko je od savršenog:

  • Ako pogledate definiciju sum()funkcije, ona nema nikakve parametre. To može biti prilično varljivo.
  • Teško je razumjeti ako niste upoznati s objektom argument (kao u: odakle argumentsdolaze ?!)

Evo kako bismo napisali istu funkciju s parametrom rest:

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

Imajte na umu da je for...inpetlja također zamijenjena for...ofpetljom. Naš smo kôd odjednom učinili čitljivijim i sažetijim.

Aleluja ES6!

Tek započinjete svoje putovanje s programiranjem? Evo nekoliko članaka koji bi vas također mogli zanimati:

  • Je li kodiranje bootcampa nešto za vas?
  • Je li promjena karijere zaista moguća?
  • Zašto je Ruby sjajan jezik za započinjanje programiranja