JavaScript while-Schleife: Syntax, Beispiele, Lösungen für Endlosschleifen und Optimierungstipps

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung

JavaScript ist eine hoch wichtige Programmiersprache in der Webentwicklung. Unter ihren Funktionen ist die while-Anweisung eine grundlegende Konstruktion, die verwendet wird, um einen Prozess zu wiederholen, solange eine Bedingung erfüllt ist.

In diesem Artikel erklären wir die while-Anweisung von JavaScript im Detail – von der grundlegenden Verwendung bis zu praktischen Beispielen und Tipps, um Fehler zu vermeiden. Sie ist für Anfänger bis zu fortgeschrittenen Lernenden geschrieben, und wir gehen reale Code-Beispiele auf eine klare und leicht verständliche Weise durch.

1.1 Zweck dieses Artikels

• Grundlegende Syntax verstehen: Lernen Sie, wie man die while-Anweisung verwendet.
• Praktische Beispiele: Studieren Sie Beispiele, die in der realen Entwicklung nützlich sind.
• Häufige Fehler vermeiden: Lernen Sie, wie man typische Fehler wie unendliche Schleifen verhindert.

1.2 Warum ist die while-Anweisung wichtig?

Schleifen sind eine der am häufigsten verwendeten Funktionen im Programmieren. Die while-Anweisung ist besonders nützlich in Situationen wie den folgenden:

• Unbekannte Anzahl von Iterationen: Validierung von Benutzereingaben oder Verarbeiten von Daten, bis sie eine Bedingung erfüllen.
• Dynamische Verarbeitung: Steuerung von Systemen, die Daten in Echtzeit handhaben, oder Verwalten von Animationen.

In diesen Szenarien ist das Verständnis der while-Anweisung von JavaScript essenziell für den Aufbau effizienter Programme.

2. Was ist die while-Anweisung?

Die while-Anweisung von JavaScript ist eine Schleifenkonstruktion, die einen Prozess wiederholt, solange die angegebene Bedingung wahr ist. Wenn die Bedingung falsch wird, stoppt die Schleife.

In diesem Abschnitt erklären wir die grundlegende Syntax der while-Anweisung und wie sie funktioniert.

2.1 Grundlegende Syntax der while-Anweisung

Zuerst schauen wir uns die grundlegende Syntax einer while-Anweisung an.

Syntax:

while (condition) {
  // Code to run
}

Erklärung der einzelnen Teile:

1. Bedingung:

• Gibt die Bedingung für die Fortsetzung der Schleife an. Solange diese Bedingung wahr ist, wird der Code in der Schleife ausgeführt.

1. Auszuführender Code:

• Schreiben Sie den Code, den Sie ausführen möchten, während die Bedingung erfüllt ist.

2.2 Grundlegendes Beispiel einer while-Anweisung

Im folgenden Beispiel werden Zahlen von 1 bis 5 in Reihenfolge ausgegeben.

Code-Beispiel:

let i = 1; // Set the initial value
while (i <= 5) { // Condition
  console.log(i); // Output the value
  i++; // Increment the counter
}

Ausgabe:

1
2
3
4
5

Erklärung:

1. Weisen Sie 1 der Variable i als Anfangswert zu.
2. Wenn die Bedingung i <= 5 wahr ist, läuft die Schleife.
3. console.log(i) gibt den aktuellen Wert von i aus.
4. i++ erhöht i um 1 jedes Mal, und die Schleife endet, wenn die Bedingung falsch wird.

2.3 Wie funktioniert die while-Anweisung?

Eine while-Schleife verläuft in folgendem Ablauf:

1. Bewerten Sie die Bedingung.
2. Wenn die Bedingung wahr ist, führen Sie den Code in der Schleife aus.
3. Nach dem Ausführen des Codes bewerten Sie die Bedingung erneut.
4. Wenn die Bedingung falsch wird, verlassen Sie die Schleife.

Wenn Sie diesen Ablauf visualisieren, sieht er so aus:

