Bevezetés a spread operátorhoz és a rest paraméterhez a JavaScript-ben (ES6)

Mind a spread operátor, mind a rest paraméter három egymást követő pontként van felírva (…). Van még valami közös bennük?

A szóráskezelő (…)

A szóráskezelőES6-ban vezették be. Lehetővé teszi az iterálható objektumok több elemre történő kibővítését. Mit jelent valójában? Nézzünk meg néhány példát.

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

Nyomatok:

Leon Szerelem Valójában a Gyűrűk Ura
const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Nyomatok:

1 4 5 7

Észreveheti, hogy mind az első példa tömbje, mind a második halmaza kibővült az egyes elemekre (karakterláncokra és számjegyekre). Kérdezheti, hogy ez hogyan használható.

A leggyakoribb felhasználás valószínűleg a tömbök kombinálása. Ha valaha is ezt kellett tennie a spread operátor előtti időkben, akkor valószínűleg ezt a concat()módszert használta .

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

Nyomatok:

[„Háromszög”, „négyzet”, „kör”, „ceruza”, „jegyzetfüzet”, „radír”]

Ez nem túl rossz, de amit a spread operátor kínál, az egy parancsikon, amely a kódot is olvashatóbbá teszi:

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

Nyomatok:

[„Háromszög”, „négyzet”, „kör”, „ceruza”, „jegyzetfüzet”, „radír”]

Íme, mit kapnánk, ha megpróbálnánk ugyanezt tenni a spread operátor nélkül :

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

Nyomatok:

[Tömb (3), tömb (3)]

Mi történt itt? A tömbök egyesítése helyett egy chaostömböt kaptunk, amelynek tömbje a shapes0. indexben található, és az objectstömb az 1. indexben található.

A többi paraméter (…)

A többi paramétert a spread operátor ellentéteként gondolhatja el. Ahogy a spread operátor lehetővé teszi egy tömb kiterjesztését az egyes elemeibe, a többi paraméter lehetővé teszi az elemek visszacsomagolását egy tömbbe.

Egy tömb értékeinek hozzárendelése a változókhoz

Vessünk egy pillantást a következő példára:

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

Nyomatok:

"Brian élete", 1979. 8.1., [Graham Chapman, "John Cleese", "Michael Palin"]

A többi paraméterrel vegyük fel a movietömb értékeit és rendeljünk hozzá több egyedi változóhoz destrukturálást. Így title, ratingés yearhozzá van rendelve az első három érték a tömb, de hol az igazi varázslat történik actors. A többi paraméternek köszönhetően actorsa movietömb többi értékét hozzárendelik tömb formájában.

Variadikus funkciók

A variadikus függvények olyan funkciók, amelyek határozatlan számú argumentumot vesznek fel. Egy jó példa a sum()függvény: nem tudhatjuk előre, hogy hány argumentumot adunk át neki:

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

A JavaScript korábbi verzióiban ezt a fajta függvényt az argumentum objektummal kellene kezelni, amely egy tömbszerű objektum, amely helyi függvényként elérhető minden függvényen belül. A függvénynek átadott argumentumok összes értékét tartalmazza. Nézzük meg, hogyan lehet a sum()funkciót megvalósítani:

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

Működik, de korántsem tökéletes:

  • Ha megnézzük a sum()függvény definícióját , akkor annak nincsenek paraméterei. Elég félrevezető lehet.
  • Nehéz megérteni, ha nem ismeri az argumentumok objektumát (mint például: honnan a fenéből argumentsszármaznak ?!)

Így írhatjuk ugyanazt a függvényt a többi paraméterrel:

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

Vegye figyelembe, hogy a for...inhurok is kicserélődött a for...ofhurokra. Kódunkat egyszerre olvashatóbbá és tömörebbé tettük.

Hallelujah ES6!

Csak programozással kezded az utad? Íme néhány cikk, amelyek szintén érdekelhetik Önt:

  • Van valami számodra egy kódoló bootcamp?
  • Tényleg lehetséges a pályaváltás?
  • Miért nagyszerű nyelv a Ruby a programozáshoz?