Meistern Sie die Kunst des Loopings in JavaScript mit diesen unglaublichen Tricks

In Ihrem Code müssen Sie häufig eine Reihe von Zahlen, Zeichenfolgen oder Objekten durchlaufen . Es gibt einfach so viele Möglichkeiten, und dieses Tutorial soll Ihnen alle beibringen, damit Sie ein Meister des 'Looping in JavaScript' werden.

Sehen Sie diese Ninja-Katze, die der Meister des Springens ist.

über GIPHY

Wie die Katze werden auch Sie ein Meister des JavaScript-Loopings, nachdem Sie alle Loop-Tricks kennen.

1. Die For-Schleife

Die For-Schleife ist die einfachste Möglichkeit, Ihren JavaScript-Code zu schleifen. Es ist sehr praktisch, einen Codeblock mehrmals auszuführen. Es wird ein Zähler verwendet , dessen Wert zuerst initialisiert wird, und dann wird sein Endwert angegeben.

Der Zähler wird bei jeder Ausführung der Schleife um einen bestimmten Wert erhöht . Die for-Schleife prüft, ob sich der Zähler innerhalb der Grenzen befindet (Anfangswert bis Endwert), und die Schleife endet, wenn der Zählerwert den Endwert überschreitet.

Lassen Sie mich Ihnen einige Beispiele zeigen.

ein. Durchlaufen eines Arrays

Im folgenden Code durchlaufe ich alle Zahlen in einem Array und drucke sie jeweils im Konsolenfenster aus.

var numbers = [10, 20, 30, 40, 50]; for (var i = 0; i < numbers.length; i++) { console.log(numbers[i]); }

Auf die gleiche Weise können Sie auch String-Arrays durchlaufen.

b. Durchlaufen von DOM-Elementen

Angenommen, Sie möchten alle Anker auf der Seite rot finden und einfärben . Dann können Sie auch hier die For-Schleife wie folgt verwenden:

var elements = document.querySelectorAll("a"); for (var i= 0; i < elements.length; i++) { elements[i].style.color = "red"; }

Erläuterung : Ich habe zuerst alle Anker in einem Array mithilfe von erhalten document.querySelectorAll("a"). Dann habe ich sie einfach durchlaufen und ihre Farbe in Rot geändert.

Ich ging zur W3Schools-Site und führte den obigen Code auf der Browserkonsole aus und sah, was er tat:

Hinweis: jQuery verfügt auch über eine sehr gute Schleifenmethode namens jQuery. Jede Methode hilft Ihnen dabei, Arrays, Objekte, DOM-Elemente, JSON und XML ganz einfach zu durchlaufen. Wenn Sie jQuery auf Ihrer Website verwenden, sollten Sie es während des Loopings verwenden.

2. Die "For In" -Schleife

Die For In- Schleife wird zum Durchlaufen der Eigenschaften eines Objekts / Arrays ohne Verwendung eines 'Zählers' verwendet. Es handelt sich also um eine vereinfachte Version der For-Schleife .

Der Codeblock innerhalb der Schleife wird für jede Eigenschaft einmal ausgeführt.

ein. Durchlaufen von Objekteigenschaften

Ich habe ein Objekt, das einige Eigenschaften enthält. Ich werde die For In-Schleife verwenden , um jede Eigenschaft und ihren Wert zu suchen.

Der folgende Code druckt alle Eigenschaften und ihre Werte im Konsolenfenster.

var person = { fname: "Nick", lname: "Jonas", age: 26 }; for (var x in person) { console.log(x + ": " + person[x]) }

b. Durchlaufen von JSON

JSON ist ein sehr beliebtes Format zum Übertragen von Datenobjekten, die aus Attribut-Wert- Paaren und Array-Datentypen bestehen. Websites verwenden JSON, um ihre Informationen mit externen Websites zu teilen. Jetzt werde ich Ihnen erklären, wie Sie Daten aus einem JSON extrahieren.

Angenommen, ich habe JSON, das einige Informationen enthält, wie unten gezeigt:

jsonData: { one: [11, 12, 13, 14, 15], two: [21, 22, 23], three: [31, 32] }

Der JSON hat einen Stammknoten namens ' jsonData ', der drei Knoten enthält - ' eins ', ' zwei ', ' drei '. Die Knoten werden auch Schlüssel genannt.

Der folgende Code zeigt, wie Informationen mithilfe der For In- Schleife aus JSON extrahiert werden :

var json = { jsonData: { one: [11, 12, 13, 14, 15], two: [21, 22, 23], three: [31, 32] } }; for (var key in json.jsonData) { for (var key1 in json.jsonData[key]) { console.log(json.jsonData[key][key1]) } }

