Nicht standardisiert. Nicht einsetzen!
Die Array Comprehensions Syntax ist nicht Standardisiert und wurde mit Firefox 58 entfernt. Zukünftig müssen Array.prototype.map, Array.prototype.filter, Pfeilfunktionen, und Spread Syntax eingesetzt werden.

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 map() und 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 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

filter() kann mit dem gleichen Ergebnis benutzt werden:

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

map() und 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 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 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 map und 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

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung InternetNode.js
Grundlegende Unterstützung
VeraltetNicht standardisiert
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung 30 — 58IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung 30 — 58Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Neinnodejs Keine Unterstützung Nein

Legende

Keine Unterstützung  
Keine Unterstützung
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.

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:

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

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

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: schlagi123
Zuletzt aktualisiert von: schlagi123,