15 JavaScript-Array-Methoden, die Sie heute beherrschen sollten
Webentwickler aller Könnensstufen, vom Anfänger bis zum Codierungsexperten, erkennen die Bedeutung von JavaScript für die Entwicklung moderner Websites. JavaScript ist so dominant, dass es eine wichtige Fähigkeit ist, zu wissen, ob Sie Web-Apps erstellen.
Einer der leistungsstärksten Bausteine, die in die JavaScript-Sprache integriert sind, sind Arrays. Arrays werden häufig in vielen Programmiersprachen verwendet und sind zum Speichern von Daten nützlich.
JavaScript enthält auch nützliche Funktionen, die als Array-Methoden bezeichnet werden. Hier sind fünfzehn, die Sie sich genau ansehen sollten, um Ihre Fähigkeiten als Entwickler zu erweitern.
Was sind Array-Methoden?
Array-Methoden sind in JavaScript integrierte Funktionen, die Sie auf Ihre Arrays anwenden können. Jede Methode verfügt über eine eindeutige Funktion, die eine Änderung oder Berechnung für Ihr Array durchführt, sodass Sie keine allgemeinen Funktionen von Grund auf neu codieren müssen.
Array-Methoden in JavaScript werden mit einer Punktnotation ausgeführt, die an Ihre Array-Variable angehängt ist. Da es sich nur um JavaScript-Funktionen handelt, enden sie immer in Klammern, die optionale Argumente enthalten können. Hier ist eine Methode, die an ein einfaches Array namens myArray angehängt ist .
let myArray = [1,2,3]; myArray.pop();Dieser Code würde eine Methode namens pop auf das Array anwenden.
Beispielarray
Verwenden Sie für jedes Beispiel ein Beispielarray, das wir myArray nennen, um die Methoden auszuführen. Fühlen Sie sich frei, Ihre Konsole und Code hochzuziehen.
let myArray = [2,4,5,7,9,12,14];In diesen Beispielen wird davon ausgegangen, dass Sie die Grundlagen von JavaScript kennen und wissen, wie es funktioniert . Wenn Sie das nicht tun, sind wir alle hier, um zu lernen und zu wachsen.
Erfahren Sie mehr über diese fünfzehn leistungsstarken Array-Methoden!
1. Array.push ()
Was es tut: push () nimmt Ihr Array und fügt ein oder mehrere Elemente am Ende des Arrays hinzu. Anschließend wird die neue Länge des Arrays zurückgegeben. Diese Methode ändert Ihr vorhandenes Array.
Fügen Sie dem Array die Nummer 20 hinzu, indem Sie push () ausführen und 20 als Argument verwenden.
let myArray = [2,4,5,7,9,12,14];
myArray.push(20);Überprüfen Sie, ob es funktioniert hat:
console.log(myArray); [2,4,5,7,9,12,14,20]Durch Ausführen der push () -Methode auf myArray wurde der im Argument angegebene Wert in das Array eingefügt. In diesem Fall 20. Wenn Sie myArray in der Konsole überprüfen, wird der Wert jetzt am Ende des Arrays hinzugefügt.
2. Array.concat ()
Was es tut: concat () kann zwei oder mehr Arrays zu einem neuen Array zusammenführen. Die vorhandenen Arrays werden nicht geändert, sondern ein neues erstellt.
Nehmen Sie myArray und führen Sie ein Array namens newArray darin zusammen.
let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]Diese Methode wirkt Wunder, wenn Sie mit mehreren Arrays oder Werten arbeiten, die Sie kombinieren müssen, und dies alles in einem ziemlich einfachen Schritt, wenn Sie Variablen verwenden.
3. Array.join ()
Was es tut: join () nimmt ein Array und verkettet den Inhalt des Arrays, getrennt durch ein Komma. Das Ergebnis wird in eine Zeichenfolge eingefügt. Sie können ein Trennzeichen angeben, wenn Sie eine Alternative zu einem Komma verwenden möchten.
Sehen Sie sich an, wie dies mit myArray funktioniert. Verwenden Sie zuerst die Standardmethode ohne Trennzeichen, für die ein Komma verwendet wird.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); "2,4,5,7,9,12,14"JavaScript gibt eine Zeichenfolge aus, wobei jeder Wert im Array durch ein Komma getrennt ist. Sie können ein Argument in der Funktion verwenden, um das Trennzeichen zu ändern. Beobachten Sie es mit zwei Argumenten: einem einzelnen Leerzeichen und einer Zeichenfolge.
myArray.join(' ');
"2 4 5 7 9 12 14" myArray.join(' and ');
"2 and 4 and 5 and 7 and 9 and 12 and 14"Das erste Beispiel ist ein Leerzeichen, das eine Zeichenfolge bildet, die Sie leicht lesen können.
Im zweiten Beispiel wird ('und') verwendet , und hier sind zwei Dinge zu wissen.
Zuerst verwenden wir das Wort 'und', um die Werte zu trennen. Zweitens gibt es auf beiden Seiten des Wortes 'und' ein Leerzeichen. Dies ist eine wichtige Sache, die Sie bei der Verwendung von join () beachten sollten. JavaScript liest Argumente wörtlich; Wenn dieser Platz weggelassen wird, wird alles zusammengedrückt (dh "2and4and5 …" usw.). Keine sehr lesbare Ausgabe!
4. Array.forEach ()
Was es tut: forEach () (Groß- und Kleinschreibung beachten !) Führt eine Funktion für jedes Element in Ihrem Array aus. Diese Funktion ist eine beliebige Funktion, die Sie erstellen, ähnlich wie die Verwendung einer "for" -Schleife zum Anwenden einer Funktion auf ein Array, jedoch mit viel weniger Code-Arbeit.
ForEach () hat noch ein bisschen mehr zu bieten . Schauen Sie sich die Syntax an und führen Sie dann eine einfache Funktion aus, um sie zu demonstrieren.
myArray.forEach(function(item){
//code
});
Wir verwenden myArray , forEach () wird mit der Punktnotation angewendet. Sie platzieren die Funktion, die Sie verwenden möchten, in der Argumentklammer, die im Beispiel Funktion (Element) ist .
Schauen Sie sich die Funktion (Element) an . Dies ist die Funktion, die in forEach () ausgeführt wird und über ein eigenes Argument verfügt. Wir nennen das Argument item . Zu diesem Argument sind zwei Dinge zu wissen:
- Wenn forEach () Ihr Array durchläuft, wird der Code auf dieses Argument angewendet. Stellen Sie sich das als temporäre Variable vor, die das aktuelle Element enthält.
- Sie wählen den Namen des Arguments, es kann beliebig benannt werden. Normalerweise wird dies als etwas bezeichnet, das das Verständnis erleichtert, wie "Element" oder "Element".
Schauen Sie sich dieses einfache Beispiel an. Addieren Sie zu jedem Wert 15 und lassen Sie die Konsole das Ergebnis anzeigen.
myArray.forEach(function(item){
console.log(item + 15);
});
In diesem Beispiel wird item als Variable verwendet, daher wird die Funktion so geschrieben, dass jedem Wert über item 15 hinzugefügt wird. Die Konsole druckt dann die Ergebnisse. So sieht es in einer Google Chrome-Konsole aus.
Das Ergebnis ist jede Zahl im Array, aber mit 15 hinzugefügt!
5. Array.map ()
Was es tut: map () führt eine Funktion für jedes Element in Ihrem Array aus und platziert das Ergebnis in einem neuen Array.
Das Ausführen einer Funktion für jedes Element klingt nach forEach (). Der Unterschied besteht darin, dass map () beim Ausführen ein neues Array erstellt. forEach () erstellt kein neues Array automatisch, Sie müssten dazu eine bestimmte Funktion codieren.
Verwenden Sie map (), um den Wert jedes Elements in myArray zu verdoppeln und in einem neuen Array zu platzieren. Sie werden die gleiche Funktions- (Element-) Syntax für etwas mehr Übung sehen.
let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});Überprüfen Sie die Ergebnisse in der Konsole.
console.log(doubleArray); [4,8,10,14,18,24,28]myArray ist unverändert:
console.log(myArray); [2,4,5,7,9,12,14]6. Array.unshift ()
Funktionsweise: Ähnlich wie die push () -Methode verwendet die unshift () -Methode Ihr Array und fügt anstelle des Endes ein oder mehrere Elemente am Anfang des Arrays hinzu und gibt die neue Länge des Arrays zurück. Diese Methode ändert Ihr vorhandenes Array.
let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);Wenn Sie das Array an der Konsole protokollieren, sollte am Anfang des Arrays die Nummer 0 angezeigt werden.
console.log(myArray); [0, 2,4,5,7,9,12,14]7. Array.sort ()
Was es tut: Das Sortieren ist eine der häufigsten Operationen, die an einem Array ausgeführt werden, und ist sehr nützlich. Die sort () – Array-Methode von JavaScript kann verwendet werden, um ein Array von Zahlen oder sogar Zeichenfolgen mit nur einer einzigen Codezeile zu sortieren. Diese Operation ist vorhanden und gibt das sortierte Array durch Ändern des ursprünglichen Arrays zurück. Nehmen Sie diesmal einen anderen Satz von Zahlen für myArray .
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Da die Sortierung an Ort und Stelle erfolgt, müssen Sie keine separate Variable für das sortierte Array deklarieren.
console.log(myArray); [10, 12, 34, 55, 65]Standardmäßig ist das Array in aufsteigender Reihenfolge sortiert. Sie können jedoch optional eine benutzerdefinierte Funktion an die sort () -Methode übergeben, um das Array auf die gewünschte Weise zu sortieren. In diesem Fall habe ich eine benutzerdefinierte Pfeilfunktion übergeben , um das Array numerisch in aufsteigender Reihenfolge zu sortieren.
8. Array.reverse ()
Was es tut: Wie der Name schon sagt, wird die reverse () -Methode verwendet, um die Reihenfolge der Elemente im Array umzukehren. Beachten Sie, dass dies nicht den Inhalt des Arrays umkehrt, sondern nur die Reihenfolge selbst. Hier ist ein Beispiel, um diese Methode besser zu verstehen:
let myArray = [2,4,5,7,9,12,14];
myArray.reverse()Protokollieren Sie die Ausgabe an der Konsole, um den Vorgang zu überprüfen.
console.log(myArray); [14, 12, 9, 7, 5, 4, 2]Wie Sie sehen können, wurde die Reihenfolge der Elemente umgekehrt. Bisher war das Element am letzten Index (Element 14 am Index 6) jetzt das Element am nullten Index und so weiter.
9. Array.slice ()
Was es tut: Slice () wird verwendet, um eine flache Kopie eines Teils eines Arrays abzurufen. Einfacher ausgedrückt können Sie mit dieser Methode bestimmte Elemente aus einem Array anhand ihres Index auswählen. Sie können den Startindex des Elements, von dem Sie abrufen möchten, und Elemente sowie optional auch den Endindex übergeben.
Wenn Sie den Endindex nicht angeben, werden alle Elemente vom Startindex bis zum Ende des Arrays abgerufen. Diese Methode gibt ein neues Array zurück und ändert das vorhandene nicht.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);Im obigen Code werden alle Elemente vom zweiten bis zum letzten Index abgerufen, da der Endindexparameter nicht übergeben wird. Protokollieren Sie beide Arrays in der Konsole.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Offensichtlich wird das ursprüngliche Array nicht durch die Slice () -Methode geändert und gibt stattdessen ein neues Array zurück, das in der slicedArray- Variablen gespeichert ist. Hier ist ein Beispiel, in dem der Endindexparameter auch an die Slice () -Methode übergeben wird.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]10. Array.splice ()
Funktionsweise: splice () ist eine hilfreiche Array-Methode zum Entfernen oder Ersetzen von Elementen im vorhandenen Array. Durch Angabe des Index und der Anzahl der zu löschenden Elemente wird das Array geändert.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);Im obigen Beispiel wird das myArray- Array aus Index 2 gespleißt und 3 Elemente werden daraus entfernt. Das Array besteht jetzt aus:
[2, 4, 12, 14]Um die Elemente zu ersetzen, anstatt sie nur zu löschen, können Sie eine beliebige Anzahl optionaler Parameter an die Elemente übergeben, durch die Sie ersetzen möchten, wie folgt:
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]11. Array.filter ()
Was es tut: Die filter () -Methode ist eine nützliche Array-Methode, die eine Funktion mit einem Test übernimmt und ein neues Array mit allen Elementen zurückgibt, die diesen Test bestehen. Diese Methode wird verwendet, um die benötigten Elemente aus den anderen Elementen herauszufiltern. Die Filterung erfolgt mit einer Funktion, die einen booleschen Wert zurückgibt.
Hier ist ein Beispiel für die filter () -Methode, mit der nur die Elemente aus dem Array abgerufen werden, die durch 2 teilbar sind.
let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);Im obigen Beispiel wird eine Pfeilfunktion als Parameter übergeben, der jede Zahl aus dem ursprünglichen Array entnimmt und mit dem Operator modulo ( % ) und equality ( === ) prüft, ob sie durch 2 teilbar ist. So sieht die Ausgabe aus:
[2, 4, 12, 14]12. Array.reduce ()
Was es tut: reduct () ist eine Array-Methode, die eine Reduzierungsfunktion übernimmt und sie für jedes Array-Element ausführt, um bei der Rückgabe einen einzelnen Wert auszugeben. Es benötigt eine Reduzierfunktion mit einer Akkumulatorvariablen und einer aktuellen Elementvariablen als erforderlichen Parametern. Der Wert des Akkumulators wird über alle Iterationen hinweg gespeichert und schließlich nach der letzten Iteration zurückgegeben.
Ein beliebter Anwendungsfall dieser Methode ist die Berechnung der Summe aller Elemente im Array. Die Implementierung dieser Funktionalität ist wie folgt:
let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);Im obigen Beispiel wird 0 als zweiter Parameter übergeben, der als Anfangswert der Akkumulatorvariablen verwendet wird. Die Variable sumOfNums enthält den Rückgabewert der Methode redu () , der voraussichtlich die Summe aller Elemente im Array ist.
console.log(sumOfNums); 5313. Array.includes ()
Was es tut: Die Suche nach einem Element in einem Array, um zu überprüfen, ob es vorhanden ist, ist eine Operation, die häufig verwendet wird. Daher verfügt JavaScript über eine integrierte Methode in Form der Array-Methode include () . So können Sie es verwenden:
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));Diese Methode verwendet einen erforderlichen Parameter, das zu suchende Element und einen optionalen Parameter, den Array-Index, von dem aus die Suche gestartet werden soll. Abhängig davon, ob dieses Element vorhanden ist oder nicht, gibt es true bzw. false zurück. Daher lautet die Ausgabe:
true
false
true
false14. Array.indexOf ()
Funktionsweise: Mit der Methode indexOf () wird der Index ermittelt, bei dem das erste Auftreten eines angegebenen Elements im Array gefunden werden kann. Obwohl es der include () -Methode ähnlich ist, gibt diese Methode den numerischen Index oder -1 zurück, wenn das Element nicht im Array vorhanden ist.
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf("4"));
console.log(myArray.indexOf(9, 2));Die Methode indexOf () verwendet die strikte Gleichheit, um zu überprüfen, ob ein Element vorhanden ist. Dies bedeutet, dass sowohl der Wert als auch der Datentyp identisch sein sollten. Der optionale zweite Parameter verwendet den Index, um die Suche zu starten. Basierend auf diesen Kriterien sieht die Ausgabe folgendermaßen aus:
1
-1
415. Array.fill ()
Was es tut: Oft müssen Sie alle Werte im Array auf einen statischen Wert wie 0 setzen. Anstatt eine Schleife zu verwenden, können Sie die fill () -Methode für denselben Zweck ausprobieren. Sie können diese Methode für ein Array mit 1 erforderlichen Parameter aufrufen: dem Wert, mit dem das Array gefüllt werden soll, und 2 optionalen Parametern: dem Start- und dem Endindex, zwischen denen gefüllt werden soll. Diese Methode ändert das vorhandene Array.
let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);Wenn Sie die Ausgabe an der Konsole protokollieren, sehen Sie Folgendes:
console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]Nächste Schritte auf Ihrer JavaScript-Reise
Arrays sind ein wichtiger Bestandteil der JavaScript-Sprache, weshalb so viele Methoden integriert sind, die Ihnen das Leben als Entwickler erleichtern. Der beste Weg, diese fünfzehn Methoden zu beherrschen, ist das Üben.
Während Sie weiterhin JavaScript lernen, ist MDN eine hervorragende Ressource für detaillierte Dokumentationen. Machen Sie es sich in der Konsole bequem und verbessern Sie Ihre Kenntnisse mit den besten JavaScript-Editoren für Programmierer. Sind Sie bereit, Ihre Website mit JavaScript zu erstellen? Schauen Sie sich einige Frameworks an, die Sie in Betracht ziehen können.