JavaScript Arrays

Einführung

In diesem Lab werden Sie eine der grundlegendsten Datenstrukturen in JavaScript erkunden: das Array. Ein Array ist eine spezielle Variable, die mehr als einen Wert gleichzeitig speichern kann. Arrays werden verwendet, um geordnete Sammlungen von Daten zu speichern, wie z. B. eine Liste von Elementen, Zahlen oder Zeichenketten.

Sie lernen, wie Sie:

• Ein Array erstellen.
• Auf Array-Elemente zugreifen und diese ändern.
• Elemente mithilfe gängiger Array-Methoden hinzufügen und entfernen.
• Ein Array durchlaufen, um seine Elemente zu verarbeiten.

Während dieses Labs arbeiten Sie innerhalb der WebIDE. Sie schreiben Ihren JavaScript-Code in der Datei script.js. Um die Ergebnisse Ihres Codes zu sehen, verwenden Sie die Entwicklerkonsole des Browsers, auf die Sie im Tab "Web 8080" zugreifen können.

Array-Literal mit eckigen Klammern erstellen

In diesem Schritt lernen Sie die gebräuchlichste Methode zur Erstellung eines JavaScript-Arrays kennen: die Verwendung eines Array-Literals. Ein Array-Literal ist eine Liste von null oder mehr Ausdrücken, von denen jeder ein Array-Element darstellt, eingeschlossen in eckige Klammern ([]).

Suchen Sie zuerst die Datei script.js im Datei-Explorer auf der linken Seite der WebIDE. Klicken Sie darauf, um sie im Editor zu öffnen.

Fügen Sie nun den folgenden Code zu script.js hinzu, um ein Array von Früchten zu erstellen und es in der Konsole auszugeben.

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits);

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei (Sie können Strg+S oder Cmd+S verwenden). Um die Ausgabe zu sehen, wechseln Sie zum Tab "Web 8080" oben auf dem Bildschirm. Möglicherweise müssen Sie die Entwicklerkonsole Ihres Browsers öffnen (normalerweise durch Drücken von F12 oder durch Rechtsklick auf die Seite und Auswahl von "Untersuchen", dann Navigation zum Tab "Konsole"). Sie sollten das Array in der Konsole ausgegeben sehen.

["Apple", "Banana", "Cherry"];

Array-Element über Index abrufen

In diesem Schritt lernen Sie, wie Sie auf einzelne Elemente innerhalb eines Arrays zugreifen. JavaScript-Arrays sind nullindiziert, was bedeutet, dass sich das erste Element am Index 0, das zweite am Index 1 usw. befindet. Sie können auf ein Element zugreifen, indem Sie seine Indexnummer in eckigen Klammern angeben.

Bearbeiten Sie weiterhin die Datei script.js. Fügen Sie die folgenden Zeilen unter Ihrem vorhandenen Code hinzu, um auf das erste Element des fruits-Arrays zuzugreifen und es auszugeben.

// Zugriff auf das erste Element (Index 0)
const firstFruit = fruits[0];
console.log("The first fruit is:", firstFruit);

// Zugriff auf das dritte Element (Index 2)
console.log("The third fruit is:", fruits[2]);

Speichern Sie die Datei script.js und aktualisieren Sie den Tab "Web 8080". Überprüfen Sie die Entwicklerkonsole. Sie werden die neue Ausgabe zusätzlich zur Ausgabe aus dem vorherigen Schritt sehen.

The first fruit is: Apple
The third fruit is: Cherry

Element mit push-Methode hinzufügen

In diesem Schritt lernen Sie, wie Sie ein neues Element am Ende eines vorhandenen Arrays hinzufügen. Der einfachste Weg, dies zu tun, ist die push()-Methode. Diese Methode fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die neue Länge des Arrays zurück.

Fügen Sie den folgenden Code am Ende Ihrer script.js-Datei hinzu, um "Orange" zu Ihrem fruits-Array hinzuzufügen.

// Ein neues Element am Ende des Arrays hinzufügen
fruits.push("Orange");

console.log("Array after push:", fruits);

Speichern Sie die Datei und überprüfen Sie die Konsole im Tab "Web 8080". Sie werden sehen, dass das fruits-Array nun vier Elemente enthält.

Array after push: [ "Apple", "Banana", "Cherry", "Orange" ]

Letztes Element mit pop-Methode entfernen

In diesem Schritt lernen Sie, wie Sie das letzte Element eines Arrays mit der pop()-Methode entfernen. Diese Methode entfernt das letzte Element aus einem Array und gibt dieses Element zurück. Diese Aktion ändert die Länge des Arrays.

Fügen Sie den folgenden Code am Ende Ihrer script.js-Datei hinzu. Dadurch wird das zuletzt hinzugefügte Element entfernt und sowohl das entfernte Element als auch das aktualisierte Array ausgegeben.

// Das letzte Element aus dem Array entfernen
const removedFruit = fruits.pop();

console.log("Removed fruit:", removedFruit);
console.log("Array after pop:", fruits);

Speichern Sie die Datei und beobachten Sie die Konsolenausgabe im Tab "Web 8080". Sie werden sehen, dass "Orange" entfernt wurde und das Array wieder seine ursprünglichen drei Elemente enthält.

Removed fruit: Orange
Array after pop: [ "Apple", "Banana", "Cherry" ]

Array mit for-Schleife durchlaufen

In diesem Schritt lernen Sie, wie Sie alle Elemente eines Arrays durchlaufen. Eine gängige Methode hierfür ist die Verwendung einer for-Schleife. Sie können die length-Eigenschaft des Arrays verwenden, um zu bestimmen, wie oft die Schleife ausgeführt werden soll.

Fügen Sie die folgende for-Schleife am Ende von script.js hinzu, um jede Frucht im Array in einer neuen Zeile in der Konsole auszugeben.

console.log("Iterating through the array with a for loop:");

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Die Schleife beginnt mit i = 0 und wird fortgesetzt, solange i kleiner ist als die Länge des fruits-Arrays. In jeder Iteration wird das Element am aktuellen Index i ausgegeben.

Speichern Sie die Datei und überprüfen Sie die Konsole im Tab "Web 8080". Sie werden jede Frucht einzeln aufgelistet sehen.

Iterating through the array with a for loop:
Apple
Banana
Cherry

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des JavaScript Arrays Labs!

In diesem Lab haben Sie die wesentlichen Operationen für die Arbeit mit Arrays in JavaScript gelernt. Sie haben geübt:

• Erstellen eines Arrays mit der Literal-Syntax [].
• Zugriff auf Elemente über ihren nullbasierten Index, wie array[0].
• Hinzufügen eines Elements am Ende eines Arrays mit der push()-Methode.
• Entfernen des letzten Elements aus einem Array mit der pop()-Methode.
• Durchlaufen jedes Elements in einem Array mit einer for-Schleife und der length-Eigenschaft.

Arrays sind ein Eckpfeiler der JavaScript-Programmierung. Es gibt viele weitere leistungsstarke Methoden zu erkunden, wie forEach(), map() und filter(), die Ihren Code noch prägnanter und ausdrucksstärker machen können. Üben Sie weiter, um diese grundlegende Datenstruktur zu beherrschen.