Entdecken Sie Schleifenstrukturen in JavaScript

Einführung

In diesem Lab werden die Studierenden tief in die JavaScript-Schleifenstrukturen eintauchen und verschiedene Iterationstechniken erkunden, die für die Programmierungslogik grundlegend sind. Das Lab behandelt essentielle Schleifentypen wie while-Schleifen, do-while-Schleifen, for-Schleifen und for-in-Schleifen und vermittelt durch praktische Codebeispiele und sukzessives Lernen praktische Erfahrungen mit jeder Struktur.

Die Teilnehmer beginnen mit dem Verständnis der Grundsyntax von while-Schleifen und lernen, wie man kontrollierte Iterationen erstellt und Aufgaben wie Zählen und bedingtes Suchen ausführt. Im weiteren Verlauf üben sie die Implementierung unterschiedlicher Schleifenstrukturen, vergleichen deren einzigartige Merkmale und Anwendungsfälle, was dazu beiträgt, ein umfassendes Verständnis davon zu entwickeln, wie Schleifen verwendet werden können, um Daten zu manipulieren, durch Arrays zu iterieren und dynamische Programmierlösungen in JavaScript zu erstellen.

Verstehen der Syntax und der grundlegenden Verwendung von while-Schleifen

In diesem Schritt lernst du die grundlegende Syntax und Verwendung von while-Schleifen in JavaScript. While-Schleifen sind grundlegende Steuerstrukturen, die es dir ermöglichen, einen Codeblock solange auszuführen, wie eine bestimmte Bedingung wahr ist.

Lassen Sie uns beginnen, indem wir eine neue JavaScript-Datei erstellen, um while-Schleifen zu erkunden. Öffnen Sie die WebIDE und erstellen Sie in das Verzeichnis ~/project eine Datei namens whileLoop.js.

// Erstellen Sie eine einfache while-Schleife, um von 1 bis 5 zu zählen
let count = 1;

while (count <= 5) {
  console.log(`Aktueller Zählerwert: ${count}`);
  count++;
}

Führen Sie nun die JavaScript-Datei mit Node.js aus, um das Ergebnis anzuzeigen:

node ~/project/whileLoop.js

Beispielausgabe:

Aktueller Zählerwert: 1
Aktueller Zählerwert: 2
Aktueller Zählerwert: 3
Aktueller Zählerwert: 4
Aktueller Zählerwert: 5

Zergliedern wir die Syntax der while-Schleife:

• let count = 1; initialisiert eine Zählervariable vor der Schleife
• while (count <= 5) definiert die Bedingung, die wahr sein muss, um die Schleife fortzusetzen
• console.log() druckt den aktuellen Wert von count aus
• count++ erhöht den Zähler in jeder Iteration um 1

Lassen Sie uns nun ein praktikableres Beispiel erstellen, das eine while-Schleife mit einer komplexeren Bedingung demonstriert:

// Erstellen Sie eine while-Schleife, um die erste Zahl zu finden, die sowohl durch 3 als auch durch 5 teilbar ist
let number = 1;

while (!(number % 3 === 0 && number % 5 === 0)) {
  number++;
}

console.log(`Erste Zahl, die durch 3 und 5 teilbar ist: ${number}`);

Führen Sie die Datei erneut aus:

node ~/project/whileLoop.js

Beispielausgabe:

Erste Zahl, die durch 3 und 5 teilbar ist: 15

Dieses Beispiel zeigt, wie while-Schleifen verwendet werden können, um spezifische Bedingungen zu suchen oder iterative Aufgaben auszuführen.

Üben Sie die do-while-Schleife mit einer sukzessiven Iteration

In diesem Schritt lernst du über do-while-Schleifen in JavaScript, die ähnlich wie while-Schleifen sind, aber mit einem entscheidenden Unterschied: Der Codeblock wird mindestens einmal ausgeführt, bevor die Bedingung überprüft wird.

Erstellen Sie mit der WebIDE in das Verzeichnis ~/project eine neue Datei namens doWhileLoop.js:

// Demonstration einer do-while-Schleife mit einer Benutzer-Eingabe-Simulation
let attempts = 0;
let secretNumber = 7;
let guess;

do {
  // Simulieren Sie eine zufällige Vermutung zwischen 1 und 10
  guess = Math.floor(Math.random() * 10) + 1;
  attempts++;

  console.log(`Versuch ${attempts}: Geraten ${guess}`);

  if (guess === secretNumber) {
    console.log(
      `Herzlichen Glückwunsch! Sie haben die Zahl in ${attempts} Versuchen erraten.`
    );
  }
} while (guess !== secretNumber);

Führen Sie die JavaScript-Datei aus, um zu sehen, wie die do-while-Schleife funktioniert:

node ~/project/doWhileLoop.js

