Mestre kunsten at sløjfe i JavaScript med disse utrolige tricks

Mange gange i din kode skal du løbe gennem en række numre, strenge eller objekt . Der er bare så mange måder at gøre det på, og denne tutorial tager sigte på at lære dig dem alle, så du bliver en mester i 'Looping in JavaScript'.

Se denne ninjakat, der er mesteren i at hoppe.

via GIPHY

Ligesom katten bliver du også en Master of JavaScript Looping, når du kender alle looping-tricks.

1. "For" -sløjfen

Den for-løkke er den mest grundlæggende måde at sløjfe i din JavaScript-kode. Det er meget praktisk at udføre en blok kode et antal gange. Den bruger en tæller , hvis værdi først initialiseres, og derefter angives dens endelige værdi.

Den tæller øges med en bestemt værdi , hver gang løkken kører. For-sløjfen kontrollerer, om tælleren er inden for grænserne (startværdi til slutværdi), og sløjfen slutter, når tællerværdien går over den endelige værdi.

Lad mig vise dig nogle eksempler.

en. Looping gennem en matrix

I nedenstående kode løber jeg gennem alle numrene i en matrix og udskriver hver af dem på konsolvinduet.

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

På samme måde kan du også gennemgå arrays af streng.

b. Looping gennem DOM-elementer

Antag, at du vil finde og farve alle ankre på siden rød. Så også her kan du bruge For Loop sådan:

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

Forklaring : Jeg fik først alle ankre i en matrix ved hjælp af document.querySelectorAll("a"). Så sløjfede jeg simpelthen igennem dem og ændrede deres farve til rød.

Jeg gik til W3Schools-webstedet og kørte ovenstående kode på browserkonsollen og se hvad den gjorde:

Bemærk: jQuery har også en meget god looping-metode kaldet jQuery Hver metode, der hjælper dig med at løbe gennem arrays, objekter, DOM-elementer, JSON & XML ganske let. Hvis du bruger jQuery på dit websted, skal du overveje at bruge det, mens du sløjfer.

2. "For In" -sløjfen

Den efter i løkke anvendes til looping gennem egenskaberne for et objekt / matrix uden brug af en 'tæller'. Så det er en forenklet version af For Loop .

Kodeblokken inde i sløjfen udføres en gang for hver ejendom.

en. Looping gennem en Objektegenskaber

Jeg har et objekt, der indeholder nogle egenskaber. Jeg bruger For In-sløjfen til at søge efter hver ejendom, og dens værdi.

Nedenstående kode udskriver alle egenskaberne og deres værdier i konsolvinduet.

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

b. Looping gennem JSON

JSON er et meget populært format til transmission af dataobjekter, der består af attributværdipar og array-datatyper. Websteder bruger JSON til at dele deres oplysninger med eksterne websteder. Nu vil jeg fortælle dig, hvordan du udtrækker data fra en JSON.

Antag, at jeg har nogle JSON, der indeholder nogle oplysninger, som vist nedenfor:

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

JSON har en rodknude kaldet ' jsonData ', og denne indeholder 3 noder - ' en ', ' to ', ' tre '. Knudepunkterne kaldes også nøgler.

Nedenstående kode viser, hvordan man udtrækker information fra JSON ved hjælp af For In- sløjfen:

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]) } }

Forklaring : Der er 2 For In-sløjfer i ovenstående kode - Ydre sløjfe & Indre sløjfe.

Den ydre sløjfe kører 3 gange og dækker noder 'en', 'to' og 'tre'.

Den indre sløjfe dækker alle værdierne inden for den valgte node, dvs. noderne 'en', 'to' og 'tre'.

Kør koden på din webside eller i din browsers konsolvindue, og du vil se alle værdierne for de udskrevne noder, som i nedenstående billede:

Going a little deeper into the JSON

The same JSON can be expressed by putting [] to contain the 3 nodes ‘one’, ‘two’, ‘three’:

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

Now I will use a combination of For & For In loops to extract all information from this JSON. The below code does this work for me:

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. The “While” loop

The While Loop has a condition specified in it. It checks the condition and executes the code block as long as the condition is true. Note that the while loop does not havea counter like the for loop.

a. Looping through an HTML table element

Suppose I have an HTML table that shows the prices of different products. This HTML table looks like the below image:

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:


    
Id Product Name Product Price
1 Shirts 49.99
2 Pants 55.50
3 Socks 20
4 Shoes 99
5 Jackets 88.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;

Dette table.insertRow(i)tilføjer en 6. række, fordi variabel 'i' -værdien er 6 på det tidspunkt, mens While Loop slutter.

Kolonner ('td' element) føjes til denne nye række af row.insertCell(0), row.insertCell(1), row.insertCell(2).

Jeg viser en værdi inde i kolonnen ved:

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

Ovenstående JavaScript-kode opretter en ny række, der indeholder produktets samlede pris. Nu ser tabellen ud:

b. En uendelig løkke

Nedenfor er den uendelige løkke i While-udsagnet:

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

Bemærk: Uendelige sløjfer kan hænge browseren, så det er nødvendigt at køre sløjfen med et mellemrum på få millisekunder. Du kan bruge JavaScript setInterval-metoden til at køre en given funktion hver 1000 millisekunder. Se nedenstående kode:

var myVar = setInterval(myTimer, 1000); function myTimer() { // your code }
Referencevejledning - Forståelse af "setTimeout ()" og "setInterval ()" -tidsmetoder i jQuery / JavaScript

4. "Do While" -sløjfen

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

Tak for din tid til at læse denne vejledning. Jeg håber, det har lært dig noget nyt om håndtering af sløjfer i JavaScript. Nu kan du anvende en hvilken som helst af dine foretrukne loop-taktikker, beskrevet i denne vejledning, i dit webprojekt.

Jeg offentliggør 2 webudviklingsartikler om ugen. Overvej at følge mig og få besked, når jeg offentliggør en ny tutorial på Medium. Hvis dette indlæg var nyttigt, skal du klikke på klappeknappen et par gange for at vise din støtte! Det bringer et smil på mit ansigt og motiverer mig til at skrive mere til læserne som dig.

Jeg har også offentliggjort en anden tutorial på freeCodeCamp, du vil også gerne se det - Sådan oprettes en loginfunktion med Bootstrap Modal og jQuery AJAX

Tak og glad kodning!