1 files changed, 219 insertions, 0 deletions
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
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Mit der <strong>Spread-Syntax</strong> 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.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Für Funktionsaufrufe:</p>
+
+<pre class="brush: js">myFunction(...iterableObj);
+</pre>
+
+<p>Für Array-Literale:</p>
+
+<pre class="brush: js">[...iterableObj, 4, 5, 6]</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ein_besseres_apply">Ein besseres "apply"</h3>
+
+<p><strong>Beispiel:</strong> Für gewöhnlich wird {{jsxref( "Function.prototype.apply")}} verwendet, wenn man die Elemente eines Arrays als Argumente eines Funktionsaufrufs nutzen möchte:</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);</pre>
+
+<p>Mit dem ES2015 Spread-Operator kann das nun wie folgt geschrieben werden:</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);</pre>
+
+<p>Die Spread-Syntax kann für jedes beliebige Argument der Argumentliste verwendet werden, und sie kann auch mehrmals verwendet werden:</p>
+
+<pre class="brush: js">function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);</pre>
+
+<h3 id="Ein_mächtigeres_Array-Literal">Ein mächtigeres Array-Literal</h3>
+
+<p><strong>Beispiel:</strong> 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 <code>push</code>, <code>splice</code>, <code>concat</code>, etc. zurückgreifen. Mit der Spread-Syntax jedoch kann das viel prägnanter ausgedrückt werden:</p>
+
+<pre class="brush: js">var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes']; // <span class="objectBox objectBox-array"><a class="objectLink "><span class="arrayLeftBracket">[</span></a><span class="objectBox objectBox-string">"head"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"shoulders"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"knees"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"and"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"toes"</span></span>]
+</pre>
+
+<p>Genau wie der Spread-Operator für Argumentlisten kann <code>...</code> überall im Array-Literal verwendet werden, auch mehrmals.</p>
+
+<h3 id="Apply_für_new">"Apply" für "new"</h3>
+
+<p><strong>Beispiel:</strong> In ES5 kann <code>new</code> nicht mit <code>apply</code> kombiniert werden (nach den ES5-Regeln führt <code>apply</code> einen <code>[[Call]]</code> aus, keinen <code>[[Construct]]</code>). Die Spread-Syntax von ES2015 unterstützt dies auf ganz natürliche Weise:</p>
+
+<pre class="brush: js">var dateFields = readDateFields(database);
+var d = new Date(...dateFields);</pre>
+
+<h3 id="Ein_Array_kopieren">Ein Array kopieren</h3>
+
+<pre>var arr = [1,2,3];
+var arr2 = [...arr]; // wie arr.slice()
+arr2.push(4);        // arr2 wird [1,2,3,4], arr bleibt unverändert.</pre>
+
+<h3 id="Ein_besseres_push">Ein besseres "push"</h3>
+
+<p><strong>Beispiel:</strong> {{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:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Append all items from arr2 onto arr1
+Array.prototype.push.apply(arr1, arr2);</pre>
+
+<p>Mit dem Spread-Operator von ES2015 wird daraus:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1.push(...arr2);</pre>
+
+<h3 id="Nur_apply_für_iterables">Nur "apply" für iterables</h3>
+
+<pre>var obj = {"key1":"value1"};
+function myFunction(x) {
+    console.log(x) // undefined
+}
+myFunction(...obj);
+var args = [...obj];
+console.log(args, args.length); // [] 0</pre>
+
+<h2 id="Rest-Syntax_(Parameter)">Rest-Syntax (Parameter)</h2>
+
+<p>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.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definiert in verschiedenen Abschnitten der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Spread-Operation innerhalb von Array-Literalen</td>
+   <td>{{CompatChrome("46")}}</td>
+   <td>{{CompatGeckoDesktop("16")}}</td>
+   <td>{{CompatIE("Edge")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Spread-Operation innerhalb von Funktionsaufrufen</td>
+   <td>{{CompatChrome("46")}}</td>
+   <td>{{CompatGeckoDesktop("27")}}</td>
+   <td>{{CompatIE("Edge")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Spread-Operation beim Destrukturieren ("destructuring")</td>
+   <td>{{CompatChrome("49")}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Spread-Operation innerhalb von Array-Literalen</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("46")}}</td>
+   <td>{{CompatGeckoMobile("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>{{CompatChrome("46")}}</td>
+  </tr>
+  <tr>
+   <td>Spread-Operation innerhalb von Funktionsaufrufen</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("46")}}</td>
+   <td>{{CompatGeckoMobile("27")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>{{CompatChrome("46")}}</td>
+  </tr>
+  <tr>
+   <td>Spread-Operation beim Destrukturieren ("destructuring")</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest Parameter</a></li>
+ <li><a href="http://exploringjs.com/es6/ch_destructuring.html#sec_rest-operator">Rest Operator</a></li>
+</ul>