Beispielausgabe:

Versuch 1: Geraten 3
Versuch 2: Geraten 9
Versuch 3: Geraten 7
Herzlichen Glückwunsch! Sie haben die Zahl in 3 Versuchen erraten.

Wichtige Merkmale von do-while-Schleifen:

• Der Codeblock wird mindestens einmal ausgeführt, bevor die Bedingung überprüft wird
• Die Bedingung wird am Ende jeder Iteration überprüft
• Nützlich, wenn Sie sicherstellen möchten, dass der Code mindestens einmal ausgeführt wird

Lassen Sie uns ein weiteres Beispiel erstellen, um die do-while-Schleife weiter zu veranschaulichen:

// Demonstration einer sukzessiven Iteration mit einer do-while-Schleife
let total = 0;
let i = 1;

do {
  total += i;
  console.log(`Aktueller Gesamtwert: ${total}, Aktuelle Zahl: ${i}`);
  i++;
} while (total < 10);

console.log(`Endgültiger Gesamtwert: ${total}`);

Führen Sie die Datei erneut aus:

node ~/project/doWhileLoop.js

Beispielausgabe:

Aktueller Gesamtwert: 1, Aktuelle Zahl: 1
Aktueller Gesamtwert: 3, Aktuelle Zahl: 2
Aktueller Gesamtwert: 6, Aktuelle Zahl: 3
Aktueller Gesamtwert: 10, Aktuelle Zahl: 4
Endgültiger Gesamtwert: 10

Dieses Beispiel zeigt, wie do-while-Schleifen für eine sukzessive Iteration verwendet werden können, wobei sichergestellt wird, dass der Codeblock mindestens einmal ausgeführt wird, bevor die Abbruchbedingung überprüft wird.

Implementieren Sie die for-Schleife für kontrollierte Iterationen

In diesem Schritt lernst du über for-Schleifen in JavaScript, die eine präzise Möglichkeit bieten, kontrollierte Iterationen durchzuführen, mit einem klar definierten Start, Ende und Inkrement-/Deinkrement-Mechanismus.

Erstellen Sie mit der WebIDE in das Verzeichnis ~/project eine neue Datei namens forLoop.js:

// Grundlegende for-Schleife, um Zahlen von 1 bis 5 auszugeben
console.log("Grundlegende Zählschleife:");
for (let i = 1; i <= 5; i++) {
  console.log(`Aktuelle Zahl: ${i}`);
}

// for-Schleife, um die Fakultät einer Zahl zu berechnen
console.log("\nFakultätsberechnung:");
let number = 5;
let factorial = 1;

for (let j = 1; j <= number; j++) {
  factorial *= j;
}

console.log(`Fakultät von ${number} ist: ${factorial}`);

// for-Schleife, um durch ein Array zu iterieren
console.log("\nArrayiteration:");
let fruits = ["apple", "banana", "cherry", "date"];

for (let k = 0; k < fruits.length; k++) {
  console.log(`Frucht an Index ${k}: ${fruits[k]}`);
}

Führen Sie die JavaScript-Datei aus, um die verschiedenen for-Schleifenbeispiele zu sehen:

node ~/project/forLoop.js

Beispielausgabe:

Grundlegende Zählschleife:
Aktuelle Zahl: 1
Aktuelle Zahl: 2
Aktuelle Zahl: 3
Aktuelle Zahl: 4
Aktuelle Zahl: 5

Fakultätsberechnung:
Fakultät von 5 ist: 120

Arrayiteration:
Frucht an Index 0: apple
Frucht an Index 1: banana
Frucht an Index 2: cherry
Frucht an Index 3: date

Zergliedern wir die Syntax der for-Schleife:

• for (Initialisierung; Bedingung; Inkrement/Deinkrement) ist die Standardstruktur
• let i = 1 initialisiert den Schleifenzähler
• i <= 5 definiert die Fortsetzungbedingung
• i++ erhöht den Zähler nach jeder Iteration um 1

Erstellen Sie ein weiteres Beispiel, das die Verwendung von komplexeren for-Schleifen demonstriert:

// Verschachtelte for-Schleife, um eine Multiplikationstabelle zu erstellen
console.log("Multiplikationstabelle:");
for (let row = 1; row <= 5; row++) {
  let rowOutput = "";
  for (let col = 1; col <= 5; col++) {
    rowOutput += `${row * col}\t`;
  }
  console.log(rowOutput);
}

Führen Sie die Datei erneut aus:

node ~/project/forLoop.js

Beispielausgabe:

Multiplikationstabelle:
1	2	3	4	5
2	4	6	8	10
3	6	9	12	15
4	8	12	16	20
5	10	15	20	25

Dieses Beispiel zeigt, wie verschachtelte for-Schleifen verwendet werden können, um komplexere Iterationsmuster zu erstellen.

