A JavaScriptben van egy beépített ... operátor, amely megkönnyíti a határozatlan számú elemmel való munkát. A szövegkörnyezettől függően rest operátornak vagy spread operátornak nevezik.
Amikor a ... egy értékadás bal oldalán jelenik meg, ezt a három pontot rest operátornak nevezzük. A három pontot egy változónévvel együtt rest elemnek hívjuk. Nulla vagy több értéket gyűjt össze, és egyetlen tömbbe tárolja őket.
const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];
a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]
Figyeld meg, hogy a JavaScriptben, néhány más nyelvvel ellentétben, egy rest elem után nem állhat vessző. Egy destrukturáló értékadásban az utolsó elemnek kell lennie. Az alábbi példa SyntaxError-t dob:
const [...items, last] = [2, 4, 8, 16]
A tömbökhöz hasonlóan a rest operátor arra is használható, hogy egy vagy több objektumtulajdonságot összegyűjtsön, és egyetlen objektumban tárolja őket.
const { street, ...address } = {
street: 'Platz der Republik 1',
postalCode: '11011',
city: 'Berlin',
};
street;
// => 'Platz der Republik 1'
address;
// => {postalCode: '11011', city: 'Berlin'}
Amikor a ... egy függvénydefinícióban az utolsó argumentuma mellett jelenik meg, azt a paramétert rest paraméternek nevezzük. Lehetővé teszi, hogy a függvény határozatlan számú argumentumot tömbként fogadjon el.
function concat(...strings) {
return strings.join(' ');
}
concat('one');
// => 'one'
concat('one', 'two', 'three');
// => 'one two three'
Amikor a ... egy értékadás jobb oldalán jelenik meg, spread operátorként ismert. Egy tömböt elemek listájává bont ki. A rest elemmel ellentétben egy tömbliterál kifejezésben bárhol szerepelhet, és egynél több is lehet belőle.
const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];
oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];
woow;
// => ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]
A tömbökhöz hasonlóan a spread operátor arra is használható, hogy tulajdonságokat másoljunk át egyik objektumból a másikba.
let address = {
postalCode: '11011',
city: 'Berlin',
};
address = { ...address, country: 'Germany' };
// => {
// postalCode: '11011',
// city: 'Berlin',
// country: 'Germany',
// }
A barátod, Linus mozdonyvezető, aki teherszerelvényeket vezet a városok között. Bár a vonatok kezelésében remekel, a logisztikában és a számítógépeknél már korántsem olyan ügyes. Szeretné igénybe venni a programozói segítségedet, hogy rendszerezze a vonatok adatait, és kijavítsa az útvonaladatok hibáit.
Gyakorlásképpen a rest vagy spread operátorral oldd meg az alábbi feladatokat.
A barátod eddig minden vagon azonosítóját (ID) nyilvántartotta, de soha nem tudhatja biztosan, hogy a rendszernek egy adott pillanatban hány vagont kell feldolgoznia.
A logisztikai program többi részének sokkal könnyebb dolga lenne, ha ezek az adatok egyetlen, egységes array-be lennének csomagolva.
Készíts egy getListOfWagons függvényt, amely tetszőleges számú vagon-ID-t fogad el, ezek mindegyike egy-egy vagon azonosítója.
Minden ID pozitív egész szám lesz.
A függvény ezután ezeket az ID-kat egyetlen array-ként adja vissza.
getListOfWagons(1, 7, 12, 3, 14, 8, 5);
// => [1, 7, 12, 3, 14, 8, 5]
Ezen a ponton kezded megérezni, milyen adatokról van szó, és hogyan használja őket a logisztikai program. Az azonosítórendszer a mozdonynak mindig a 1-es ID-t adja, a szerelvény többi vagonja pedig egy véletlenszerűen választott, 1-nél nagyobb ID-t kap.
A barátod két új vagont kapcsolt a szerelvényhez, és elfelejtette frissíteni a rendszert!
Most a vonatot leíró array első két vagonját a végére kell mozgatni, különben minden sorrend felborul.
Linus nagyon hálás lenne neked, ha kijavítanád a hibáit.
Készíts egy fixListOfWagons függvényt, amely egy array-t fogad el, benne az egyes vagonok id-jával.
A függvény return-nel adjon vissza egy array-t, amelyben az első két elem a array végére került, hogy a mozdony az élen lehessen.
eachWagonsID = [2, 5, 1, 7, 4, 12, 6, 3, 13];
fixListOfWagons(eachWagonsID);
// => [1, 7, 4, 12, 6, 3, 13, 2, 5]
Hoppá, úgy tűnik, néhány vagon eltűnt.
Szerencsére a barátod épp talált egy másik array-t, amely látszólag a hiányzó vagon-ID-kat tartalmazza, és szeretné, ha ezeket hozzáadnád a fő vagon-ID array-hez.
Annyira emlékszik, hogy a hiányzó értékeket közvetlenül a kijelölt mozdony után kell elhelyezni.
Ezek ismeretében írj egy correctListOfWagons nevű függvényt, amely két array-t vesz át argumentumként, bennük az egyes vagonok ID-jával.
A második array vagon-ID-it közvetlenül a mozdony (1-es ID) után kell beilleszteni az első array-be.
eachWagonsID = [1, 5, 20, 7, 4, 8];
missingWagons = [3, 17, 6, 15];
correctListOfWagons(eachWagonsID, missingWagons);
// => [1, 3, 17, 6, 15, 5, 20, 7, 4, 8]
Most, hogy minden vagonadat rendben van, a barátod szeretné, ha frissítenéd a rendszer útvonalinformációit.
A kiinduló útvonalinformációk egy object-ként álltak össze, és a barátod szeretné, ha a megadott kiegészítésekkel frissítenéd ezt.
Minden útvonal kicsit más információt igényel, ezért a barátod igazán egy általános megoldást szeretne.
Készíts egy extendRouteInformation függvényt, amely két objects-et fogad el.
Az első object azt tartalmazza, hogy a vonat útvonala mely városok között halad.
A második object további útvonal-részleteket tartalmaz, például a vonat sebességét vagy hosszát.
A függvény egy összevont object-et adjon vissza az összes útvonalinformációval.
A moreRouteInformation változó különböző tulajdonságokat tartalmazhat.
route = { from: 'Berlin', to: 'Hamburg' };
moreRouteInformation = { length: '100', speed: '50' };
extendRouteInformation(route, moreRouteInformation);
// => {from: "Berlin", to: "Hamburg", length: "100", speed: "50"}
A barátod észrevette, hogy nincs szüksége az érkezési időre az útvonalinformációkban. Ezért szeretné, ha leválasztanád az érkezési időt az útvonalinformációkról.
Készíts egy separateTimeOfArrival függvényt, amely egy objektumot fogad el az útvonalinformációkkal.
A függvény egy tömböt adjon vissza, amelynek első eleme az érkezési idő, a második eleme pedig egy objektum az útvonalinformációkkal, érkezési idő nélkül.
routeInformation = {
from: 'Berlin',
to: 'Hamburg',
length: '100',
timeOfArrival: '10:10',
};
separateTimeOfArrival(routeInformation);
// => ["10:10", {from: "Berlin", to: "Hamburg", length: "100"}]
Iratkozz fel az Exercism-re, hogy megtanuld és elsajátítsd a(z) JavaScript nyelvet 37 fogalom159 feladat segítségével, valódi emberi mentorálással, mindez ingyen.