Java-Array. Teil 6 des JavaScript-Kurses von Anfänger bis Fortgeschrittene in 10 Blogbeiträgen

Dies ist Teil 6 der JavaScript-Blogbeitragsreihe, die Sie von Anfänger zu Fortgeschrittenem führen wird. Am Ende dieser Reihe werden Sie alle Grundlagen kennen, die Sie benötigen, um mit dem Programmieren in JavaScript zu beginnen. Ohne weitere Umschweife, lassen Sie uns mit dem sechsten Tutorial beginnen.

Java-Array – Inhaltsverzeichnis:

1. Arrays – grundlegende Informationen
2. Elemente zu einem Java-Array hinzufügen
3. Elemente aus einem Array entfernen
4. Länge in Arrays ermitteln
5. Arrays sortieren
6. Elemente in Arrays umkehren
7. Für jedes
8. Enthält in Arrays

Dieses Tutorial geht davon aus, dass Sie eine Programmierumgebung bereits eingerichtet haben. Wenn Sie die vorherigen Tutorials verfolgt haben, sollten Sie sie bereits geöffnet haben. Wenn Sie aus irgendeinem Grund Ihre Einrichtung geschlossen haben, finden Sie die vollständigen Einrichtungsanweisungen im Teil 4 dieser Reihe. In diesem Tutorial zeigen wir, wie Sie Ihre Google Chrome Snippets-Umgebung zum Programmieren einrichten.

Wenn Sie sich mit Google Chrome einigermaßen wohlfühlen, gibt es hier einen schnellen Weg, um sich für dieses Tutorial einzurichten. Andernfalls können Sie sich den Teil 4 für die vollständige Schritt-für-Schritt-Anleitung zur Einrichtung Ihrer Programmierumgebung ansehen.

Wenn Sie einen Mac verwenden, ist die Tastenkombination zum Öffnen der Konsole „Option + Command + J“, nachdem Sie Chrome geöffnet haben. Wenn Sie ein Windows-Gerät verwenden, können Sie die Tastenkombination „Control + Shift + J“ verwenden, um die JavaScript-Konsole zu öffnen, sobald Sie Chrome geöffnet haben. Alternativ können Sie auch zum Menü oben gehen und zu Ansicht -> Entwickler -> JavaScript-Konsole gehen. Sobald Sie die Konsole geöffnet haben, können Sie auf die Registerkarte „Quellen“ klicken, die direkt neben „Konsole“ liegt. Jetzt sollten Sie Snippets sehen. Sie können entweder mit dem Programmieren in einem Snippet fortfahren, das Sie bereits zuvor verwendet haben, oder Sie können ein neues Snippet erstellen, indem Sie auf die Schaltfläche „+ Neues Snippet“ klicken. Solange Sie eine Programmierumgebung für dieses Tutorial haben, in der Sie üben können, sind Sie bereit.

Java-Array – grundlegende Informationen

Arrays werden in vielen Programmiersprachen häufig verwendet, und JavaScript ist da keine Ausnahme. Und das aus gutem Grund. Aber Sie fragen sich vielleicht, was ein Array überhaupt ist? Arrays sind im Wesentlichen eine Sammlung verwandter Daten, die mit bestimmten definierten Methoden zugegriffen und manipuliert werden können. Lassen Sie uns einige Beispiele für ein Array sehen, um ein vollständigeres Verständnis zu erhalten.

const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["Hunde", "Katzen", "Vögel", "Fische"];

Wir können ein Java-Array verwenden, um mehrere verschiedene Arten von Daten zu speichern. Zum Beispiel haben wir im obigen Code einige Zahlen, Booleans sowie den Datentyp String gespeichert.

Wir können ein Java-Array genauso erstellen wie andere Variablen, mit entweder den Schlüsselwörtern const oder let auf der linken Seite und den Inhalten der Arrays auf der rechten Seite der Gleichungen. Eine Sache, auf die Sie achten sollten, ist, dass wir beim Erstellen von Arrays die eckigen Klammern verwenden, um die Elemente zu umschließen, genau wie wir es im obigen Code getan haben. Wir trennen auch jedes Element mit einem Komma, unabhängig von ihrem Datentyp.

