JavaScript-Schleifen für Anfänger: Lernen Sie die Grundlagen

---

Es ist ein düsterer Montag und Sie sind auf der Arbeit. Wir alle wissen, wie deprimierend der Montag sein kann, oder? Ihr Chef kommt auf Sie zu und sagt: „Hey, ich habe 300 ungeöffnete E-Mails, die wir am Wochenende erhalten haben. Ich möchte, dass Sie jede einzelne öffnen, den Namen des Absenders notieren und die E-Mails löschen, wenn Sie fertig sind.“

Diese Aufgabe sieht sehr ermüdend aus, wenn Sie versuchen, sie manuell zu erledigen. Das nächste, was Ihnen in den Sinn kommt, ist wahrscheinlich, bei Google nach einer Software zu suchen, die diesen Prozess automatisieren und Ihnen das Leben erleichtern kann, oder?

Nun, wir haben ähnliche Situationen beim Programmieren. Es gibt Zeiten, in denen Sie wiederholte Aufgaben ausführen müssen, bis sie erledigt sind. Wie lösen Sie dieses Problem? In JavaScript gibt es sogenannte Schleifen. Schleifen ermöglichen es uns, sich wiederholende Aufgaben zu lösen, indem wir die Menge an Code reduzieren, die zum Abschließen der Aufgabe erforderlich ist.

In diesem Artikel besprechen wir, was eine Schleife ist, wie sie funktioniert und welche verschiedenen Methoden wir verwenden können, um sie in unseren Programmen anzuwenden.

Was ist eine Schleife?

Schleifen werden in JavaScript verwendet, um wiederholte Aktionen einfach auszuführen. Sie basieren auf einer Bedingung, die wahr oder falsch zurückgibt.

Eine Bedingung ist ein Ausdruck, der übergeben werden muss, um eine Schleife am Laufen zu halten. Eine Schleife wird ausgeführt, wenn die angegebenen Bedingungen einen wahren Wert zurückgeben, und stoppt, wenn sie einen falschen Wert zurückgeben.

Wann muss eine Schleife verwendet werden?

Schleifen sind nützlich, um sich wiederholende Aufgaben auszuführen. Beispielsweise verkürzt die Verwendung einer Schleife den Code, der zur Lösung eines Problems erforderlich ist. Es spart Zeit, optimiert die Speichernutzung und verbessert die Flexibilität.

Die wahre Bedeutung einer Schleife geht über die Reduzierung der Codelänge und die Begrenzung von Wiederholungen hinaus. Sie helfen auch beim Arbeiten mit Daten in einem Array, Objekt oder anderen Strukturen. Darüber hinaus fördern Schleifen die Modularität des Codes, indem sie sich wiederholenden Code reduzieren und die Wiederverwendbarkeit des Codes erhöhen, wodurch es möglich wird, Codes zu erstellen, die in verschiedenen Teilen Ihres Projekts verwendet werden können.

Arten von Schleifen

Es gibt zwei Hauptkategorien von Schleifen: eingangsgesteuerte Schleifen und ausgangsgesteuerte Schleifen.

Eingangsgesteuerte Schleifen werten die Bedingung am „Eingang der Schleife“ aus, bevor sie den Schleifenkörper ausführen. Wenn die Bedingung wahr ist, läuft der Körper. Wenn nicht, läuft der Körper nicht. Die for- und while-Schleifen sind Beispiele für eingangsgesteuerte Schleifen.

Ausgangsgesteuerte Schleifen konzentrieren sich auf den Schleifenkörper über der Testbedingung und stellen sicher, dass der Schleifenkörper mindestens einmal ausgeführt wird, bevor die Testbedingung ausgewertet wird. Ein gutes Beispiel für eine Exit-gesteuerte Schleife ist die do-while-Schleife.

Sehen wir uns einige Beispiele für eintrittsgesteuerte Schleifen an:

while-Schleife

Eine while-Schleife hat die folgende Syntax.

while (condition) {
  //  loop's body
}

Die folgende Liste erläutert die Funktionalität einer While-Schleife:

1. Die while-Schleife nimmt eine Testbedingung in Klammern an.
2. Das Programm prüft die Bedingung, um zu sehen, ob sie erfolgreich ist oder nicht.
3. Der Code im Schleifenkörper wird ausgeführt, solange die Bedingung erfüllt ist.
4. Das Programm beendet seinen Betrieb, sobald die Testbedingung fehlschlägt.

Nehmen wir unten ein praktisches Beispiel für die while-Schleife:

let arr = [];
let i = 1;
let number = 5;

while (i <= number) {
arr.push(i)
i++
}

console.log(arr)

1. Der obige Codeausschnitt initialisiert die Variablen „arr“, „i“ und „num“.
2. Die Variable „arr“ ist ein Array, das die Werte enthält, die die Testbedingung erfüllen.
3. Die Variable „i“ verfolgt jedes Inkrement nach jeder Iteration.
4. Die Variable „Zahl“ vergleicht nach jeder Iteration den Wert von „i“ mit ihrem Wert (5).
5. Der Code im Schleifenkörper schiebt jeden Wert von „i“ nach jeder Iteration in das Array, solange „i“ kleiner oder gleich „Zahl“ ist.
6. Sobald der aktuelle Wert von „i“ die Bedingung nicht erfüllt, in diesem Fall wenn der Wert von „i“ größer als „Zahl“ ist, also 6, stoppt die Schleife.

Die push()-Methode ist eine integrierte JavaScript-Funktion, die ein neues Element am Ende eines Arrays hinzufügt.

Ausgabe

[1, 2, 3, 4, 5]

do-while-Schleife

Eine Do-While-Schleife ähnelt stark der While-Schleife. Der Hauptunterschied zwischen der while- und der do-while-Schleife besteht darin, dass die do-while-Schleife die Codeausführung mindestens einmal sicherstellt, bevor die Bedingung der Schleife ausgewertet wird. Die do-while-Schleife hat die folgende Syntax.

