--- title: Array Comprehensions slug: Web/JavaScript/Reference/Operators/Array_comprehensions tags: - JavaScript - Non-standard - Operator - Reference translation_of: Archive/Web/JavaScript/Array_comprehensions ---
Nicht standardisiert. Nicht einsetzen!
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.
{{jsSidebar("Operators")}}

Die Array Comprehensions 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!

Syntax

[for (x of iterable) x]
[for (x of iterable) if (condition) x]
[for (x of iterable) for (y of iterable) x + y]

Beschreibung

In Array Comprehensions können zwei Arten von Komponenten eingesetzt werden:

Der for-of Iterator ist immer die erste Komponente. Mehrere for-of Iteratoren oder if Statements sind erlaubt.

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.

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

var numbers = [1, 2, 3, 4];
var doubled = [for (i of numbers) i * 2];
console.log(doubled); // logs 2,4,6,8

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

var doubled = numbers.map(i => i * 2);

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

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

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

var evens = numbers.filter(i => i % 2 === 0);

{{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:

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

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

Der Input einer Array Comprehension muss nicht selbst ein Array sein; Iteratoren und Generatoren könne ebenfalls benutzt werden.

Auch Strings können als Input genutzt werden;

Even strings may be used as input; um die Filter- und Map-Aktionen (unter Array-ähnlichen Objekten) oben zu erreichen:

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'

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

Beispiele

Einfache Array Comprehensions

[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"]

Array Comprehensions mit if Statement

var years = [1954, 1974, 1990, 2006, 2010, 2014];
[for (year of years) if (year > 2000) year];
// [2006, 2010, 2014]
[for (year of years) if (year > 2000) if (year < 2010) year];
// [2006], the same as below:
[for (year of years) if (year > 2000 && year < 2010) year];
// [2006]

Array Comprehensions verglichen zu map und filter

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:

var numbers = [1, 2, 3];

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

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

Array Comprehensions mit zwei Arrays

Einsatz von zwei for-of Iteratoren, um mit Arrays zu arbeiten:

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 > 1) for (j of letters) if(j > 'a') i + j]
// ["2b", "2c", "3b", "3c"], the same as below:

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

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

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

Spezifikationen

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.

Browserkompatibilität

{{Compat("javascript.operators.array_comprehensions")}}

Unterschiede zu den älteren JS1.7/JS1.8 Comprehensions

JS1.7/JS1.8 Comprehensions wurden von Gecko 46 entfernt ({{bug(1220564)}}).

Alte Comprehensions Syntax (nicht mehr benutzen!):

[X for (Y in Z)]
[X for each (Y in Z)]
[X for (Y of Z)]

Unterschiede:

Siehe Bug 1220564, Kommentar 42 für Vorschläge zum Aktualisieren von Code.

Siehe auch