Home-theater-designers
Webentwickler aller Erfahrungsstufen, vom Anfänger bis zum Programmierexperten, erkennen die Bedeutung von JavaScript bei der Entwicklung moderner Websites. JavaScript ist so dominant, dass Sie wissen müssen, ob Sie Web-Apps erstellen möchten.
Einer der mächtigsten Bausteine der JavaScript-Sprache 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 bekannt sind. 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 an Ihrem Array durchführt, sodass Sie gängige Funktionen nicht von Grund auf neu programmieren 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 mit Klammern, die optionale Argumente enthalten können. Hier ist eine Methode, die an ein einfaches Array namens . angehängt ist myArray .
let myArray = [1,2,3]; myArray.pop();Dieser Code würde eine Methode namens . anwenden Pop zum Array.
Beispiel-Array
Verwenden Sie für jedes Beispiel ein Beispielarray, das wir aufrufen werden myArray , um die Methoden auszuführen. Zögern Sie nicht, Ihre Konsole hochzuziehen und mitzucoden.
let myArray = [2,4,5,7,9,12,14];Diese Beispiele gehen davon aus, dass Sie die Grundlagen von . kennen was JavaScript ist und wie es funktioniert . Wenn Sie dies nicht tun, ist das in Ordnung, wir sind alle hier, um zu lernen und zu wachsen.
Tauchen Sie ein in diese fünfzehn leistungsstarken Array-Methoden!
1. Array.push()
Was es macht: drücken() nimmt Ihr Array und fügt am Ende des Arrays ein oder mehrere Elemente hinzu und gibt dann die neue Länge des Arrays zurück. Diese Methode ändert Ihr vorhandenes Array.
Fügen Sie dem Array die Zahl 20 hinzu, indem Sie ausführen drücken() , mit 20 als Argument.
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]Ausführen der drücken() -Methode auf myArray hat den im Argument angegebenen Wert zum Array hinzugefügt. In diesem Fall 20. Wenn Sie myArray in der Konsole überprüfen, sehen Sie, dass der Wert jetzt am Ende des Arrays hinzugefügt wird.
2. Array.concat()
Was es macht: concat() kann zwei oder mehr Arrays zu einem neuen Array zusammenführen. Es ändert nicht die vorhandenen Arrays, sondern erstellt ein neues.
Nehmen myArray und füge ein Array namens . zusammen neuesArray hinein.
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 das alles in einem ziemlich einfachen Schritt, wenn Sie Variablen verwenden.
3. Array.join()
Was es macht: beitreten() nimmt ein Array und verkettet den Inhalt des Arrays, getrennt durch ein Komma. Das Ergebnis wird in einen String eingefügt. Sie können ein Trennzeichen angeben, wenn Sie eine Alternative zu einem Komma verwenden möchten.
Sehen Sie sich an, wie das mit myArray funktioniert. Verwenden Sie zuerst die Standardmethode ohne Trennzeichenargument, die ein Komma verwendet.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'JavaScript gibt einen String 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 leicht lesbare Zeichenfolge ergibt.
Das zweite Beispiel verwendet (' und ') , und hier gibt es zwei Dinge zu wissen.
Zuerst verwenden wir das Wort 'und', um die Werte zu trennen. Zweitens befindet sich auf beiden Seiten des Wortes „und“ ein Leerzeichen. Dies ist eine wichtige Sache, die Sie bei der Verwendung beachten sollten beitreten() . JavaScript liest Argumente wörtlich; wenn dieses Leerzeichen weggelassen wird, wird alles zusammengeknüllt (zB '2und4und5...' usw.) Keine sehr lesbare Ausgabe!
4. Array.forEach()
Was es macht: für jeden() (Groß-/Kleinschreibung beachten!) führt eine Funktion für jedes Element in Ihrem Array aus. Diese Funktion ist eine beliebige Funktion, die Sie erstellen, ähnlich der Verwendung einer 'for'-Schleife, um eine Funktion auf ein Array anzuwenden, jedoch mit viel weniger Codeaufwand.
Es gibt noch ein bisschen mehr zu für jeden() ; Sehen Sie sich die Syntax an und führen Sie dann eine einfache Funktion zur Demonstration aus.
myArray.forEach(function(item){
//code
});
Wir verwenden myArray , für jeden() wird mit der Punktnotation angewendet. Sie platzieren die Funktion, die Sie verwenden möchten, innerhalb der Argumentklammer, d. h Funktion (Artikel) im Beispiel.
Schaut mal rein Funktion (Artikel) . Dies ist die Funktion, die innerhalb von forEach() ausgeführt wird, und sie hat ihr eigenes Argument. Wir nennen das Argument Artikel . Zu diesem Argument sind zwei Dinge zu wissen:
- Wenn forEach() Ihr Array durchläuft, wendet es den Code auf dieses Argument an. Stellen Sie es sich 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 etwas verständlicheres genannt, wie 'Element' oder 'Element'.
Mit diesen beiden Dingen im Hinterkopf, sehen Sie sich dieses einfache Beispiel an. Addieren Sie 15 zu jedem Wert und lassen Sie die Konsole das Ergebnis anzeigen.
myArray.forEach(function(item){
console.log(item + 15);
});
Wir verwenden Artikel in diesem Beispiel als Variable, also wird die Funktion geschrieben, um 15 zu jedem Wert zu addieren über Artikel . 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 macht: Karte() 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 wie forEach(). Der Unterschied hier ist Karte() erstellt beim Ausführen ein neues Array. forEach() erstellt nicht automatisch ein neues Array, Sie müssten dafür eine bestimmte Funktion programmieren.
Verwenden Sie map(), um den Wert jedes Elements in myArray zu verdoppeln und sie in einem neuen Array zu platzieren. Du wirst das gleiche sehen Funktion (Artikel) Syntax für ein wenig mehr Übung.
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()
Was es macht: Ähnlich wie die Methode push() funktioniert die unshift() -Methode nimmt Ihr Array und fügt ein oder mehrere Elemente am Anfang des Arrays anstelle des Endes 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 anmelden, sollten Sie die Zahl 0 am Anfang des Arrays sehen.
console.log(myArray); [0, 2,4,5,7,9,12,14]7. Array.sort()
Was es tut: Das Sortieren ist eine der am häufigsten in einem Array ausgeführten Operationen und sehr nützlich. JavaScripts Sortieren() Die Array-Methode 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 zurück, indem das anfängliche Array geändert wird. Nehmen Sie einen anderen Zahlensatz für myArray diesmal.
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Da die Sortierung an Ort und Stelle erfolgt, müssen Sie für das sortierte Array keine separate Variable 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 . übergeben Sortieren() -Methode, um das Array in der gewünschten Weise zu sortieren. In diesem Fall habe ich einen Brauch bestanden Pfeilfunktion um das Array numerisch in aufsteigender Reihenfolge zu sortieren.
8. Array.reverse()
Was es macht: Wie der Name vermuten lässt, ist die umkehren() -Methode wird 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 in der Konsole, um den Vorgang zu überprüfen.
console.log(myArray); [14, 12, 9, 7, 5, 4, 2]Wie Sie sehen, wurde die Reihenfolge der Elemente umgekehrt. Bisher ist das Element am letzten Index (Element 14 am Index 6) jetzt das Element am nullten Index und so weiter.
9. Array.slice()
Was es macht: Scheibe() 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 und 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 Parameter end index nicht übergeben wird. Melden Sie beide Arrays an der Konsole an.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Offensichtlich wird das anfängliche Array durch die Methode Slice() nicht geändert und gibt stattdessen ein neues Array zurück, das in der SlicedArray Variable. Hier ist ein Beispiel, in dem der Parameter end index auch an die . übergeben wird Scheibe() Methode.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]10. Array.splice()
Was es macht: spleißen() ist eine hilfreiche Array-Methode, die zum Entfernen oder Ersetzen von Elementen im vorhandenen Array verwendet wird. Durch Angabe des Index und der Anzahl der zu löschenden Elemente ändert es das Array.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);Im obigen Beispiel ist die myArray Array wird von Index 2 gespleißt und 3 Elemente werden daraus entfernt. Das Array besteht nun aus:
[2, 4, 12, 14]Um die Elemente zu ersetzen, anstatt sie nur zu löschen, können Sie eine beliebige Anzahl optionaler Parameter mit den Elementen übergeben, durch die Sie ersetzen möchten, wie folgt:
klicken und ziehen funktioniert nicht mac
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 macht: Das Filter() method 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. Getreu ihrem Namen wird diese Methode verwendet, um die von Ihnen 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 als Parameter eine Pfeilfunktion übergeben, die jede Zahl aus dem ursprünglichen Array nimmt und mit dem Modulo ( % ) und Gleichberechtigung ( === ) Operator. So sieht die Ausgabe aus:
[2, 4, 12, 14]12. Array.reduce()
Was es macht: reduzieren() ist eine Array-Methode, die eine Reducer-Funktion aufnimmt und für jedes Array-Element ausführt, um bei der Rückgabe einen einzelnen Wert auszugeben. Es nimmt eine Reduzierfunktion mit einer Akkumulatorvariablen und einer Stromelementvariablen als erforderliche Parameter an. Der Wert des Akkumulators wird über alle Iterationen hinweg gespeichert und schließlich nach der letzten Iteration zurückgegeben.
Ein beliebter Anwendungsfall dieser Methode besteht darin, die Summe aller Elemente im Array zu berechnen. 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 als zweiter Parameter 0 übergeben, der als Initialwert der Akkumulatorvariablen verwendet wird. Die sumOfNums Variable enthält den Rückgabewert der reduzieren() -Methode, von der erwartet wird, dass sie die Summe aller Elemente im Array ist.
console.log(sumOfNums); 5313. Array.includes()
Was es macht: Die Suche nach einem Element in einem Array, um zu überprüfen, ob es vorhanden ist, ist eine Operation, die ziemlich häufig verwendet wird, und daher hat JavaScript dafür eine integrierte Methode in Form von beinhaltet() Array-Methode. 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 benötigt einen erforderlichen Parameter, das zu suchende Element und einen optionalen Parameter, den Arrayindex, von dem aus die Suche gestartet werden soll. Je nachdem, ob dieses Element vorhanden ist oder nicht, wird es zurückgegeben wahr oder falsch bzw. Daher wird die Ausgabe sein:
true
false
true
false14. Array.indexOf()
Was es macht: Index von() -Methode wird verwendet, um den Index herauszufinden, an dem das erste Vorkommen eines angegebenen Elements im Array zu finden ist. Obwohl sie der Methode include() ä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));Index von() -Methode verwendet strikte Gleichheit, um zu prüfen, ob ein Element vorhanden ist, was bedeutet, dass der Wert sowie der Datentyp gleich sein sollten. Der optionale zweite Parameter verwendet den Index, von dem aus die Suche gestartet werden soll. Basierend auf diesen Kriterien sieht die Ausgabe wie folgt 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 Folgendes versuchen füllen() Methode zum gleichen Zweck. 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 Endindex, zwischen dem gefüllt werden soll. Diese Methode ändert das bestehende 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 in der Konsole protokollieren, sehen Sie:
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]Die nächsten Schritte in Ihrer JavaScript-Reise
Arrays sind ein mächtiger Teil der JavaScript-Sprache, weshalb es so viele integrierte Methoden gibt, die Ihnen das Leben als Entwickler erleichtern. Der beste Weg, diese fünfzehn Methoden zu beherrschen, ist zu üben.
Während Sie JavaScript lernen, MDN ist eine großartige Ressource zur ausführlichen Dokumentation. Machen Sie es sich in der Konsole bequem und verbessern Sie Ihre Fähigkeiten 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.
Teilen Teilen Tweet Email 6 JavaScript-Frameworks, die es wert sind, gelernt zu werdenEs gibt viele JavaScript-Frameworks, die bei der Entwicklung helfen. Hier sind einige, die Sie kennen sollten.
Weiter lesen Verwandte Themen- Programmierung
- JavaScript
- Codierungstipps
Nitin ist ein begeisterter Softwareentwickler und Student der Computertechnik, der Webanwendungen mit JavaScript-Technologien entwickelt. Er arbeitet als freiberuflicher Webentwickler und schreibt in seiner Freizeit gerne für Linux und Programmierung.
Mehr von Nitin RanganathAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um sich zu abonnieren