From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../reference/operators/spread_operator/index.html | 219 +++++++++++++++++++++ 1 file changed, 219 insertions(+) create mode 100644 files/de/web/javascript/reference/operators/spread_operator/index.html (limited to 'files/de/web/javascript/reference/operators/spread_operator') diff --git a/files/de/web/javascript/reference/operators/spread_operator/index.html b/files/de/web/javascript/reference/operators/spread_operator/index.html new file mode 100644 index 0000000000..13b3070be5 --- /dev/null +++ b/files/de/web/javascript/reference/operators/spread_operator/index.html @@ -0,0 +1,219 @@ +--- +title: Spread-Operator +slug: Web/JavaScript/Reference/Operators/Spread_operator +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +
{{jsSidebar("Operators")}}
+ +

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 {{jsxref( "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 man 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: {{jsxref("Global_Objects/Array/push", "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

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Definiert in verschiedenen Abschnitten der Spezifikation: Array Initializer, Argument Lists
{{SpecName('ESDraft', '#sec-array-initializer')}}{{Spec2('ESDraft')}} 
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Spread-Operation innerhalb von Array-Literalen{{CompatChrome("46")}}{{CompatGeckoDesktop("16")}}{{CompatIE("Edge")}}{{CompatNo}}7.1
Spread-Operation innerhalb von Funktionsaufrufen{{CompatChrome("46")}}{{CompatGeckoDesktop("27")}}{{CompatIE("Edge")}}{{CompatNo}}7.1
Spread-Operation beim Destrukturieren ("destructuring"){{CompatChrome("49")}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Spread-Operation innerhalb von Array-Literalen{{CompatNo}}{{CompatChrome("46")}}{{CompatGeckoMobile("16")}}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Spread-Operation innerhalb von Funktionsaufrufen{{CompatNo}}{{CompatChrome("46")}}{{CompatGeckoMobile("27")}}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Spread-Operation beim Destrukturieren ("destructuring"){{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("34")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf