path: root/files/de/web/javascript/reference/operators/array_comprehensions/index.html

---
title: Array Comprehensions
slug: Web/JavaScript/Reference/Operators/Array_comprehensions
tags:
  - JavaScript
  - Non-standard
  - Operator
  - Reference
translation_of: Archive/Web/JavaScript/Array_comprehensions
---
<div class="warning"><strong>Nicht standardisiert. Nicht einsetzen!</strong><br>
Die Array Comprehensions Syntax ist nicht Standardisiert und wurde mit Firefox 58 entfernt. Zukünftig müssen {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Arrow_functions", "Pfeilfunktionen", "", 1)}}, und {{jsxref("Operators/Spread_operator", "Spread Syntax", "", 1)}} eingesetzt werden.</div>

<div>{{jsSidebar("Operators")}}</div>

<p>Die <strong>Array Comprehensions</strong> Syntax war ein JavaScript Ausdruck, welcher es erlaubt schnell ein neues Array auf Basis eines existierenden zu erstellen. Jedoch wurde diese vom Standard und der Firefox Implementierung entfernt. Nicht mehr einsetzen!</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">[for (x of iterable) x]
[for (x of iterable) if (condition) x]
[for (x of iterable) for (y of iterable) x + y]
</pre>

<h2 id="Beschreibung">Beschreibung</h2>

<p>In Array Comprehensions können zwei Arten von Komponenten eingesetzt werden:</p>

<ul>
 <li>{{jsxref("Statements/for...of", "for...of")}} und</li>
 <li>{{jsxref("Statements/if...else", "if")}}</li>
</ul>

<p>Der <code>for-of</code> Iterator ist immer die erste Komponente. Mehrere <code>for-of</code> Iteratoren oder <code>if</code> Statements sind erlaubt.</p>

<p>Array Comprehension wurden zuvor für den ECMAScript 2016 Standard vorgeschlagen und ist eine nützliche Kurzform zum Erstellen von neuen Arrays auf Basis des Inhalts andere.Comprehensions können oft statt den Aufrufen {{jsxref("Array.prototype.map", "map()")}} und {{jsxref("Array.prototype.filter", "filter()")}} eingesetzt werden oder als Möglichkeit beide zu kombinieren.</p>

<p>Die folgende Comprehension nimmt ein Array von Zahlen und erstellt ein neues Array, dass das Doppelte jeder Zahl enthält.</p>

<pre class="brush: js">var numbers = [1, 2, 3, 4];
var doubled = [for (i of numbers) i * 2];
console.log(doubled); // logs 2,4,6,8
</pre>

<p>Das ist äquivalent zu der folgenden {{jsxref("Array.prototype.map", "map()")}} Operation:</p>

<pre class="brush: js">var doubled = numbers.map(i =&gt; i * 2);
</pre>

<p>Comprehensions können ebenfalls für das suchen bestimmter Elemente eingesetzt werden. Hier ist eine Comprehension welche nur gerade Zahlen auswählt:</p>

<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
var evens = [for (i of numbers) if (i % 2 === 0) i];
console.log(evens); // logs 2,22,30
</pre>

<p>{{jsxref("Array.prototype.filter", "filter()")}} kann mit dem gleichen Ergebnis benutzt werden:</p>

<pre class="brush: js">var evens = numbers.filter(i =&gt; i % 2 === 0);
</pre>

<p>{{jsxref("Array.prototype.map", "map()")}} und {{jsxref("Array.prototype.filter", "filter()")}} Operation können in einer einzigen Array Comprehension kombiniert werden. Hier ist ein Beispiel, welches auf gerade Zahlen filtert und diese dann verdopelt:</p>

<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
var doubledEvens = [for (i of numbers) if (i % 2 === 0) i * 2];
console.log(doubledEvens); // logs 4,44,60
</pre>

<p><span id="result_box" lang="de"><span>Die eckigen Klammern einer Array </span></span>Comprehension<span lang="de"><span> führen einen impliziten Block für Gültigkeitsbereiche ein. Neue Variablen (wie i im Beispiel) werden so behandelt, als währen sie mit </span></span>{{jsxref("Statements/let","let")}} deklariert. Das bedeutet, dass sie nicht außerhalb der Comprehension sichtbar sind.</p>

<p>Der Input einer Array Comprehension muss nicht selbst ein Array sein; <a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteratoren und Generatoren</a> könne ebenfalls benutzt werden.</p>

<p>Auch Strings können als Input genutzt werden;</p>

<p>Even strings may be used as input; <span id="result_box" lang="de"><span>um die Filter- und Map-Aktionen (unter Array-ähnlichen Objekten) oben zu erreichen:</span></span></p>

<pre class="brush: js">var str = 'abcdef';
var consonantsOnlyStr = [for (c of str) if (!(/[aeiouAEIOU]/).test(c)) c].join(''); // 'bcdf'
var interpolatedZeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0'
</pre>

<p>Auch hier wird das Eingabeformat nicht beibehalten, so dass man {{jsxref("Array.prototype.join", "join()")}} benutzen muss, um wieder einen String zu bekommen.</p>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Einfache_Array_Comprehensions">Einfache Array Comprehensions</h3>

<pre class="brush:js">[for (i of [1, 2, 3]) i * i ];
// [1, 4, 9]

var abc = ['A', 'B', 'C'];
[for (letters of abc) letters.toLowerCase()];
// ["a", "b", "c"]</pre>

<h3 id="Array_Comprehensions_mit_if_Statement">Array Comprehensions mit if Statement</h3>

<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014];
[for (year of years) if (year &gt; 2000) year];
// [2006, 2010, 2014]
[for (year of years) if (year &gt; 2000) if (year &lt; 2010) year];
// [2006], the same as below:
[for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year];
// [2006]
</pre>

