Rest és spread ebben a kurzusban:

A(z) Rest és spread fogalomról

A JavaScript beépített ... operátora megkönnyíti a határozatlan számú elemmel való munkát. A kontextustól függően rest operátornak vagy spread operátornak nevezik.

Rest operátor

Rest elemek

Amikor a ... egy értékadás bal oldalán jelenik meg, ezt a három pontot rest operátornak nevezik. A három pontot a változónévvel együtt rest elemnek hívják. Nulla vagy több értéket gyűjt össze, és egyetlen tömbbe menti őket.

const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];

a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]

Vedd figyelembe, hogy a JavaScriptben, néhány más nyelvtől eltérően, a rest elem után nem állhat vessző. Egy destrukturáló értékadásban muszáj az utolsó elemnek lennie. Az alábbi példa SyntaxError-t dob:

const [...items, last] = [2, 4, 8, 16]

Rest tulajdonságok

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ároljon.

const { street, ...address } = {
  street: 'Platz der Republik 1',
  postalCode: '11011',
  city: 'Berlin',
};

street;
// => 'Platz der Republik 1'

address;
// => {postalCode: '11011', city: 'Berlin'}

Rest paraméterek

Amikor a ... egy függvénydefinícióban az utolsó argumentuma mellett jelenik meg, azt a paramétert rest paraméternek nevezik. Lehetővé teszi, hogy a függvény határozatlan számú argumentumot fogadjon el tömb formájában.

function concat(...strings) {
  return strings.join(' ');
}

concat('one');
// => 'one'

concat('one', 'two', 'three');
// => 'one two three'

Spread

Spread elemek

Amikor a ... egy értékadás jobb oldalán jelenik meg, spread operátornak nevezik. 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]

Spread tulajdonságok

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',
// }