Operator spread w JavaScript

ECMAScript w wersji 6 wprowadził wiele nowych rozwiązań. Jednym z nich jest ciekawy operator o nazwie spread, który wprowadza możliwość łatwiejszego i szybszego wykonania niektórych operacji. Jego zadaniem jest „rozbicie” powtarzalnych kolekcji danych (tj. tablice, ciągi znaków) na pojedyncze elementy, które można przypisać do zmiennych lub używać w wieloargumentowych funkcjach.

Operator spread (tłumacząc na polski: rozkładać, rozwijać) w zasadzie nie wprowadza niczego, co nie byłoby możliwe do wykonania przy pomocy innych elementów języka. Daje jednak możliwość prostszego i bardziej czytelnego wykonania niektórych operacji. Symbolem tego operatora jest trzykropek “…”. Przykłady użycia prezentują fragmenty kodu poniżej.

Podstawowe użycie

Rozbicie tablicy na pojedyncze elementy:

var arr = ['a', 'b', 'c'];
...arr;

1 2	var arr = ['a', 'b', 'c']; ...arr;

Rozbicie tekstu na pojedyncze znaki:

var str = 'hello';
[...str];

1 2	var str = 'hello'; [...str];

Standardową metodą do uzyskania tego samego jest użycie funkcji “split”.

Argumenty funkcji

Przekazanie tablicy do wieloargumentowej funkcji:

function addThreeNumbers(x, y, z) {
    return x + y + z;
}

var result = addThreeNumbers(...[1, 2, 3]);

function addThreeNumbers(x, y, z) {

return x + y + z;

}

var result = addThreeNumbers(...[1, 2, 3]);

Przy pomocy funkcji “apply”, możemy wykonać tą samą operację.

Funkcja matematyczna:

var numbers = [9, 4, 7, 1];

Math.min(...numbers);

var numbers = [9, 4, 7, 1];

Math.min(...numbers);

Operator spread jako atrybut funkcji:

function myFunc(...args) {
    args.forEach(function(arg) {
        // do sth with arg
    });
}

myFunc(1, 2, 3, 4);

function myFunc(...args) {

args.forEach(function(arg) {

// do sth with arg

});

}

myFunc(1, 2, 3, 4);

Łączenie tablic

Dodanie tablicy na koniec lub początek:

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];

array1.push(...array2);
array1.unshift(...array2);

var array1 = [1, 2, 3];

var array2 = [4, 5, 6];

array1.push(...array2);

array1.unshift(...array2);

Dodanie tablicy w środek:

var array1 = ['dwa', 'trzy'];

var array2 = ['jeden', ...array1, 'cztery', 'pięć'];

var array1 = ['dwa', 'trzy'];

var array2 = ['jeden', ...array1, 'cztery', 'pięć'];

Starszą metodą, używaną do łączeni tablic jest funkcj “concat”.

Inne zastosowania

Unikalne element tablicy:

[...new Set([1,2,2,3,3])];

1	[...new Set([1,2,2,3,3])];

Zamiania liste nodów (NodeList) na tablicę:

[...document.querySelectorAll('div')]

1	[...document.querySelectorAll('div')]

Podsumowanie

Język JavaScript jest jednym z najpopularniejszych wśród web developerów, dlatego nic dziwnego że się zmienia i ewoluuje. Warto śledzić nowości, które ułatwiają i przyśpieszają programowanie. Zachęcam do odwiedzenia strony es6-features.org, w której można znaleźć opisy i przykłady wielu nowych elementów ECMAScript 6.