In diesem Tutorial werden wir den Code so schreiben, dass Sie alles in diesem Tutorial sequenziell kopieren und einfügen oder alles in ein JavaScript-Snippet in Chrome eingeben können, und es wird wie erwartet funktionieren, vorausgesetzt, Sie folgen der Reihenfolge. Zum Beispiel bedeutet das für Sie, dass, wenn wir einmal im Tutorial eine Variable mit dem Schlüsselwort const definieren, Sie normalerweise keine andere Variable mit demselben Namen erneut definieren können. Deshalb ist es eine gute Idee, sicherzustellen, dass Sie diese Variablen auch in Ihrem Code definieren, wenn Sie Teile des Codes teilweise kopieren und einfügen. Dies sollte kein Problem sein, wenn Sie das Tutorial in der Reihenfolge verfolgen, in der es präsentiert wird.

Eine der ersten Dinge, die Sie über ein Java-Array wissen sollten, ist, dass Sie, sobald Sie ein Array erstellt haben, auf seine Elemente zugreifen müssen. Arrays haben etwas, das „nummerierte Indizes“ genannt wird, und was das für Sie in der Praxis bedeutet, ist, dass jedem Element, das Sie in JavaScript erstellen, eine Zahl zugeordnet ist, von links nach rechts, von null bis zur Länge des Java-Arrays minus eins.

Zum Beispiel können wir im obigen Code für Haustiere auf das erste Element „Hunde“ zugreifen, indem wir den Namen der Variablen schreiben, die eckigen Klammern öffnen, den Index des Elements, auf das wir zugreifen möchten, eingeben und die eckige Klammer schließen:

alert(pets[0]);

Ähnlich wird das Eingeben höherer Zahlen andere Elemente im Alert-Fenster anzeigen, das wir anzeigen.

alert(pets[1]);
alert(pets[2]);
alert(pets[3]);

Da wir 4 Elemente im Haustier-Array hatten und die Indizes bei 0 beginnen, wird das letzte Element im Array mit pets[3] aufgerufen, was 1 weniger ist als die Gesamtlänge des Arrays. An diesem Punkt fragen Sie sich vielleicht, jetzt, da wir ein Array erstellen und auf ein Element aus diesem Array zugreifen können, wie wäre es mit Änderungen an diesem Array? Wie wäre es mit dem Hinzufügen neuer Elemente, dem Ändern vorhandener Elemente oder dem Löschen von Elementen? Nun, lassen Sie es uns Schritt für Schritt angehen und mit dem Hinzufügen neuer Elemente zu einem Array beginnen.

Elemente zu einem Java-Array hinzufügen

Es gibt mehrere Möglichkeiten, wie wir verschiedene Elemente zu einem Array hinzufügen können. Wenn wir wissen, dass wir das neue Element ans Ende des Arrays hinzufügen möchten, können wir die Methode „push“ verwenden. Dies wird auch als das Hinzufügen eines neuen Elements zum Array bezeichnet. Beachten Sie, dass das hinzugefügte Element ans Ende des Arrays kommt. Zum Beispiel:

pets.push("Schlangen");
// lassen Sie uns überprüfen, ob wir Schlangen als letztes Element haben
// indem wir den Inhalt des Arrays anzeigen
alert(pets);

Wenn wir wissen, dass wir ein Element als erstes Element im Java-Array hinzufügen möchten, können wir das Schlüsselwort „unshift“ verwenden. Lassen Sie uns das mit einem Beispiel sehen:

// Das Ausführen dieses Codes wird alle Werte
// zur einen Seite verschieben und das erste Haustier „Drachen“ hinzufügen
pets.unshift(“Drachen”); 
// lassen Sie uns dies überprüfen, indem wir den Inhalt des Arrays anzeigen
alert(pets);

Es ist großartig, dass wir Elemente ans Ende des Arrays oder an den Anfang des Arrays hinzufügen können, aber was ist, wenn ich aus irgendeinem Grund Elemente an bestimmten Positionen im Array hinzufügen möchte? Angenommen, ich möchte Schildkröten an der dritten Position hinzufügen. Ist das überhaupt möglich? Ja, das ist es. Um ein Element in ein Array einzufügen, können wir es definieren, als würden wir diesen Teil des Arrays erstellen und einen Wert dem spezifischen Teil des Arrays zuweisen. Vergessen Sie auch nicht, die Indexwerte beim Einfügen von Werten zu verwenden. Aus praktischer Sicht sieht es so aus:

