JavaScript-Listenverständnis

1. Die syntaktische Erklärung für das Verständnis von JavaScript-Listen
2. JavaScript-Listenverständnis mit Karte
3. Verwenden Sie die for..of-Syntax, um eine Liste zu durchlaufen
4. Abschluss

Viele Programmiersprachen unterstützen eine bestimmte Sprachsyntax, die als Listenverständnis bekannt ist. Wir können dieses Listenverständnis verwenden, um eine neue Liste aus einer bestehenden Liste abzuleiten.

Mit der List Comprehension-Syntax, einem JavaScript-Ausdruck, können Sie leicht eine neue Liste basierend auf einer vorhandenen erstellen. Der Standard und die Implementierung von Firefox enthalten es jedoch nicht mehr.

Die Standardisierung des Listenverständnisses in ECMAScript 2016 wurde ursprünglich vorgeschlagen, weil es eine praktische Abkürzung zum Erstellen einer neuen Liste basierend auf dem Inhalt einer bestehenden bietet.

List Comprehension war früher eine vom JavaScript Committee TC39 vorgeschlagene Ergänzung zu JavaScript, wurde aber zugunsten anderer JavaScript-Listentechniken wie filter() und map() aufgegeben.

Als Alternative zur List-Comprehension-Syntax kann bei einer Liste die Methode filter() oder map() verwendet werden. Die List-Comprehension-Syntax in JavaScript ist ein anderer Name dafür.

Die syntaktische Erklärung für das Verständnis von JavaScript-Listen

Durch Anwenden eines bestimmten Filters auf eine bestehende Liste mit der Methode filter() können Sie aus der ursprünglichen Liste eine neue Liste erstellen.

Der Filter ist ein JavaScript-Ausdruck, der ein Element einer Liste zurückgibt, nachdem er die Testfunktion bestanden hat, die Sie im Funktionsrumpf definieren.

Beispiel:

Nehmen wir eine Liste als names = ["Rex", "Neon", "Jake", "Eid"], um die Methode filter() in JavaScript zu demonstrieren und eine neue Liste zu erstellen.

Code:

let names = ['Rex', 'Neon', 'Jake', 'Eid'];

let new_list = names.filter(function(name) {
  return name.includes('e');
});

console.log(new_list);

Hier können wir eine Ausgabe erhalten, wie unten gezeigt.

Der Filter erstellt eine neue Liste, um Änderungen an der ursprünglichen Liste zu verhindern.

Wie Sie sehen können, ist die filter()-Methode ein guter Ersatz für den Listenverständnisfilter.

Die Pfeilfunktion-Syntax ermöglicht es Ihnen auch, den Methodenrumpf in einer einzigen Zeile zusammenzufassen.

Code:

let names = ['Rex', 'Neon', 'Jake', 'Eid'];

let new_list = names.filter(name => name.includes('e'));

console.log(new_list);

Als Ausgabe können wir die gleiche Ausgabe aus dem vorherigen Beispiel wie [ 'Rex', 'Neon', 'Jake' ] erhalten.

Hinweis: Eine der neuen Funktionen in der ES6-Edition von JavaScript ist die Pfeilfunktion. Im Vergleich zu herkömmlichen Funktionen ermöglicht es Ihnen, Funktionen übersichtlicher zu gestalten.

Zum Beispiel:

Wenn dies die ursprüngliche Funktion ist:

let testFunction = function(m, n) {
  return m * n;
}

Durch Verwendung der Pfeilfunktion kann Folgendes als einfachere Version dieser Funktion geschrieben werden:

let testFunction = (m, n) => m * n;

Sehen wir uns als Nächstes an, wie die Methode map() eine Liste durchlaufen kann.

JavaScript-Listenverständnis mit Karte

Das Listenverständnis kann auch wiederholt auf jedes Listenelement angewendet werden, während Sie es durchgehen.

Mit der Methode map() können Sie, genau wie mit der Methode filter(), eine neue Liste aus einer bestehenden erstellen.

Die Methode map() iteriert jedoch ohne Filterung über die vorhandene Liste, sodass Sie Code innerhalb der Callback-Funktion frei ausführen können.

Beispiel:

Betrachten wir die Liste als names = ["Rex", "Neon", "Jake", "Eid"], um die Verwendung der map()-Methode in JavaScript zu zeigen und eine neue Liste zu erstellen, indem wir jedem Element der Liste den Buchstaben "o" hinzufügen.

Code:

let names = ['Rex', 'Neon', 'Jake', 'Eid'];

let new_list = names.map(function(name) {
  return name + 'o';
});

console.log(new_list);

Hier erhalten wir, wie unten gezeigt, das Ergebnis.

Die Funktion map() kann mit der Pfeilfunktion auf eine einzige Zeile komprimiert werden.

Code:

let names = ['Rex', 'Neon', 'Jake', 'Eid'];

let new_list = names.map(name => name + 'o');

console.log(new_list);

Als Ergebnis erhalten wir dieselbe Ausgabe wie im vorherigen Beispiel wie [ 'Rexo', 'Neono', 'Jakeo', 'Eido' ].

Sie können jede JavaScript-Liste durchlaufen und eine bestimmte Callback-Funktion mit der Methode map() ausführen.

Verwenden Sie die for..of-Syntax, um eine Liste zu durchlaufen

Alternativ können Sie auch wie unten gezeigt mit dem Operator for..of durch eine Liste iterieren.

let names = ['Rex', 'Neon', 'Jake', 'Eid'];
let new_list = [];

for (const name of names) {
  new_list.push(name + 'o');
}

console.log(new_list);

Hier können wir die Ausgabe wie folgt erhalten.

Unter Berücksichtigung des obigen Beispiels erstellt jede Iteration eine neue name-Variable, die das in der Liste gespeicherte Element enthält.

Schieben Sie innerhalb der Methode for..of jedes name-Element in die new_list. Für jedes Element haben wir die Freiheit, den gewünschten Operator zu wählen.

Abschluss

Dieser Artikel drückt die Methoden aus, die beim Listenverständnis in JavaScript verwendet werden, indem er die Funktionen wie die filter-Funktion, die map-Funktion und die for..of-Iteration untersucht.