1. Evaluate condition → true → run code → evaluate condition again
2. Evaluate condition → false → loop ends

2.4 Vorsicht: Das Risiko unendlicher Schleifen

Warnung:
Eines der wichtigsten Dinge, auf die man achten sollte, wenn man eine while-Anweisung verwendet, ist eine unendliche Schleife.

Im folgenden Beispiel bleibt die Bedingung für immer wahr, sodass die Schleife nie stoppt.

Beispiel für eine unendliche Schleife:

let i = 1;
while (i <= 5) {
  console.log(i);
  // Infinite loop because i++ was forgotten
}

In diesem Code ändert sich der Wert von i nie, sodass die Bedingung i <= 5 wahr bleibt und das Programm nie endet.

Wie man es verhindert:
Stellen Sie sicher, dass der Schleifenbody etwas ändert, damit die Bedingung schließlich falsch wird.

3. Grundlegende Verwendung der while-Anweisung

In diesem Abschnitt stellen wir konkrete Beispiele für die Verwendung der while‑Anweisung in JavaScript vor und erklären, wie man verschiedene Szenarien handhabt. Wir decken alles von grundlegenden Mustern bis hin zu praktischeren Anwendungsfällen ab, sodass Sie sie leicht in realen Programmen einsetzen können.

3.1 Beispiel: Wiederholung eine feste Anzahl von Malen

Als grundlegendstes Muster betrachten wir eine Schleife, die eine festgelegte Anzahl von Durchläufen wiederholt.

Code‑Beispiel:

let count = 1; // Initial value
while (count <= 5) { // Condition
  console.log(`Count: ${count}`); // Display the count
  count++; // Increment the counter
}

Ausgabe:

Count: 1
Count: 2
Count: 3
Count: 4
Count: 5

Wichtige Punkte:

• Die Variable count wird innerhalb der Schleife aktualisiert, sodass klar ist, wann die Bedingung falsch wird.
• Dies ist ideal für einfache Wiederholungen, wenn Sie die Schleife eine bestimmte Anzahl von Malen durchlaufen lassen wollen.

3.2 Beispiel: Wiederholen, bis eine Bedingung erfüllt ist

Eine while‑Anweisung eignet sich ebenfalls gut dafür, solange zu wiederholen, bis eine bestimmte Bedingung erfüllt ist.

Beispiel: Validierung von Benutzereingaben
Diese Schleife zeigt ein Prompt so lange an, bis der Benutzer eine gültige Zahl eingibt.

Code‑Beispiel:

let input;
while (true) { // Start with a true condition
  input = prompt("Enter a number from 1 to 10:");
  if (input >= 1 && input <= 10) { // Exit if valid
    break;
  }
  alert("Invalid input. Please try again.");
}
console.log(`Entered number: ${input}`);

Wichtige Punkte:

• Die Schleifenbedingung ist zunächst immer wahr und die Schleife wird zum richtigen Zeitpunkt mit break beendet.
• Dieses Muster ist nützlich für Eingabeprüfungen und Datenvalidierung.

3.3 Beispiel: Array‑Elemente der Reihe nach verarbeiten

Hier ein Beispiel, das jedes Element eines Arrays abruft und verarbeitet.

Code‑Beispiel:

let fruits = ["Apple", "Banana", "Grape"];
let i = 0;
while (i < fruits.length) { // Use the array length as the condition
  console.log(`Fruit: ${fruits[i]}`);
  i++;
}

Ausgabe:

Fruit: Apple
Fruit: Banana
Fruit: Grape

Wichtige Punkte:

• Array‑Elemente werden sequenziell über den Index verarbeitet.
• Durch i < fruits.length wird sichergestellt, dass alle Elemente verarbeitet werden.

3.4 Beispiel: Weiterverarbeiten, bis die Bedingung falsch wird

In diesem Beispiel halbieren wir eine Zahl, bis sie ≤ 1 wird.

Code‑Beispiel:

