Mit der 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 ES2015 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 ES2015 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 ES2015 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-Syntax (Parameter)

Rest-Syntax sieht genauso aus wie die Spread-Syntax und wird für das Destrukturieren von Arrays und Objekten eingesetzt. Rest-Syntax ist sozusagen das Gegenteil von Spread-Syntax:  Spread klappt die einzelnen Bestandteile eines Arrays aus, während Rest verschiedene einzelne Elemente zu einem Array zusammenfasst.

Spezifikationen

Spezifikation Status Kommentar
ECMAScript 2015 (6th Edition, ECMA-262) Standard Definiert in verschiedenen Abschnitten der Spezifikation: Array Initializer, Argument Lists
ECMAScript Latest Draft (ECMA-262) Entwurf  

Browser-Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Spread-Operation innerhalb von Array-Literalen 46 16 (16) Edge Nicht unterstützt 7.1
Spread-Operation innerhalb von Funktionsaufrufen 46 27 (27) Edge Nicht unterstützt 7.1
Spread-Operation beim Destrukturieren ("destructuring") 49 34 (34) Nicht unterstützt ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Spread-Operation innerhalb von Array-Literalen Nicht unterstützt 46 16.0 (16) Nicht unterstützt Nicht unterstützt 8 46
Spread-Operation innerhalb von Funktionsaufrufen Nicht unterstützt 46 27.0 (27) Nicht unterstützt Nicht unterstützt 8 46
Spread-Operation beim Destrukturieren ("destructuring") Nicht unterstützt Nicht unterstützt 34 (34) ? ? ? Nicht unterstützt

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mschleeweiss, kdex, theRealBaccata, schlagi123, sbusch, olhaar
Zuletzt aktualisiert von: mschleeweiss,