MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Spread operator

This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

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 funzione 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

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262) Standard Defined in several sections of the specification: Array Initializer, Argument Lists

Compatibilità browser

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Spread operation in array literals No support 16 (16) No support No support 7.1
Spread operation in function calls No support 27 (27) No support No support 7.1
Spread operation in destructuring No support 34 (34) ? ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Spread operation in array literals No support No support 16.0 (16) No support No support 8 No support
Spread operation in function calls No support No support 27.0 (27) No support No support 8 No support
Spread operation in destructuring No support No support 34 (34) ? ? ? No support

Vedi inoltre

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: fgrilli, brakko
 Ultima modifica di: fgrilli,