pets[2] = "Schildkröten";
// lassen Sie uns überprüfen, ob wir Schildkröten als drittes Element haben
// indem wir den Inhalt des Arrays anzeigen
alert(pets);

Elemente aus einem Array entfernen

An diesem Punkt fragen Sie sich vielleicht, wie wäre es mit dem Entfernen von Elementen aus einem Array? Nun, dafür gibt es auch mehrere Möglichkeiten. Wahrscheinlich die bekannteste ist die Verwendung der Methode „pop“. Dies wird in gewisser Weise das letzte Element aus einem Array entfernen. // dies entfernt das letzte Element im Array pets.pop(); // lassen Sie uns die Ergebnisse überprüfen, indem wir den Inhalt des Arrays anzeigen alert(pets);

Wie Sie sehen können, haben wir mit der pop-Methode das letzte Haustier-Element „Schlangen“ aus unserem Haustier-Array entfernt.

Eine weitere Möglichkeit, Elemente aus einem Java-Array zu entfernen, besteht darin, das Schlüsselwort „shift“ zu verwenden. Wenn wir shift verwenden, wird das erste Element gelöscht und die restlichen Indexwerte passen sich an. Zum Beispiel:

// dies wird das erste Element löschen
// und die anderen Elemente in ihre neuen Indexwerte verschieben
// die um eins niedriger sein werden als die vorherigen Indexwerte
pets.shift();
// lassen Sie uns dies auch überprüfen, indem wir das Array anzeigen
alert(pets);

Der Name „shift“ stammt tatsächlich davon, wie die Speicherzuweisung im Computerspeicher funktioniert. Wenn es anfangs relativ unintuitiv erscheint, ist das auch vollkommen in Ordnung. Für jetzt sollten Sie wissen, dass wir mit der shift-Methode das erste Element aus einem Array entfernen können.

Länge in Arrays ermitteln

Wenn wir im echten Leben mit Arrays arbeiten, gibt es viele Situationen, in denen wir die Anzahl der Array-Elemente zählen möchten. Dies kann an verschiedenen Orten erforderlich sein, einschließlich in To-Do-Listen, Teilnehmerlisten in der Schule oder bei der Arbeit usw. Um genau das zu erreichen, haben wir eine eingebaute Array-Eigenschaft namens „length“, die uns die Gesamtlänge des Arrays mitteilt. Zum Beispiel:

alert(pets.length);

Arrays sortieren

Arrays zu sortieren ist eine ziemlich gängige Operation in JavaScript. Es gibt verschiedene spezifische Implementierungen zum Sortieren von Elementen in JavaScript. Diese spezifischen Implementierungen werden im Allgemeinen als Sortieralgorithmen bezeichnet. Verschiedene Sortieralgorithmen können unterschiedliche Vor- und Nachteile mit sich bringen. Zum Beispiel könnte ein Sortieralgorithmus einem anderen vorgezogen werden, weil er einfach viel einfacher in Code zu implementieren ist, im Vergleich zu einem anderen, auch wenn sie möglicherweise eine etwas bessere Leistung zeigen. Sie haben vielleicht von verschiedenen Sortieralgorithmen für optimierte Leistung gehört. In diesem Tutorial werden wir die eingebaute Sortiermethode verwenden, die von JavaScript bereitgestellt wird. Sortieren ist ein ziemlich häufiges Problem, insbesondere in der Webentwicklung. Wenn Sie beispielsweise eine E-Commerce-Website erstellen, müssen Sie verschiedene Sortiersituationen implementieren, aus denen der Benutzer wählen kann. Obwohl es keine strengen Regeln dafür gibt, welche Optionen und Möglichkeiten Sie Ihrem Publikum bieten sollten, gibt es ziemlich gängige Standards, die von Ihnen als Website-Ersteller erwartet werden. Zum Beispiel gibt es eine hohe Wahrscheinlichkeit, dass Sie einige Artikel im Geschäft sowohl nach aufsteigendem als auch nach absteigendem Preis auflisten möchten. Bei der Implementierung des Sortierens für diese Aufgaben sollten Sie auch berücksichtigen, wie Sie es implementieren, da der Benutzer auch die Suchergebnisse auf bestimmte andere Kategorien wie T-Shirts, Hüte, Taschen usw. einschränken kann. Wir können ein Array sortieren, indem wir „.sort()“ am Ende hinzufügen.

