7.8 KiB

Raw Permalink Blame History

JavaScript-Grundlagen: Arrays und Schleifen

Sketchnote von Tomomi Imura

Quiz vor der Lektion

Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web ermöglicht. In dieser Lektion lernst du Arrays und Schleifen kennen, die zur Datenmanipulation verwendet werden.

🎥 Klicke auf die Bilder oben, um Videos über Arrays und Schleifen anzusehen.

Du kannst diese Lektion auf Microsoft Learn absolvieren!

Arrays

Mit Daten zu arbeiten ist eine häufige Aufgabe in jeder Programmiersprache, und es wird viel einfacher, wenn die Daten in einer strukturierten Form wie Arrays organisiert sind. Mit Arrays werden Daten in einer Struktur gespeichert, die einer Liste ähnelt. Ein großer Vorteil von Arrays ist, dass du verschiedene Datentypen in einem Array speichern kannst.

✅ Arrays sind überall um uns herum! Kannst du ein Beispiel aus dem echten Leben für ein Array nennen, wie etwa ein Solarpanel-Array?

Die Syntax für ein Array besteht aus einem Paar eckiger Klammern.

let myArray = [];

Dies ist ein leeres Array, aber Arrays können auch bereits mit Daten gefüllt deklariert werden. Mehrere Werte in einem Array werden durch ein Komma getrennt.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

Die Array-Werte erhalten einen eindeutigen Wert, der als Index bezeichnet wird. Dabei handelt es sich um eine ganze Zahl, die basierend auf ihrer Entfernung vom Anfang des Arrays zugewiesen wird. Im obigen Beispiel hat der String-Wert "Chocolate" den Index 0, und der Index von "Rocky Road" ist 4. Verwende den Index mit eckigen Klammern, um Array-Werte abzurufen, zu ändern oder einzufügen.

✅ Überrascht es dich, dass Arrays beim Index null beginnen? In einigen Programmiersprachen beginnen Indizes bei 1. Es gibt eine interessante Geschichte dazu, die du auf Wikipedia nachlesen kannst.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

Du kannst den Index nutzen, um einen Wert zu ändern, wie hier:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

Und du kannst einen neuen Wert an einem bestimmten Index einfügen, wie hier:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ Eine gängigere Methode, Werte zu einem Array hinzuzufügen, ist die Verwendung von Array-Operatoren wie array.push().

Um herauszufinden, wie viele Elemente sich in einem Array befinden, verwende die length-Eigenschaft.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ Probiere es selbst aus! Verwende die Konsole deines Browsers, um ein eigenes Array zu erstellen und zu manipulieren.

Schleifen

Schleifen ermöglichen es uns, wiederholende oder iterative Aufgaben auszuführen, und können viel Zeit und Code sparen. Jede Iteration kann sich in ihren Variablen, Werten und Bedingungen unterscheiden. Es gibt verschiedene Arten von Schleifen in JavaScript, die alle kleine Unterschiede aufweisen, aber im Wesentlichen dasselbe tun: Daten durchlaufen.

For-Schleife

Die for-Schleife benötigt 3 Teile, um zu iterieren:

counter Eine Variable, die typischerweise mit einer Zahl initialisiert wird, die die Anzahl der Iterationen zählt
condition Eine Bedingung, die Vergleichsoperatoren verwendet, um die Schleife zu stoppen, wenn sie false wird
iteration-expression Wird am Ende jeder Iteration ausgeführt, typischerweise verwendet, um den Zählerwert zu ändern

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ Führe diesen Code in der Konsole deines Browsers aus. Was passiert, wenn du kleine Änderungen am Zähler, an der Bedingung oder am Iterationsausdruck vornimmst? Kannst du die Schleife rückwärts laufen lassen, um einen Countdown zu erstellen?

While-Schleife

Im Gegensatz zur Syntax der for-Schleife benötigen while-Schleifen nur eine Bedingung, die die Schleife stoppt, wenn die Bedingung false wird. Bedingungen in Schleifen hängen normalerweise von anderen Werten wie Zählern ab und müssen während der Schleife verwaltet werden. Startwerte für Zähler müssen außerhalb der Schleife erstellt werden, und alle Ausdrücke, die eine Bedingung erfüllen, einschließlich der Änderung des Zählers, müssen innerhalb der Schleife gepflegt werden.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ Warum würdest du eine for-Schleife gegenüber einer while-Schleife wählen? 17.000 Leser hatten dieselbe Frage auf StackOverflow, und einige der Meinungen könnten für dich interessant sein.

Schleifen und Arrays

Arrays werden oft mit Schleifen verwendet, da die meisten Bedingungen die Länge des Arrays benötigen, um die Schleife zu stoppen, und der Index auch als Zählerwert verwendet werden kann.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ Experimentiere mit dem Durchlaufen eines selbst erstellten Arrays in der Konsole deines Browsers.

🚀 Herausforderung

Es gibt andere Möglichkeiten, Arrays zu durchlaufen, außer mit for- und while-Schleifen. Es gibt forEach, for-of und map. Schreibe deine Array-Schleife mit einer dieser Techniken um.

Quiz nach der Lektion

Wiederholung & Selbststudium

Arrays in JavaScript haben viele Methoden, die äußerst nützlich für die Datenmanipulation sind. Lies mehr über diese Methoden und probiere einige davon aus (wie push, pop, slice und splice) an einem selbst erstellten Array aus.

Aufgabe

Ein Array durchlaufen

Haftungsausschluss:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst Co-op Translator übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.

7.8 KiB Raw Permalink Blame History