Verwenden Sie die for-in-Schleife, um durch die Elemente eines Arrays zu iterieren

In diesem Schritt lernst du über die for-in-Schleife in JavaScript, die eine einfache Möglichkeit bietet, durch die Eigenschaften eines Objekts oder die Elemente eines Arrays zu iterieren.

Erstellen Sie mit der WebIDE in das Verzeichnis ~/project eine neue Datei namens forInLoop.js:

// Iterieren durch ein Array mit der for-in-Schleife
let fruits = ["apple", "banana", "cherry", "date"];

console.log("Iterieren durch Array-Indizes:");
for (let index in fruits) {
  console.log(`Index: ${index}, Frucht: ${fruits[index]}`);
}

// Iterieren durch ein Objekt mit der for-in-Schleife
let student = {
  name: "John Doe",
  age: 22,
  major: "Computer Science",
  gpa: 3.8
};

console.log("\nIterieren durch Objekteigenschaften:");
for (let property in student) {
  console.log(`${property}: ${student[property]}`);
}

// Praktisches Beispiel: Berechnen der Gesamtpreis von Artikeln
let shoppingCart = [
  { name: "Laptop", price: 1000 },
  { name: "Headphones", price: 100 },
  { name: "Mouse", price: 50 }
];

console.log("\nBerechnen des Gesamtpreises:");
let totalPrice = 0;
for (let index in shoppingCart) {
  totalPrice += shoppingCart[index].price;
}
console.log(`Gesamtpreis: $${totalPrice}`);

Führen Sie die JavaScript-Datei aus, um die for-in-Schleife in Aktion zu sehen:

node ~/project/forInLoop.js

Beispielausgabe:

Iterieren durch Array-Indizes:
Index: 0, Frucht: apple
Index: 1, Frucht: banana
Index: 2, Frucht: cherry
Index: 3, Frucht: date

Iterieren durch Objekteigenschaften:
name: John Doe
age: 22
major: Computer Science
gpa: 3.8

Berechnen des Gesamtpreises:
Gesamtpreis: $1150

Wichtige Punkte zur for-in-Schleife:

• Funktioniert sowohl mit Arrays als auch mit Objekten
• Iteriert durch Indizes (für Arrays) oder Eigenschaften (für Objekte)
• Bietet eine einfache Möglichkeit, auf Elemente zuzugreifen, ohne traditionelle indexbasierte Schleifen zu verwenden
• Seien Sie bei der Verwendung mit Arrays vorsichtig, da sie durch alle aufzählbaren Eigenschaften iteriert

Lassen Sie uns ein weiteres Beispiel erkunden, um ihre Flexibilität zu demonstrieren:

// Verwenden der for-in-Schleife, um Daten zu filtern und zu transformieren
let grades = {
  math: 85,
  science: 92,
  english: 78,
  history: 88
};

console.log("Filtern von Noten über 80:");
for (let subject in grades) {
  if (grades[subject] > 80) {
    console.log(`${subject}: ${grades[subject]}`);
  }
}

Führen Sie die Datei erneut aus:

node ~/project/forInLoop.js

Beispielausgabe:

Filtern von Noten über 80:
math: 85
science: 92
history: 88

Vergleichen und kontrastieren verschiedene Schleifenstrukturen

In diesem Schritt erkundest du die Unterschiede zwischen verschiedenen Schleifenstrukturen in JavaScript und lernst, wann jede Schleifentyp effektiv eingesetzt werden soll.

Erstelle mit der WebIDE in das Verzeichnis ~/project eine neue Datei namens loopComparison.js:

// Demonstration verschiedener Schleifenstrukturen für die gleiche Aufgabe

// 1. While-Schleife: Am besten geeignet für eine unbekannte Anzahl von Iterationen
console.log("While-Schleife Beispiel:");
let whileCounter = 1;
while (whileCounter <= 5) {
  console.log(`While-Schleife: ${whileCounter}`);
  whileCounter++;
}

// 2. Do-While-Schleife: Garantiert mindestens eine Ausführung
console.log("\nDo-While-Schleife Beispiel:");
let doWhileCounter = 1;
do {
  console.log(`Do-While-Schleife: ${doWhileCounter}`);
  doWhileCounter++;
} while (doWhileCounter <= 5);

// 3. For-Schleife: Am besten geeignet für eine bekannte Anzahl von Iterationen
console.log("\nFor-Schleife Beispiel:");
for (let forCounter = 1; forCounter <= 5; forCounter++) {
  console.log(`For-Schleife: ${forCounter}`);
}

// 4. For-In-Schleife: Iteriert durch die Objekteigenschaften
console.log("\nFor-In-Schleife Beispiel:");
let student = {
  name: "John Doe",
  age: 22,
  major: "Computer Science"
};