pets.sort();
alert(pets);

Elemente in Arrays umkehren

Das Umkehren eines Arrays wird wahrscheinlich häufiger mit dem Sortieren kombiniert. In diesem Fall wenden wir die Umkehrung nach dem Sortieren des Arrays an, da wir diese Codes auch von oben nach unten ausführen. Wir können ein Array umkehren, indem wir „.reverse()“ am Ende hinzufügen. pets.reverse(); alert(pets);

Da wir das Array im vorherigen Schritt sortiert haben, sehen Sie, dass wir jetzt ein Array haben, das sowohl sortiert als auch umgekehrt ist.

Für jedes

Wenn wir mit Arrays arbeiten, bietet uns JavaScript eine bequeme Möglichkeit, über die Array-Elemente mit „.forEach()“ zu iterieren. Wenn wir wirklich wollen, können wir immer noch eine reguläre for-Schleife verwenden, um über ein Array zu iterieren. Lassen Sie uns zunächst sehen, wie wir eine for-Schleife konstruieren, um über ein Array zu iterieren, und dann werden wir sehen, wie wir forEach() verwenden.

// dies wird uns 4 Mal warnen, unser Haustier zu füttern
for (let a = 0; a < pets.length; a++) {
    alert("Zeit, mein Haustier zu füttern");
}

Wir können dasselbe Ergebnis auch mit forEach erzielen.

pets.forEach(alert("Zeit, mein Haustier zu füttern"));

Wenn wir die Verwendung von for-Schleifen oder forEach vergleichen, können Sie je nach Ihren Vorlieben und Ihrer spezifischen Situation eine der beiden Methoden bevorzugen. Im Wesentlichen erzielen sie beide die gleichen Ausgaben mit unterschiedlichen Stilen im Code. ForEach kann relativ einfacher sein und Ihnen eine Zeile Code zum Lesen und Schreiben sparen, aber letztendlich liegt es an Ihnen. Sie müssen auch nicht sofort eine solche Wahl treffen und dabei bleiben. Während Sie Code schreiben, können Sie experimentieren, um dasselbe Problem mit verschiedenen Ansätzen zu lösen, während Sie sich auf Ihrer Programmierreise bewegen.

Enthält in Arrays

Wir können auch überprüfen, ob ein Element in einem Java-Array vorhanden ist. Ein Beispiel für eine reale Verwendung dieser Methode wäre, ob eine private Veranstaltung den Namen einer Person auf der Einladungsliste enthält. Die tatsächliche Implementierung ist ebenfalls ziemlich einfach. Zuerst schreiben wir den Namen des Arrays, in diesem Fall arbeiten wir mit dem Haustier-Array. Dann setzen wir einen Punkt, um auf verschiedene Array-Eigenschaften und -Methoden zuzugreifen, dann schreiben wir „includes“, öffnen und schließen die Klammern und geben den Namen des Elements ein, das wir überprüfen möchten. Hier ist ein Beispiel, das ein Element überprüft, von dem wir wissen, dass es im Array vorhanden ist:

alert(pets.includes("Hunde"));

Wenn wir auch dasselbe mit einem Element versuchen, von dem wir wissen, dass es nicht im Java-Array vorhanden ist, erwarten wir, als Antwort false zu erhalten. Lassen Sie uns auch diesen Fall mit einem Beispiel sehen:

alert(pets.includes("Welpe")); [/code>

Da wir keinen Welpen im Haustier-Array hatten, erhalten wir false, wie wir erwartet haben. Im nächsten Tutorial werden wir ein weiteres wichtiges Konzept sowohl in der Programmierwelt als auch in JavaScript sehen.