Spread syntax

Operator spread umożliwia rozwinięcie wyrażenia. Składnia rozwinięcia pozwala na rozwinięcie wyrażenia w miejscach, w których potrzebne jest wiele argumentów (do wywołań funkcji), wiele elementów (do literałów tablicowych) lub wiele zmiennych ().

Do wywołań funkcji:

mojaFunkcja(...iterowalnyObiekt);

Do literałów tablicowych:

[...iterowalnyObiekt, 4, 5, 6]

Do przypisań destrukturyzujących:

var [glowa, ...ogon] = [1, 2, 3, 4]

Przykład: powszechne jest użycie Function.prototype.apply w przypadkach, gdy chcesz użyć tablic jako argumentów funkcji.

function mojaFunkcja(x, y, z) { }
var args = [0, 1, 2];
mojaFunkcja.apply(null, args);

Ze składnią rozwinięcia (spread) ES2015 powyższy kod można zapisać jako:

function mojaFunkcja(x, y, z) { }
var args = [0, 1, 2];
mojaFunkcja(...args);

Dowolny argument w liście argumentów może użyć składni rozwinięcia i może być użyty wiele razy.

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

Przykład: Jeżeli masz tablicę i chcesz utworzyć nową tablicę z tą tablicą jako jej częścią, składnia literału tablicowego nie jest już wystarczająca i należy cofnąć się do programowania imperatywnego, użyć kombinacji push, splice, concat, itp. Z użyciem składni rozwinięcia wygląda to dużo prościej:

var czesci = ['ramiona', 'kolana'];
var rymowanka = ['glowa', ...czesci, 'i', 'palce']; // ["glowa", "ramiona", "kolana", "i", "palce"]

Tak samo jak rozwinięcie może być użyte do list argumentów, ... mogą być użyte wszędzie w literale tablicowym, także wiele razy.

Przykład: W ES5 nie jest możliwa kompozycja new z apply. (W ES5, apply wykonuje [[Call]], a nie [[Construct]].) W ES2015 składnia rozwinięcia wygląda następująco:

var daty = czytajDaty(bazaDanych);
var d = new Date(...daty);

var tablica = [1,2,3];
var tablica2 = [...tablica]; // jak tablica.slice()
tablica2.push(4); // tablica2 staje się [1,2,3,4], tablica pozostaje niezmieniona

Przykład: push jest często używany, by dodać tablicę na koniec innej tablicy. W ES5 jest to często osiągane przez:

var tablica1 = [0, 1, 2];
var tablica2 = [3, 4, 5];
// Dodaj wszystkie elementy z tablica2 do tablica1
Array.prototype.push.apply(tablica1, tablica2);

W ES2015 z rozwinięciem wygląda to następująco:

var tablica1 = [0, 1, 2];
var tablica2 = [3, 4, 5];
tablica1.push(...tablica2);

var obiekt = {"klucz1":"wartosc1"};
function mojaFunkcja(x) {
   /* ... */
}
// proba rozwinięcia nieiterowalnego elementu
// spowoduje błąd
mojaFunkcja(...obiekt);
var args = [...obiekt];
// TypeError: obiekt is not iterable

Operator reszty, który wygląda dokładnie jak składnia rozwinięcia (spread), jest używany do destrukturyzacji obiektów i tablic. W pewnym stopniu, elementy reszty są przeciwieństwem elementów rozwinięcia: rozwinięcie 'rozbija' tablicę na elementy, natomiast reszta zbiera wiele elementów i 'zwija' je w jeden element.

• Parametry reszty
• Operator reszty