let number = 100;
while (number > 1) { // Condition: number is greater than 1
  console.log(`Current value: ${number}`);
  number /= 2; // Halve the number
}

Ausgabe:

Current value: 100
Current value: 50
Current value: 25
Current value: 12.5
Current value: 6.25
Current value: 3.125
Current value: 1.5625

Wichtige Punkte:

• Die Schleife wiederholt sich, bis die Bedingung falsch wird.
• Durch das Verringern oder Erhöhen einer Variablen innerhalb der Schleife stellen Sie sicher, dass sie irgendwann endet.

3.5 Verwendung von break und continue

In einer while‑Schleife können Sie den Ablauf mit break und continue steuern.

break: Beispiel zum Beenden der Schleife

let i = 1;
while (i <= 10) {
  if (i === 5) break; // End the loop at 5
  console.log(i);
  i++;
}

Ausgabe:

1
2
3
4

continue: Beispiel zum Überspringen einer bestimmten Bedingung

let i = 0;
while (i < 10) {
  i++;
  if (i % 2 === 0) continue; // Skip even numbers
  console.log(i);
}

Ausgabe:

1
3
5
7
9

Wichtige Punkte:

• break: Beendet die Schleife vollständig.
• continue: Überspringt die aktuelle Iteration und fährt mit der nächsten fort.

3.6 Zusammenfassung

In diesem Abschnitt haben wir grundlegende Nutzungsmuster und praktische Beispiele für die while‑Anweisung von JavaScript vorgestellt.

Wesentliche Erkenntnisse:

• Sie eignet sich sowohl für das Durchlaufen einer festen Anzahl von Durchläufen als auch für das Wiederholen, bis eine Bedingung erfüllt ist.
• Wir haben praktische Beispiele behandelt, wie das Verarbeiten von Array‑Elementen und das Ändern numerischer Werte.
• Der Einsatz von break und continue ermöglicht eine flexible Steuerung des Schleifenablaufs.

4. Endlosschleifen und wie man sie vermeidet

Beim Verwenden der while-Anweisung in JavaScript müssen Sie vorsichtig mit unendlichen Schleifen sein. Eine unendliche Schleife tritt auf, wenn die Bedingung wahr bleibt und der Prozess für immer wiederholt wird. In diesem Abschnitt erklären wir die Ursachen unendlicher Schleifen und wie man sie im Detail verhindert.

4.1 Was ist eine unendliche Schleife?

Eine unendliche Schleife ist ein Zustand, in dem die Schleife nie stoppt, weil die Ausstiegsbedingung nie erfüllt wird. Sie kann dazu führen, dass das Programm nicht mehr reagiert oder der Browser abstürzt.

4.2 Beispiele für unendliche Schleifen

Beispiel 1: Die Ausstiegsbedingung ändert sich nie

let count = 1;
while (count < 5) {
  console.log(count);
  // Infinite loop because count is not updated
}

Beispiel 2: Die Bedingung ist immer wahr

while (true) { // The condition is always true
  console.log("Running an infinite loop");
}

4.3 Wie man unendliche Schleifen verhindert

Um unendliche Schleifen zu vermeiden, beachten Sie beim Schreiben Ihres Codes die folgenden Punkte.

1. Die Bedingung sorgfältig gestalten

Gestalten Sie die Schleife so, dass die Bedingung zuverlässig falsch wird.

Verbessertes Beispiel:

let count = 1;
while (count < 5) {
  console.log(count);
  count++; // Increase count so the condition changes
}

2. Die Ausstiegsbedingung explizit machen

Durch das explizite Festlegen einer Ausstiegsbedingung im Code können Sie die Schleife sicher beenden.

Beispiel mit break:

let count = 1;
while (true) {
  console.log(count);
  if (count >= 5) { // Specify a clear exit condition
    break; // Exit the loop
  }
  count++;
}

3. Eine Zeit- oder Versuchslimit hinzufügen

