We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 Latest Draft (ECMA-262) Draft  

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!

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ż

Autorzy i etykiety dokumentu

Autorzy tej strony: Konrad007, greg606, artus9033, kdex, kamce, grzim
Ostatnia aktualizacja: Konrad007,