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 ().

Składnia

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łady

Lepsze zastosowanie

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

Potężniejszy literał tablicowy

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.

Zastosowanie z new

Przykład: W ES5 nie jest możliwa kompozycja newapply. (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);

Kopiowanie tablicy

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

Ulepszone push

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

Użycie jedynie dla obiektów iterowalnych

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

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.

Specyfikacje

Specyfikacja Stan Komentasz
ECMAScript 2015 (6th Edition, ECMA-262) Standard Zdefiniowany w kilku sekcjach specyfikacji: Array Initializer, Argument Lists
ECMAScript (ECMA-262) Living Standard  

Kompatybilność przeglądarek

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Funkcja Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Operacja rozwinięcia w literałach tablicowych 46 16 (16) Edge No support 7.1
Operacja rozwinięcia w wywołaniach funkcji 46 27 (27) Edge No support 7.1
Operacja rozwinięcia w destrukturyzacji 49 34 (34) No support ? ?
Funkcja Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Operacja rozwinięcia w literałach tablicowych No support 46 16.0 (16) No support No support 8 46
Operacja rozwinięcia w wywołaniach funkcji No support 46 27.0 (27) No support No support 8 46
Operacja rozwinięcia w destrukturyzacji No support No support 34 (34) ? ? ? No support

Zobacz też