Zusätzlich zu Bedingungsprüfungen können Zeit- oder Versuchslimits unerwartete Situationen verhindern.

Beispiel: Verarbeitung mit einem Versuchslimit

let attempts = 0; // Attempt counter
while (attempts < 10) {
  if (Math.random() > 0.8) { // Exit if the condition is met
    console.log("Success!");
    break;
  }
  console.log("Retrying...");
  attempts++;
}

4.4 Praktisches Beispiel: Validierung der Benutzereingabe

Unten ist ein Beispiel, das die Verarbeitung wiederholt, bis der Benutzer einen gültigen Wert eingibt.

Code-Beispiel:

let input;
while (true) {
  input = prompt("Enter a number between 1 and 10:");
  if (input >= 1 && input <= 10) { // Exit if the input is valid
    break;
  }
  alert("Invalid input. Please try again.");
}
console.log(`Entered number: ${input}`);

Wichtige Punkte:

• Die Schleife wird mit einer break-Anweisung beendet, wenn die Bedingung erfüllt ist.
• Durch die richtige Verwaltung des Risikos unendlicher Schleifen können Sie den Prozess sicher ausführen.

4.5 Verwendung von Debugging-Tools

Auch wenn es einen Fehler in Ihrem Code gibt, können Sie überprüfen, was passiert, indem Sie den Debugger in den Entwicklertools verwenden oder console.log() hinzufügen.

Beispiel: Überprüfung mit Debugging-Ausgabe

let i = 0;
while (i < 5) {
  console.log(`Current value: ${i}`); // Debug output
  i++;
}

Durch das Hinzufügen einer solchen Ausgabe können Sie den Schleifenstatus während der Ausführung des Codes überprüfen.

4.6 Zusammenfassung

In diesem Abschnitt haben wir die Gefahren unendlicher Schleifen und wie man sie verhindert erklärt.

Wichtige Erkenntnisse:

• Unendliche Schleifen treten auf, wenn die Bedingung wahr bleibt und sich nie ändert.
• Sie können unendliche Schleifen verhindern, indem Sie eine Ausstiegsbedingung klar definieren und Variablen angemessen aktualisieren.
• Verwenden Sie break, um Schleifen sicher zu beenden, wenn nötig.

5. Vergleich mit der do…while-Anweisung

In JavaScript gibt es zusätzlich zur while-Anweisung eine weitere Schleifenkonstruktion namens do…while-Anweisung. In diesem Abschnitt vergleichen wir die beiden, erklären ihre Unterschiede und zeigen, wann man jede verwendet.

5.1 Grundlegende Syntax der do…while-Anweisung

Die do…while-Anweisung ist eine Schleifenkonstruktion, die den Code immer mindestens einmal ausführt, bevor die Bedingung ausgewertet wird.

Syntax:

do {
  // Code to run
} while (condition);

Wichtige Punkte:

• Weil der Code zuerst ausgeführt wird, führt er mindestens einmal aus, selbst wenn die Bedingung falsch ist.
• Die Bedingung wird nach dem Ausführen des Codes ausgewertet.

5.2 Unterschiede zur while‑Anweisung

5.3 Beispiel für die Verwendung von do…while

Unten ist ein Beispiel zur Validierung von Benutzereingaben.

Codebeispiel:

let input;
do {
  input = prompt("Enter a number from 1 to 10:");
} while (input < 1 || input > 10);

console.log(`Entered number: ${input}`);

Wichtige Punkte:

• Die Eingabeaufforderung wird mindestens einmal angezeigt.
• Solange die Eingabe die Bedingung nicht erfüllt, wird der Benutzer weiter aufgefordert.

Wenn Sie dies mit while umschreiben:

let input = prompt("Enter a number from 1 to 10:");
while (input < 1 || input > 10) {
  input = prompt("Enter a number from 1 to 10:");
}
console.log(`Entered number: ${input}`);

Vergleich:

• while‑Anweisung: Sie benötigen eine anfängliche Eingabeaufforderung außerhalb der Schleife, da die Bedingung zuerst geprüft wird.
• do…while‑Anweisung: Da der erste Durchlauf garantiert ist, kann der Code einfacher sein.

5.4 Wann Sie do…while verwenden sollten

1. Wenn Sie den Vorgang mindestens einmal ausführen müssen

• Situationen wie Formularvalidierung, bei denen Sie den Vorgang mindestens einmal ausführen müssen.

1. Wenn die Anzahl der Durchläufe dynamisch bestimmt wird

• Fälle, in denen Sie die Anzahl der Wiederholungen im Voraus nicht kennen und bis zu einer Bedingung weiter verarbeiten möchten.

5.5 Kriterien zur Auswahl zwischen while und do…while

5.6 Praktisches Beispiel: Passwort‑Eingabevalidierung

Beispiel: Passwortvalidierung mit do…while

let password;
do {
  password = prompt("Enter a password with at least 6 characters:");
} while (password.length < 6);

console.log("Password has been set!");

Dieser Code wiederholt sich, bis der Benutzer ein Passwort mit mindestens 6 Zeichen eingibt. Da die Prüfung mindestens einmal ausgeführt werden muss, ist do…while eine gute Wahl.

Wenn Sie dies mit while schreiben:

let password = "";
while (password.length < 6) {
  password = prompt("Enter a password (at least 6 characters):");
}
console.log("Password has been set!");

In diesem Fall müssen Sie den ersten Wert als leere Zeichenkette initialisieren, was den Code etwas ausführlicher macht.

5.7 Zusammenfassung

In diesem Abschnitt haben wir die Unterschiede zwischen while und do…while erklärt und gezeigt, wie man die richtige Wahl trifft.

Wichtige Erkenntnisse:

• while‑Anweisung: Bewertet die Bedingung zuerst und führt den Code nur aus, wenn die Bedingung wahr ist.
• do…while‑Anweisung: Bewertet die Bedingung zuletzt und führt den Code mindestens einmal aus.
• Die richtige Anweisung basierend auf dem Szenario zu wählen, hilft Ihnen, saubereren und effizienteren Code zu schreiben.

6. Praktische Beispiele: Validierung von Benutzereingaben

In diesem Abschnitt stellen wir praktische Beispiele zur Validierung von Benutzereingaben mit JavaScripts while‑Anweisung und do…while‑Anweisung vor. Wiederholte Verarbeitung, um sicherzustellen, dass Benutzer korrekte Informationen angeben, wird häufig in Webanwendungen und Formularvalidierungen verwendet.

6.1 Validierung numerischer Eingaben

Dieses Beispiel zeigt wiederholt eine Eingabeaufforderung, bis der Benutzer eine Zahl innerhalb des angegebenen Bereichs eingibt.

Codebeispiel (while‑Anweisung):

let number = parseInt(prompt("Enter a number from 1 to 10:"));

while (isNaN(number) || number < 1 || number > 10) {
  alert("Invalid input. Please enter a number from 1 to 10.");
  number = parseInt(prompt("Enter a number from 1 to 10:"));
}

console.log(`Entered number: ${number}`);

Erklärung:

1. Benutzerinput mit prompt erhalten.
2. isNaN(number) gibt true zurück, wenn die Eingabe keine gültige Zahl ist.
3. Wenn die Bedingung nicht erfüllt ist, wird ein Alert angezeigt und der Benutzer erneut zur Eingabe aufgefordert.
4. Die Schleife wiederholt sich, bis die Bedingung erfüllt ist.

6.2 Validierung der Passwortlänge

Dieses Beispiel wiederholt sich, bis der Benutzer ein Passwort eingibt, das die erforderliche Bedingung erfüllt.

Codebeispiel (do…while‑Anweisung):

let password;

do {
  password = prompt("Geben Sie ein Passwort mit mindestens 6 Zeichen ein:");
} while (password.length < 6);

console.log("Passwort wurde festgelegt!");

Explanation:

1. The prompt is always shown at least once.
2. If the entered password is shorter than 6 characters, it requests input again.
3. The loop ends once the condition is met.

Key points:

• Using do…while allows you to skip the initial pre-check on the first input.
• In real applications, you can add more checks such as character types or special symbols.

6.3 Email Address Validation with Repeated Prompts

This example validates the email format using a regular expression.

Code example (while statement):

let email = "";
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // E-Mail-Regex-Muster

while (!emailPattern.test(email)) {
  email = prompt("Geben Sie eine gültige E-Mail-Adresse ein:");
  if (!emailPattern.test(email)) {
    alert("Ungültiges E-Mail-Format. Bitte versuchen Sie es erneut.");
  }
}

console.log(`Eingegebene E-Mail-Adresse: ${email}`);

Explanation:

1. Validate the email format using a regular expression.
2. If the input does not meet the condition, ask the user to re-enter.
3. The loop continues until the user enters a correctly formatted email address.

6.4 Input Validation with a Maximum Attempt Limit

This example avoids infinite loops by limiting the number of attempts.

Code example (while statement):

let username;
let attempts = 0; // Versuchszähler
const maxAttempts = 3; // Maximale Versuche

while (attempts < maxAttempts) {
  username = prompt("Geben Sie Ihren Benutzernamen ein:");
  if (username) {
    console.log(`Willkommen, ${username}!`);
    break; // Schleife verlassen, wenn Eingabe erfolgreich
  }
  attempts++; // Versuche erhöhen
  alert(`Eingabe ist leer. Verbleibende Versuche: ${maxAttempts - attempts}`);
}

if (attempts === maxAttempts) {
  console.log("Maximale Versuche erreicht. Bitte versuchen Sie es später erneut.");
}

Explanation:

1. Set a maximum number of attempts and stop looping after the limit is reached.
2. If valid input is provided, exit the loop immediately.
3. Notify the user of the remaining attempts for better user experience.

6.5 Practical Application Example Using Input Validation

In real-world use cases such as form validation, you often combine JavaScript with HTML.

Code example (HTML + JavaScript):

HTML part:

<input type="text" id="username" placeholder="Geben Sie Ihren Benutzernamen ein" />
<button id="submitBtn">Absenden</button>
<p id="errorMessage"></p>

JavaScript part:

document.getElementById("submitBtn").addEventListener("click", function () {
  let username = document.getElementById("username").value;
  let errorMessage = document.getElementById("errorMessage");

  if (username.length < 3) {
    errorMessage.textContent = "Benutzername muss mindestens 3 Zeichen lang sein.";
  } else {
    alert(`Willkommen, ${username}!`);
    errorMessage.textContent = ""; // Fehlermeldung löschen
  }
});

This code can be used as a basic example of form input validation.

6.6 Summary

In this section, we introduced various practical examples of validating user input.

Key takeaways:

• For validating numbers and passwords, using while or do…while is very useful.
• Using regular expressions enables more advanced validation.
• Adding attempt limits is important to prevent infinite loops.

7. Performance and Optimization Tips

In this section, we’ll explain performance and optimization tips to consider when using JavaScript’s while statement. Writing efficient code can improve execution speed and enhance the reliability and readability of your program.

7.1 Avoid Unnecessary Processing

Key point:
Avoid repeating the same calculations or operations inside a loop. Code that runs repeatedly can reduce performance.

Example: Inefficient code

let arr = [1, 2, 3, 4, 5];
let i = 0;

while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

In this code, arr.length is recalculated each time the loop runs.

Improved example:

let arr = [1, 2, 3, 4, 5];
let length = arr.length; // Array-Länge im Voraus speichern
let i = 0;

while (i < length) {
  console.log(arr[i]);
  i++;
}

Result:

• By storing arr.length in a variable beforehand, you avoid recalculating it inside the loop and improve performance.

7.2 Optimize the Number of Loop Iterations

