Spread-Operator

Mit dem Spread-Syntax kann ein einzelner Ausdruck dort expandiert werden, wo mehrere Argumente (bei Funktionsaufrufen), mehrere Elemente (für Array Literale) oder mehrere Variablen (für destrukturierende Anweisungen) erwartet werden.

Syntax

Für Funktionsaufrufe:

myFunction(...iterableObj);

Für Array Literale:

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

Beispiele

Ein besseres "apply"

Beispiel: für gewöhnlich wird Function.prototype.apply verwendet, wenn man die Elemente eines Arrays als Argumente eines Funktionsaufrufs nutzen möchte:

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

Mit dem ES6 Spread-Operator kann das nun wie folgt geschrieben werden:

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

Die Spread-Syntax kann für jedes beliebige Argument der Argumentliste verwendet werden, und sie kann auch mehrmals verwendet werden:

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

Ein mächtigeres Array Literal

Beispiel: wenn ohne den Spread-Operator ein neues Array erstellen will, bei dem ein Teil davon ein bereits bestehendes Array sein soll, dann ist die Array Literal Syntax nicht mehr ausreichend und man muss auf imperative Programmierung mit einer Kombination aus push, splice, concat, etc. zurückgreifen. Mit der Spread-Syntax jedoch kann das viel prägnanter ausgedrückt werden:

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

Genau wie der Spread-Operator für Argumentlisten kann ... überall im Array Literal verwendet werden, auch mehrmals.

"Apply" für "new"

Beispiel: in ES5 kann new nicht mit apply kombiniert werden (nach den ES5 Regeln führt apply einen [[Call]] aus, keinen [[Construct]]). Die Spread-Syntax von ES6 unterstützt dies auf ganz natürliche Weise:

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

Ein Array kopieren

var arr = [1,2,3];
var arr2 = [...arr]; // wie arr.slice()
arr2.push(4);        // arr2 wird [1,2,3,4], arr bleibt unverändert.

Ein besseres "push"

Beispiel: push wird oft verwendet um alle Elemente eines Arrays an das Ende eines bestehenden Arrays anzuhängen. Das wird in ES5 oft wie folgt umgesetzt:

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

Mit dem Spread-Operator von ES6 wird daraus:

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

Nur "apply" für iterables

var obj = {"key1":"value1"};
function myFunction(x) {
    console.log(x) // undefined
}
myFunction(...obj);
var args = [...obj];
console.log(args, args.length); // [] 0

Rest Operator

Es gibt einen anderen Operator - den Rest Operator - der genauso aussieht wie die Spread-Syntax und für das Destrukturieren von Arrays und Objekten eingesetztz wird. In einer Art und Weise sind Rest Element das Gegenteil von Spread Elementen - Spread Elemente expandieren ein Array in seinen Elementen und Rest Elemente sammeln mehrere Elemente und verdichten diese in ein einziges Element.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Rest Parameter
• Rest Operator