Spread operator

Lo spread operator permette di eseguire l'espansione di una espressione nei punti in cui argomenti multipli (per eseguire una chiamata di funzione) o multipli elementi (per array literal) sono attesi.

Sintassi

Per la chiamata di funzioni:

myFunction(...iterableObj);

Per gli array literal:

[...iterableObj, 4, 5, 6]

Per il destructuring:

[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

Esempi

Un migliore apply

Esempio: normalmente viene utilizzato Function.prototype.apply nei casi in cui si voglia chiamare una funziona passando un array come argomenti.

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

Con lo spread di ES6 è possibile riscrivere la precedente chiamata in questo modo:

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

Ogni argomento nella lista degli argomenti può essere passato utilizzando la sintassi dello spread operator (anche più volte all'interno della stessa chiamata)

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

Un array literal più potente 

Esempio: oggigiorno se si ha la neccessità di estendere un array includendogli un nuovo array al suo interno è necessario utilizzare combinazioni di metodi imperativi come push, splice, concat, etc. Con la sintassi dello spread operator invece l'operazione diviene molto più ridotta:

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]

Esattamente come nel caso di utilizzo tra gli argomenti di una funzione, lo spread operator può essere utilizzato più volte all'interno dello stesso literal array.

Apply e new

Esempio: In ES5 non è possibile comporre new e apply. (Nei termini dell'ES5, l'apply esegue una [[Call]] e non una [[Construct]].) In ES6 invece la sintassi dello spread operator supporta questa sintassi naturalmente:

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

Un miglior push

Esempio: push è spesso usato per eseguire la push di un array alla fine di un altro array. In ES5 questo è spesso fatto come:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
Array.prototype.push.apply(arr1, arr2);

In ES6 con lo spread operator diviene:

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

Specifiche

Compatibilità browser

Vedi inoltre

• Rest parameters