Key point:
To avoid unnecessary loops, carefully design the start value and the exit condition.

Example: Inefficient code

let i = 0;
while (i <= 100) {
  if (i % 2 === 0) {
    console.log(i);
  }
  i++;
}

Improved example:

let i = 0;
while (i <= 100) {
  console.log(i); // Nur gerade Zahlen ausgeben
  i += 2; // Um 2 erhöhen
}

Result:

• Adjusting the increment reduces unnecessary condition checks and improves code efficiency.

7.3 Detecting Infinite Loops and Debugging

Infinite loops can significantly reduce performance. If an infinite loop occurs during execution, use the browser or IDE debugger to identify the issue.

Debugging example:

let i = 0;
while (i < 10) {
  console.log(i); // Debug-Ausgabe
  // Endlosschleife, weil i++ vergessen wurde
}

Improved example:

let i = 0;
while (i < 10) {
  console.log(i);
  i++; // Inkrement hinzufügen, um eine Endlosschleife zu verhindern
}

Tips for using debugging tools:

1. console.log(): Print variable values inside the loop to track progress.
2. Browser developer tools: Use debugging features in Chrome or Firefox, set breakpoints, and pause execution.
3. Prepare for infinite loops: If execution becomes extremely slow, be ready to stop the process using the browser task manager.

7.4 Optimizing Nested Loops

Key point:
Nested loops can increase complexity and slow down execution. Be especially careful when processing large datasets.

Example: Inefficient code

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let results = [];

let i = 0;
while (i < arr1.length) {
  let j = 0;
  while (j < arr2.length) {
    results.push(arr1[i] * arr2[j]);
    j++;
  }
  i++;
}

Improved example:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let results = [];

arr1.forEach(a => {
  arr2.forEach(b => {
    results.push(a * b);
  });
});

Result:

• Using forEach improves readability and can also help with maintainability.

7.5 Convert Repeated Logic into a Reusable Function

To avoid redundancy, you can wrap loop logic into a function so it can be reused easily.

Example: Optimization using a function

function printArrayElements(arr) {
  let i = 0;
  while (i < arr.length) {
    console.log(arr[i]);
    i++;
  }
}

const numbers = [10, 20, 30, 40];
printArrayElements(numbers);

Result:

• Modularizing the logic prevents duplication and makes the code easier to maintain.

7.6 Summary

In this section, we introduced optimization tips for using JavaScript’s while statement efficiently.

Key takeaways:

• Avoid unnecessary processing: Prevent repeated calculations such as checking array length inside the loop.
• Optimize loop iterations: Adjust increments and conditions to reduce overhead.
• Detect infinite loops and debug: Use debugging tools and console output for troubleshooting.
• Optimize nested loops: Choose simpler and more efficient structures when possible.
• Reuse code by using functions: Reduce redundancy and improve maintainability.

8. Summary

In this article, we explained JavaScript’s while statement in detail—from basic usage to practical examples and optimization tips. In this section, we’ll review what we covered and organize key points readers can apply in practice.

8.1 What You Learned in This Article

1. Grundsyntax und Funktionsweise der while-Anweisung

• Die while-Anweisung wiederholt die Verarbeitung, solange die Bedingung wahr ist.
• Da die Bedingung zuerst ausgewertet wird, wird die Schleife nicht einmal ausgeführt, wenn die Bedingung falsch ist.

1. Grundlegende Verwendung und praktische Beispiele

• Festgelegte Schleifen: Einfache Wiederholung für eine bestimmte Anzahl von Durchläufen.
• Wiederholen bis eine Bedingung erfüllt ist: Flexible Beispiele für Eingabevalidierung und dynamische Bedingungen.
• Verarbeitung von Array-Elementen: Konkrete Beispiele für die sequenzielle Handhabung von Arrays und Listendaten.

1. Wie man Endlosschleifen vermeidet