<h3 id="Array_Comprehensions_verglichen_zu_map_und_filter">Array Comprehensions verglichen zu <code>map</code> und <code>filter</code></h3>

<p>Ein einfacher Weg um Generator Comprehension Syntax zu verstehen ist es sie mit den Array {{jsxref("Array.map", "map")}} und {{jsxref("Array.filter", "filter")}} Methoden zu vergleichen:</p>

<pre class="brush: js">var numbers = [1, 2, 3];

numbers.map(function (i) { return i * i });
numbers.map(i =&gt; i * i);
[for (i of numbers) i * i];
// all are [1, 4, 9]

numbers.filter(function (i) { return i &lt; 3 });
numbers.filter(i =&gt; i &lt; 3);
[for (i of numbers) if (i &lt; 3) i];
// all are [1, 2]
</pre>

<h3 id="Array_Comprehensions_mit_zwei_Arrays">Array Comprehensions mit zwei Arrays</h3>

<p>Einsatz von zwei for-of Iteratoren, um mit Arrays zu arbeiten:</p>

<pre class="brush: js">var numbers = [1, 2, 3];
var letters = ['a', 'b', 'c'];

var cross = [for (i of numbers) for (j of letters) i + j];
// ["1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c"]

var grid = [for (i of numbers) [for (j of letters) i + j]];
// [
//  ["1a", "1b", "1c"],
//  ["2a", "2b", "2c"],
//  ["3a", "3b", "3c"]
// ]

[for (i of numbers) if (i &gt; 1) for (j of letters) if(j &gt; 'a') i + j]
// ["2b", "2c", "3b", "3c"], the same as below:

[for (i of numbers) for (j of letters) if (i &gt; 1) if(j &gt; 'a') i + j]
// ["2b", "2c", "3b", "3c"]

[for (i of numbers) if (i &gt; 1) [for (j of letters) if(j &gt; 'a') i + j]]
// [["2b", "2c"], ["3b", "3c"]], not the same as below:

[for (i of numbers) [for (j of letters) if (i &gt; 1) if(j &gt; 'a') i + j]]
// [[], ["2b", "2c"], ["3b", "3c"]]
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<p>War initial im ECMAScript 2015 Entwurf, wurde jedoch in der Überarbeitung 27 (August 2014) entfernt. Für Spezifikationssemantik muss in älteren Überarbeitungen von ES2015 nachgeschaut werden.</p>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>



<p>{{Compat("javascript.operators.array_comprehensions")}}</p>

<h2 id="Unterschiede_zu_den_älteren_JS1.7JS1.8_Comprehensions">Unterschiede zu den älteren JS1.7/JS1.8 Comprehensions</h2>

<div class="warning">JS1.7/JS1.8 Comprehensions wurden von Gecko 46 entfernt ({{bug(1220564)}}).</div>

<p><strong>Alte Comprehensions Syntax (nicht mehr benutzen!):</strong></p>

<pre class="brush: js example-bad">[X for (Y in Z)]
[X for each (Y in Z)]
[X for (Y of Z)]
</pre>

<p>Unterschiede:</p>

<ul>
 <li>ESNext Comprehensions erstellen einen Gültigkeitsbereich pro "for" Statement statt einen für die komplette Comprehension.
  <ul>
   <li>Alt: <code>[...(()=&gt;x for (x of [0, 1, 2]))][1]() // 2</code></li>
   <li>Neu: <code>[...(for (x of [0, 1, 2]) ()=&gt;x)][1]() // 1, jede Iteration erstellt eine frische Bindung zu x. </code></li>
  </ul>
 </li>
 <li>ESNext Comprehensions beginnen mit "for" statt eines Zuweisungsausdrucks.
  <ul>
   <li>Alt: <code>(i * 2 for (i of numbers))</code></li>
   <li>Neu: <code>(for (i of numbers) i * 2)</code></li>
  </ul>
 </li>
 <li>ESNext Comprehensions können mehrere <code>if</code> und <code>for</code> Komponenten haben.</li>
 <li>ESNext Comprehensions funktionieren nur mit <code>{{jsxref("Statements/for...of", "for...of")}}</code> und nicht mit <code>{{jsxref("Statements/for...in", "for...in")}}</code> Iteration.</li>
</ul>

<p>Siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1220564#c42">Bug 1220564, Kommentar 42</a> für Vorschläge zum Aktualisieren von Code.</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{jsxref("Statements/for...of", "for...of")}}</li>
 <li>{{jsxref("Operators/Generator_comprehensions", "Generator Comprehensions", "" ,1)}}</li>
</ul>