Jede JavaScript-Array-Methode

ES6-Methoden

ES6, die Kurzform von ECMAScript 6, ist die Version von JavaScript, die im Juni 2015 veröffentlicht wurde. Es scheint, dass die Entwickler, die JavaScript pflegen, meinen Geburtsmonat mögen, denn zu diesem Zeitpunkt wurden die meisten ihrer Versionen veröffentlicht.

Wenn Sie JavaScript gerade erst lernen, wird ES6 Ihnen das Leben sehr viel leichter machen. Es bietet nicht nur Array-Methoden, sondern auch Dinge wie Destrukturierung, Pfeilfunktionen, eine bessere Möglichkeit, objektorientierten und modularen Code zu schreiben, und vieles mehr.

Die meisten dieser ES6-Array-Methoden nehmen eine Callback-Funktion und werden daher Array-Methoden höherer Ordnung genannt. Pfeilfunktionen sind in Funktionen höherer Ordnung sehr verbreitet, da sie unseren Code vereinfachen

Die map-Methode

Wenn es eine ES6-Array-Methode gibt, die Sie fast immer verwenden werden, dann ist es diese Methode. Sie ist meine beste Array-Methode sowohl in JavaScript als auch in Python. Auch wenn einige JavaScript-Entwickler versucht haben, map vor ES6 zu implementieren, wurde die Standardmethode map in JavaScript mit ES6 eingeführt. Im folgenden Codeschnipsel habe ich map auf drei Arten implementiert:

• Mit normalen JavaScript-Funktionen: Hier habe ich zwei Argumente an die Funktion übergeben, zuerst item, das Element, mit dem ich etwas tun möchte, und ein optionales Argument, index, das der Index jedes Elements ist
• Mit Pfeilfunktionen: Ich habe auch zwei Argumente wie im ersten Beispiel übergeben, aber die Callback-Funktion ist hier eine Pfeilfunktion, was den Code viel übersichtlicher macht.
• Ich habe auch Pfeilfunktionen verwendet, aber ich habe nur ein Argument übergeben – das Element, das ich iterieren möchte. Das ist nützlich, wenn ich den Index nicht benötige.

Die Filtermethode

Die Methode filter ist eine weitere Array-Methode höherer Ordnung, die Sie heute verwenden sollten. Was filter tut, ist einfach. Bei einem Array von Elementen wollen wir ein neues Array aus dem ursprünglichen Array zurückgeben, wobei eine bestimmte Bedingung true ist. Die Callback-Funktion muss einen booleschen Wert zurückgeben, und das Element, das die Bedingung erfüllt, ist das, was im neuen Array sein wird.

Die reduce-Methode

Das ist sehr schön, und ich denke, es ist die schwierigste von allen Methoden, die ich bisher erwähnt habe. Bei dieser Methode wird ein bestimmter Rückruf verwendet, um das Array zu reduzieren. Wenn ich zum Beispiel die Summe aller Elemente in einem Array oder das Produkt aller Elemente in einem Array finden will, ist diese Methode eine schöne Methode, die man verwenden kann, anstatt eine Schleife zu machen und die ursprüngliche Summe oder das Produkt zu erhöhen.

Die forEach-Methode

Diese Methode ist ähnlich wie die map-Methode, aber in diesem Fall gibt sie kein neues Array zurück. Es handelt sich eher um eine normale for-Schleife in JavaScript, aber auf eine sauberere und fortschrittlichere Weise. Sie benötigt drei Parameter, wie Sie vielleicht schon wissen. Der erste ist das Element im Array, der zweite ist der Index des Elements (der optional ist), und der dritte ist das Array-Objekt, zu dem das aktuelle Element gehört.

Im folgenden Codeschnipsel habe ich forEach verwendet, um das Document Object Model (DOM) zu manipulieren, was ziemlich cool ist. Ich kann das Array aktualisieren, und die Listenelemente, die im DOM gerendert werden, werden automatisch geändert.

Die concat-Methode