for (let property in student) {
  console.log(`${property}: ${student[property]}`);
}

// 5. Vergleich der Schleifenleistung
console.log("\nVergleich der Schleifenleistung:");
const iterations = 1000000;

console.time("While-Schleife");
let a = 0;
while (a < iterations) {
  a++;
}
console.timeEnd("While-Schleife");

console.time("For-Schleife");
for (let b = 0; b < iterations; b++) {}
console.timeEnd("For-Schleife");

Führe die JavaScript-Datei aus, um den Vergleich zu sehen:

node ~/project/loopComparison.js

Beispielausgabe:

While-Schleife Beispiel:
While-Schleife: 1
While-Schleife: 2
While-Schleife: 3
While-Schleife: 4
While-Schleife: 5

Do-While-Schleife Beispiel:
Do-While-Schleife: 1
Do-While-Schleife: 2
Do-While-Schleife: 3
Do-While-Schleife: 4
Do-While-Schleife: 5

For-Schleife Beispiel:
For-Schleife: 1
For-Schleife: 2
For-Schleife: 3
For-Schleife: 4
For-Schleife: 5

For-In-Schleife Beispiel:
name: John Doe
age: 22
major: Computer Science

Vergleich der Schleifenleistung:
While-Schleife: 2.345ms
For-Schleife: 1.876ms

Wichtige Unterschiede:

1. While-Schleife:

   • Verwenden, wenn die Anzahl der Iterationen unbekannt ist
   • Bedingung vor jeder Iteration überprüft
   • Kann nicht ausgeführt werden, wenn die Bedingung zunächst falsch ist

2. Do-While-Schleife:

   • Garantiert mindestens eine Ausführung
   • Bedingung nach jeder Iteration überprüft
   • Nützlich, wenn Sie möchten, dass der Code mindestens einmal ausgeführt wird

3. For-Schleife:

   • Am besten geeignet für eine bekannte Anzahl von Iterationen
   • Kompakte Syntax mit Initialisierung, Bedingung und Inkrement
   • Am häufigsten für die Arrayiteration und das Zählen verwendet

4. For-In-Schleife:

   • Speziell für die Iteration durch Objekteigenschaften
   • Funktioniert mit sowohl Objekten als auch Arrays
   • Liefert Indizes oder Eigenschaftennamen

Lassen Sie uns ein letztes Beispiel erstellen, um die Auswahl der richtigen Schleife zu demonstrieren:

// Auswählen der richtigen Schleife für verschiedene Szenarien
let numbers = [10, 20, 30, 40, 50];

// While-Schleife für bedingtes Suchen
console.log("\nAuswählen der richtigen Schleife:");
let searchValue = 30;
let index = 0;
while (index < numbers.length && numbers[index] !== searchValue) {
  index++;
}
console.log(`Gefunden ${searchValue} an Index: ${index}`);

// For-Schleife für einfache Iteration
console.log("Quadrierte Zahlen:");
for (let i = 0; i < numbers.length; i++) {
  console.log(`${numbers[i]} quadriert: ${numbers[i] * numbers[i]}`);
}

Führe die Datei erneut aus:

node ~/project/loopComparison.js

Beispielausgabe:

Auswählen der richtigen Schleife:
Gefunden 30 an Index: 2
Quadrierte Zahlen:
10 quadriert: 100
20 quadriert: 400
30 quadriert: 900
40 quadriert: 1600
50 quadriert: 2500

Zusammenfassung

In diesem Lab haben die Teilnehmer verschiedene Schleifenstrukturen in JavaScript untersucht, wobei der Schwerpunkt auf dem Verständnis und der Implementierung unterschiedlicher Schleifentypen lag. Das Lab begann mit einer umfassenden Untersuchung von While-Schleifen, bei der die grundlegende Syntax und praktischen Anwendungen durch Beispiele gezeigt wurden, die die Iterationen zählen und spezifische numerische Bedingungen suchen. Die Teilnehmer lernten, wie man Schleifenvariablen initialisiert, Schleifenbedingungen definiert und Inkrementoperatoren verwendet, um die Schleifenausführung zu steuern.

Das Lab ging weiter, um zusätzliche Schleifentypen wie Do-While-Schleifen, For-Schleifen und For-In-Schleifen zu behandeln und die Teilnehmer praktische Erfahrungen mit jeder Struktur zu vermitteln. Indem diese Schleifenmechanismen verglichen und kontrastiert wurden, konnten die Lernenden Einblicke in die Auswahl geeigneter Schleifenstrukturen für verschiedene Programmier-Szenarien gewinnen, was ihre JavaScript-Programmierfähigkeiten und ihr Verständnis von Kontrollflussmechanismen verbessert hat.