do {
  // loop's body
}
while (//condition)

Do-while ist ein hervorragendes Beispiel für eine ausgangsgesteuerte Schleife. Dies liegt daran, dass ausgangsgesteuerte Schleifen dem Schleifenkörper Vorrang vor der Testbedingung geben. Schauen wir uns nun ein praktisches Codebeispiel an, bei dem die do-while-Schleife verwendet wird.

Beispiel:

let i = 1;
let num = 5;

do {
  console.log(i);
  i++;
} while (i <= num);

Lassen Sie uns nun dieses Code-Snippet aufschlüsseln:

1. We initialized the "i" and "num" variables.
2. The console logs in the value of "i" (1) before evaluating the loop's condition.
3. The condition is checked, and the value of "i" increments with +1 after each iteration.
4. The loop ends its operation once "i" is greater than "num".

Output

1
2
3
4
5

Although the do-while loop is very much similar to the while loop, there are subtle differences we must note, let’s take another example that compares the difference between the while and do-while loop.

let i = 5;
let num = 4

while( i < num)
{
  console.log(i)
}

This while loop above won't return any result to the console, now why is this so?

1. We initialized the "i" and "num" variables with values of 5 and 4, respectively.
2. The condition checks if the value of "i" is less than "num".
3. If true, it logs in each respective value.
4. Since the initial value of "i" exceeds that of "num", the loop never runs.

now let's take a similar example with the do-while loop.

let i = 5;
let num = 4;

do {
  console.log(i)
}
while ( i < num)

Output

5

The do-while loop ensures the execution of the code block, which returns 5 into the console, although "i" has a higher value than "num" initially, it's still logged in the console once. This representation shows you the difference in functionality between the do-while and while loop.

For loop

The for loop is a unique type of loop and one of the most commonly used loop by programmers, the for loop is a loop that runs a code block for a specific number of time depending on a condition. The for loop has the following syntax below.

for (Expression1...; Expression2....; Expression3...{
     //code block
}

Expression1: This part of a for loop is also known as the initialization area, it's the beginning of our for loop and the area where the counter variable is defined; the counter variable is used to track the number of times the loop runs and store that as a value.

Expression2: This is the second part of the loop, this part defines the conditional statement that would execute the loop.

Expression3: This is where the loop ends; the counter variable in this section updates its value after each iteration either by increasing or decreasing the value as specified in the condition.

Let's dive into an example using the for loop.

for (let i = 0; i < 100; i++) {
    console.log("Hello World" )
}

From the code snippet above, let's break it down together.

1. First, we've initialized the counter variable "i" with a value of zero.
2. Next, we've created the conditional statement that would keep the code running.
3. We compared the value of "i" with 100, if it passes this test, "Hello World" is logged.
4. This process repeats while the counter increases with +1 after each iteration.
5. The loop ends once the counter's value reaches 100.

Output

Hello World
Hello World
Hello World

...

//repeated 97 more times making it 100 "Hello World" in total
...

for-each loop

The for-each loop is a method in JavaScript that travels through an array and applies a callback function on each element in that array; a callback function is simply another function passed as a parameter into a function, the callback function works by running sequentially after the main function is done executing.

Let's examine the basic syntax of a for-each loop.

array.forEach(function(currentValue, index, arr))

The provided code above explains the workings of a for-each loop.

• This loop accepts three parameters, which are the current value, an index, and an array.
• The current value represents the present value of the element in the array.
• The index is an optional parameter that tells you the numbered position of the current element in that array.
• The arr is another optional parameter that tells you what array the element belongs to.

let myArray = [1, 2, 3, 4, 5];

array.forEach((num, index, arr) => {
  arr[index] = num * 2;

  console.log(array);
});

Let's break down the example above:

1. We initialized an array with the variable name "myArray" and stored it with integers ranging from 1 to 5.
2. The for-each array method takes three parameters and applies a callback function on the array.
3. This line; arr[index] = num * 2 multiplies the value of the current element by 2 and assigns the returned value to the current element's index.

Take note, the for-each array method does not return a new array; rather, it modifies the original array and returns it.

Output

[2, 4, 6, 8, 10]

What are for... in and for... of loops in JavaScript?

The for... in and for... of loops are very useful when it comes to iterating over iterable objects, iterable objects refers to any element that is capable of being looped over, common examples of iterables objects are arrays, strings, sets, etc.

The for... in and for... of are similar in how they iterate/move through objects, the main difference between them is shown on how they return values.

for... in loops

A for... in loop is useful when you need to extract the key(s)/properties from an object and it corresponding properties from the parent object, the for... in loop at times might iterate through an object in a manner that is different from the way it was defined in that particular object, let's take an example of a for... in loop in action.

let namesArray = [];

const studentScores = {
John: 60,
Dan: 53,
Tricia: 73,
Jamal: 45,
Jane: 52
}

for(const name in studentScores){
  namesArray.push(name);
}

console.log(namesArray);

In the example above, we have defined an object named studentScores that contains several student names and their corresponding scores, by using for... in, we were able to retrieve only the names of the students, which represent the keys of the object studentScores, and store them in an array by using the push() method.

Output

["John", "Dan", "Tricia", "Jamal", "Jane"]

for... of loops

The for... of loop is a special type of loop that iterates over the values of iterable objects such as arrays, strings, maps, e.t.c., for... of loops does not concern itself with the keys or properties of an object, rather it shows priorities on the values only, the for... of loop is unable to iterate over regular objects and will throw an error since they are not iterable. Let's take an example using the for.. of loop.

let numArray = [1,2,3,4,5]

for (const value of numArray) {
    console.log(value)
}

// Output = 1,2,3,4,5
In summary, the for... in and for... of loops are great way to loop through iterable objects, the main difference is a for... in loop returns the key of an Object while the for... of loop returns only the values of iterable objects.

What is an infinite loop and how can we avoid it?

An infinite loop refers to a loop that continues to run indefinitely; this occurs when a loop has no defined exit condition. Infinite loops are dangerous because they can crash your browser and lead to unwanted actions in your program.

// infinite loop sample
while (true) {
console.log("keep on running")
}
To prevent infinite loops in your program, always ensure that there is an exit condition defined within your loop.

Conclusion

Thank you very much for getting to the end of this article, loops in Javascript are important concept every developer needs to master as it is very valuable to creating a good and optimizable program, I believe with this article you would be able to understand the basics and intricacies of using loops in your program.

Das obige ist der detaillierte Inhalt vonJavaScript-Schleifen für Anfänger: Lernen Sie die Grundlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!