Erläuterung : Der obige Code enthält 2 For In-Schleifen - Outer Loop und Inner Loop.

Die äußere Schleife wird dreimal ausgeführt und deckt die Knoten 'eins', 'zwei' und 'drei' ab.

Die innere Schleife deckt alle Werte innerhalb des ausgewählten Knotens ab, dh die Knoten 'eins', 'zwei' und 'drei'.

Führen Sie den Code auf Ihrer Webseite oder im Konsolenfenster Ihres Browsers aus, und Sie sehen alle Werte der gedruckten Knoten wie im folgenden Bild:

Gehen Sie etwas tiefer in den JSON hinein

Der gleiche JSON kann ausgedrückt werden, indem [] die drei Knoten 'eins', 'zwei', 'drei' enthält:

jsonData: [{ one: [11, 12, 13, 14, 15] }, { two: [21, 22, 23] }, { three: [31, 32] }]

Jetzt werde ich eine Kombination von For & For In- Schleifen verwenden, um alle Informationen aus diesem JSON zu extrahieren. Der folgende Code funktioniert für mich:

var json = { jsonData: [{ one: [11, 12, 13, 14, 15] }, { two: [21, 22, 23] }, { three: [31, 32] }] }; for (var i = 0; i < json.jsonData.length; i++) { for (var key in json.jsonData[i]) { for (var j = 0; j < json.jsonData[i][key].length; j++) { console.log(json.jsonData[i][key][j]) } } }

3. Die "While" -Schleife

In der While-Schleife ist eine Bedingung angegeben. Es überprüft die Bedingung und führt den Codeblock aus, solange die Bedingung erfüllt ist . Beachten Sie, dass die while-Schleife keinen Zähler wie die for-Schleife hat.

ein. Durchlaufen eines HTML-Tabellenelements

Angenommen, ich habe eine HTML-Tabelle , in der die Preise verschiedener Produkte angezeigt werden. Diese HTML-Tabelle sieht wie folgt aus:

You can see that this table does not show the total price of all the products. So if there is a requirement for you to show the total price then you can loop through all the prices and show the total in the table footer. This is how you will do it.

Add the HTML Table code to your web page:

IdProduct NameProduct Price
1Shirts49.99
2Pants55.50
3Socks20
4Shoes99
5Jackets88.90

Next, add the CSS for giving proper design to this html table:

 #priceTable { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } #priceTable td, #priceTable th { border: 1px solid #ddd; padding: 8px; } #priceTable tr { background-color: #f2f2f2; } #priceTable th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #4CAF50; color: white; } 

Now loop through the table with the While loop and calculate the sum of all products. So add the below JavaScript code to your web page that does this work:

var table = document.getElementById("priceTable"); var i = 1; var sum = 0; while (i < table.rows.length) { sum += parseFloat(table.rows[i].cells[2].innerHTML) i++; } var row = table.insertRow(i); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell2.innerHTML = "Total Price"; cell3.innerHTML = sum;

Explanation: First I get the reference of the table by using var table = document.getElementById("priceTable"). Then I added 2 variables called ‘i’ and ‘sum’. The variable ‘i’ is the conditional variable of the while loop, while ‘sum’ will keep adding the price of every product into it.

So I ran the while loop for the variable ‘i’ value from 1 to the (total rows -1). I got the total rows in the table by table.rows.length and added it to the condition of the while loop:

while (i < table.rows.length) { //… }

Note: The table has 6 rows from index 0 to 5, and each row has 3 columns from index 0 to 2. I specifically ran the loop from ‘i’ variable value of 1 and not 0. This is because in the 0th index of the table’s row there is the column’s name (which I don’t need).

Inside the while loop I kept on adding the values of each product’s price to the sum variable like this:sum += parseFloat(table.rows[i].cells[2].innerHTML) and at the end increased the value of ‘i’ by 1.

For example, when ‘i’ value is 1 then table.rows[1] gives me the first row (first ‘tr’ element). Similarly table.rows[1].cells[2] will give the value of price column (price ‘td’ element) of the first row.

After the loop completes, I am adding a new row to the table at the very end. Inside this row I am adding the 3 columns — 0th index, 1st index, and 2nd index. Finally I am showing the string ‘total’ in the 1st column and total price contained in the ‘sum’ variable in the 2nd column.

The code which does the addition of this new row is:

var row = table.insertRow(i); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell2.innerHTML = "Total Price"; cell3.innerHTML = sum;

Das table.insertRow(i)fügt eine 6. Zeile hinzu, da der Wert der Variablen 'i' zum Zeitpunkt des Endes der While-Schleife 6 ist .

Spalten ('td'-Element) werden dieser neuen Zeile von hinzugefügt row.insertCell(0), row.insertCell(1), row.insertCell(2).

Ich zeige einen Wert in der Spalte durch:

cell2.innerHTML = "Total Price"; cell3.innerHTML = sum;

Der obige JavaScript-Code erstellt eine neue Zeile mit dem Gesamtpreis des Produkts. Jetzt sieht die Tabelle so aus:

b. Eine unendliche Schleife

Unten ist die Endlosschleife in der While-Anweisung:

var infiVal = true; while (infiVal) { // your code }

Hinweis: Endlosschleifen können den Browser hängen lassen, sodass die Schleife mit einer Lücke von einigen Millisekunden ausgeführt werden muss. Mit der JavaScript-Methode setInterval können Sie alle 1000 Millisekunden eine bestimmte Funktion ausführen. Siehe den folgenden Code:

var myVar = setInterval(myTimer, 1000); function myTimer() { // your code }
Referenz-Tutorial - Grundlegendes zu den Timer-Methoden "setTimeout ()" und "setInterval ()" in jQuery / JavaScript

4. Die "Do While" -Schleife

In Do While loop the condition to be checked is given at the end, and so the loop executes at least once even if the condition is not true. Check the below code that will give a ‘Hello’ message on the alert box, even if the condition is false right from the beginning (as variable ‘i’ value is always greater than 1).

var i = 2; do { alert("Hello"); i++; } while (i < 1);

a. Looping through XML

Now I will use the Do While loop for how to loop through XML and extract data from it. I have an XML file called ‘XMLFile1.xml’ whose content is:

  Washington DC Islamabad Beijing Tokyo 

I will use AJAX to read this XML file and then loop through it with Do While loop. The below code prints all the names of the cities (given in the XML file) in the console window.

var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "XMLFile1.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; var cityNames = Array.from(xmlDoc.getElementsByTagName("city")); var i = 0; do { console.log(cityNames[i].innerHTML); i++; } while (i < cityNames.length); }

Explanation: I created an XMLHttpRequest object for making the AJAX call. When the XML file is read then the event called onreadystatechange is raised, see below code:

xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { myFunction(this); } };

In this event I am calling my custom function called myFunction(). Here, I store the XML contents inside a variable called xmlDoc:

var xmlDoc = xml.responseXML;

Then I converted all the city names into an array:

var cityNames = Array.from(xmlDoc.getElementsByTagName("city"));

Finally I loop through this array of cities using Do While loop and print each city name in the console window:

var i = 0; do { console.log(cityNames[i].innerHTML); i++; } while (i < cityNames.length);

The below image illustrates the output printed on the console:

5. The “.forEach()” method

The ES6 edition of JavaScript introduced a new method called .forEach() for looping through an array elements. You will find it very handy when dealing with Arrays.

a. Looping through an array with .forEach() method:

In this situation I loop through an array element with the .forEach() method and print the index and value of every element in the console window. See the code below:

var names = ["jerry", "tom", "pluto", "micky", "mini"]; names.forEach(Function1); function Function1(currentValue, index) { console.log("Array Current Index is: " + index + " :: Value is: " + currentValue); }

Function1 is the name of the function which gets called for every element of the array. In my case it will be called 5 times. It accepts 2 parameters — ‘index’ and ‘value’ of the current element.

Note that you can convert an object to an array by using the Array.from() method:

var linksArr = Array.from(links);

Conclusion

Vielen Dank für Ihre Zeit beim Lesen dieses Tutorials. Ich hoffe, es hat Ihnen etwas Neues über den Umgang mit Schleifen in JavaScript beigebracht. Jetzt können Sie jede Ihrer in diesem Tutorial beschriebenen bevorzugten Schleifentaktiken in Ihrem Webprojekt anwenden.

Ich veröffentliche 2 Webentwicklungsartikel pro Woche. Folgen Sie mir und erhalten Sie eine Benachrichtigung, wenn ich ein neues Tutorial auf Medium veröffentliche. Wenn dieser Beitrag hilfreich war, klicken Sie bitte einige Male auf die Schaltfläche "Klatschen", um Ihre Unterstützung zu zeigen! Es wird ein Lächeln auf mein Gesicht zaubern und mich motivieren, mehr für Leser wie Sie zu schreiben.

Ich habe auch ein weiteres Tutorial auf freeCodeCamp veröffentlicht. Sie möchten es auch sehen - So erstellen Sie eine Anmeldefunktion mit Bootstrap Modal und jQuery AJAX

Vielen Dank und viel Spaß beim Codieren!