• Endlosschleifen können Programme zum Einfrieren oder Absturz bringen.
• Durch korrektes Gestalten der Bedingungen und die Verwendung von break können Sie sichere Schleifenlogik implementieren.

1. Vergleich mit der do…while-Anweisung

• do…while-Anweisung: Ein Schleifenkonstrukt, das mindestens einmal ausgeführt wird, unabhängig von der Bedingung.
• Wenn mindestens eine Ausführung erforderlich ist, ist do…while effektiv.

1. Praktische Benutzereingabevalidierung

• Wir haben while und do…while verwendet, um Zahlen, Passwörter und E‑Mail‑Adressen zu validieren.
• Wir haben außerdem Versuchsbegrenzungen und regex‑basierte Validierungsbeispiele eingeführt.

1. Leistungs‑ und Optimierungstipps

• Wir haben gelernt, wie man effizienten Code schreibt, indem man die Array‑Länge und Bedingungen im Voraus berechnet.
• Wir haben außerdem Debugging‑Strategien und Techniken zur Optimierung verschachtelter Schleifen vorgestellt.

8.2 Hilfreiche Tipps für die Praxis

1. Verwenden Sie einen Debugger:

• Verwenden Sie einen Debugger in den Entwicklerwerkzeugen, um den Zustand von Variablen innerhalb von Schleifen in Echtzeit zu prüfen.

1. Schreiben Sie wiederverwendbaren Code:

• Das Kapseln von Logik in Funktionen erleichtert das Wiederverwenden und Verwalten.

1. Halten Sie Bedingungen einfach:

• Formulieren Sie klare Bedingungen und vermeiden Sie unnötige Komplexität, um Fehler zu reduzieren.

1. Entwerfen Sie für Sicherheit:

• Berücksichtigen Sie von Anfang an die Vermeidung von Endlosschleifen und Fehlerbehandlung, um Laufzeitprobleme zu vermeiden.

8.3 Wie man diesen Artikel verwendet

Dieser Artikel kann als umfassender Leitfaden zur while-Anweisung von JavaScript für die folgenden Zwecke verwendet werden:

• Anfänger: Lesen Sie von Anfang an, um die Struktur und das Verhalten von while‑Schleifen zu verstehen.
• Fortgeschrittene Lernende: Nutzen Sie die praktischen Beispiele und Optimierungstipps, um reale Programme zu verbessern.
• Entwickler: Verwenden Sie ihn als Referenz beim Validieren von Logik oder Optimieren der Schleifenleistung.

8.4 Nächste Schritte

In JavaScript gibt es neben while mehrere Schleifenkonstrukte, wie for und for…of. Das Verständnis jedes einzelnen und die Wahl des richtigen Werkzeugs für die jeweilige Situation helfen Ihnen, effizienteren und wartbaren Code zu schreiben.

Als nächster Schritt vertieft das Erlernen der folgenden Themen Ihr Verständnis:

1. Vergleich von for und for…of:

• Lernen Sie flexiblere Methoden zur Handhabung von Iterationen.

1. Verwendung von Array-Methoden (forEach, map, filter usw.):

• Vereinfachen Sie den Code und verbessern Sie die Leistung.

1. Asynchrone Verarbeitung und Schleifen:

• Lernen Sie Muster für wiederholende Aufgaben mit async‑Funktionen.

8.5 Abschließende Hinweise

Die while-Anweisung von JavaScript ist ein leistungsstarkes Werkzeug, das in vielen Situationen eingesetzt werden kann, von grundlegend bis fortgeschritten. Nutzen Sie diesen Artikel als Referenz und vertiefen Sie Ihr Verständnis, indem Sie selbst Code schreiben und testen.

Praktische Tipps:

• Beginnen Sie mit kleinen Beispielen und probieren Sie nach und nach fortgeschrittenere Muster aus.
• Verwenden Sie Debugging‑Tools, um zu bestätigen, wie sich Ihr Code verhält.
• Denken Sie beim Optimieren Ihres Codes stets an Sicherheit und Leistung.