Es gibt Fälle, in denen Sie zwei oder mehr Arrays miteinander verbinden oder zusammenführen möchten. Dann wird diese Funktion sehr nützlich sein. Der Aufruf von concat auf zwei Arrays erzeugt ein neues Array, das aus den beiden kombinierten Arrays besteht.

Die Methoden every und some

Diese Methoden sind nützlich, wenn Sie wissen wollen, ob alle Elemente in einem Array eine Bedingung erfüllen bzw. ob einige der Elemente in einem Array eine Bedingung erfüllen.

Weitere Methoden sind:

Die Füllmethode

Füllt jedes Element im Array mit einem Wert, der als Parameter übergeben wird: .fill(1) // .

Die entries-Methode

Damit verhält sich das Array wie ein Objekt mit einem Schlüssel-Wert-Paar, wobei der Schlüssel der Index und der Wert das Element ist.

Die find-Methode

Diese Methode gibt das erste Element in einem Array zurück, das einen Test besteht. Sie benötigt eine Callback-Funktion, die einen booleschen Wert zurückgibt.

Die Splice-Methode

Diese Methode benötigt eine unendliche Anzahl von Parametern – die ersten beiden sind der Index, bei dem man mit dem Einfügen und Entfernen von Elementen beginnen möchte, bzw. die Anzahl der Elemente, die man entfernen möchte – und die restlichen Parameter sind die Elemente, die man dem Array hinzufügen möchte. Sie gibt ein Array der entfernten Elemente zurück und verändert das Array.

Die Reverse-Methode

Die Reverse-Methode kehrt das Array um. Beachte, dass sie es mutiert, was bedeutet, dass sie das Array verändert, anstatt nur eine Kopie davon zu erstellen.

Die join-Methode

Diese Methode verwandelt ein Array in ein Array in einen String. Beachte, dass sie das Array nicht verändert – sie erstellt nur eine Kopie davon. Das Gegenteil dieser Methode ist die Methode split, die eine Zeichenkette in ein Array umwandelt. Sie nimmt einen String als Parameter, der verwendet wird, um jedes Element des Arrays zu verbinden.

Die flache Methode

Die Methode flat ist eine neue Methode, die in ES11 hinzugefügt wurde (ES11 wurde im Juni dieses Jahres erstellt). Diese Methode flacht ein Array ab.

Angenommen, wir haben ein Array, das ein Array enthält, und wir wollen die Summe und das Produkt jedes Elements in den Arrays innerhalb des Arrays finden. Was ich meine, ist, dass, wenn ich ein Array habe, das durch , ] definiert ist, die Summe 10 und das Produkt 24 sein sollte.

Eine Möglichkeit, dies zu tun, besteht darin, eine Schleife durch das anfängliche Array zu machen und durch jedes Element zu schleifen und die Summe und das Produkt zu erhalten.

Mit ES6 kann ich eine Schleife durch das anfängliche Array machen und die reduce-Methode verwenden, um die Summe und das Produkt jedes Elements im Hauptarray zu erhalten – und dies verwenden, um die Gesamtsumme und das Produkt zu erhalten. Aber mit dem flat-Array kann ich das Haupt-Array flach machen und so ein einzelnes Array zurückgeben, das nur Zahlen enthält, und ich kann die reduce-Methode darauf anwenden.

Die flatMap-Methode

Dies ist die Kombination von flat und map. Sie ordnet jedes Element im Array einer bestimmten Callback-Funktion zu und flacht dann das resultierende Array ab.

Angenommen, wir möchten das Quadrat jedes Elements in einem nicht flachen Array ermitteln und es flachen. Diese Methode wird uns das Leben leichter machen. In dem Teil, in dem ich die flatMap-Methode im unten stehenden Codeschnipsel verwendet habe, nimmt sie ein Element, das ein Array ist, und gibt ein neues Array zurück, das das Quadrat der Elemente ist. Und schließlich wird das resultierende Array abgeflacht.