Osvojte si umenie opakovania v JavaScripte pomocou týchto neuveriteľných trikov

Mnohokrát vo svojom kóde požadujete, aby ste prešli po rade čísel, reťazcov alebo objektov . Existuje len toľko spôsobov, ako to urobiť, a cieľom tohto tutoriálu je naučiť vás všetkých, aby ste sa stali majstrom „Looping in JavaScript“.

Pozrite sa na túto ninja mačku, ktorá je majstrom v skákaní.

cez GIPHY

Rovnako ako mačka sa stanete aj majstrom smyčkovania v JavaScripte, keď poznáte všetky triky v slučke.

1. Smyčka „Pre“

Pre Loop je najzákladnejší spôsob, ako sa slučka v kóde JavaScriptu. Je veľmi užitočné vykonať blok kódu niekoľkokrát. Používa počítadlo , ktorého hodnota sa najskôr inicializuje a potom sa zadá jeho konečná hodnota.

Čítač sa zvýši o určitú hodnotu zakaždým, keď je slučka beží. Smyčka for kontroluje, či je počítadlo v medziach (počiatočná hodnota až konečná hodnota), a slučka končí, keď hodnota počítadla prekročí konečnú hodnotu.

Ukážem vám niekoľko príkladov.

a. Looping through a Array

V nasledujúcom kóde prechádzam všetky čísla v poli a každé z nich tlačím na okno konzoly.

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

Rovnakým spôsobom môžete prechádzať aj radami reťazcov.

b. Opakovanie cez prvky DOM

Predpokladajme, že chcete nájsť a zafarbiť všetky kotvy na stránke červenou farbou. Potom aj tu môžete použiť slučku For Loop takto:

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

Vysvetlenie : Všetky kotvy v poli som najskôr dostal pomocou document.querySelectorAll("a"). Potom som ich jednoducho prešiel slučkou a zmenil ich farbu na červenú.

Išiel som na web W3Schools a spustil vyššie uvedený kód na konzole prehliadača a zistil, čo to urobilo:

Poznámka: jQuery má tiež veľmi dobrú metódu opakovania s názvom jQuery Každá metóda, ktorá vám pomôže celkom ľahko prechádzať polia, objekty, prvky DOM, JSON a XML. Ak na svojej webovej stránke používate jQuery, zvážte jeho použitie pri opakovaní.

2. Smyčka „Pre vstup“

V slučka sa používa na vytváranie slučiek prostredníctvom vlastností objektu / matice bez použitia, počítadlá '. Jedná sa teda o zjednodušenú verziu For Loop .

Blok kódu vo vnútri slučky sa vykoná raz pre každú vlastnosť.

a. Opakovanie cez vlastnosti objektu

Mám objekt, ktorý obsahuje niektoré vlastnosti. Budem používať pre vnútornú slučku , vyzvedať všetky vlastnosti a je to hodnota.

Nasledujúci kód vytlačí všetky vlastnosti a ich hodnoty v okne konzoly.

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

b. Opakovanie cez JSON

JSON je veľmi populárny formát na prenos dátových objektov, ktorý sa skladá z párov atribút-hodnota a dátových typov poľa. Webové stránky používajú JSON na zdieľanie svojich informácií s externými webovými stránkami. Teraz vám poviem, ako extrahovať údaje z JSON.

Predpokladajme, že mám nejaký JSON obsahujúci nejaké informácie, ako je uvedené nižšie:

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

JSON má koreňový uzol s názvom ' jsonData ' a obsahuje 3 uzly - ' jeden ', ' dva ', ' tri '. Uzly sa tiež nazývajú kľúče.

Nasledujúci kód ukazuje, ako extrahovať informácie z JSON pomocou slučky For In :

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

Vysvetlenie : Vo vyššie uvedenom kóde sú 2 slučky In In - vonkajšia slučka a vnútorná slučka.

Outer Loop beží 3x a pokrýva uzlov, jeden ',, dva' &, tri '.

Vnútorná slučka zahŕňa všetky hodnoty vnútri vybraného uzla tj uzlov, jeden ',, dve', a, tri '.

Spustite kód na svojej webovej stránke alebo v okne konzoly prehliadača a uvidíte všetky hodnoty uzlov vytlačené, ako na nasledujúcom obrázku:

Idem trochu hlbšie do JSON

Rovnaký súbor JSON možno vyjadriť tak, že [] obsahujete 3 uzly „jeden“, „dva“ a „tri“:

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

Teraz použijem kombináciu slučiek For & For In na extrahovanie všetkých informácií z tohto JSON. Nasledujúci kód funguje pre mňa:

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. Slučka „Zatiaľ čo“

V slučke While Loop je uvedená podmienka. Skontroluje stav a vykoná blok kódu, pokiaľ je podmienka pravdivá . Upozorňujeme, že cyklus while nemá počítadlo ako cyklus for.

a. Opakovanie cez prvok tabuľky HTML

Predpokladajme, že mám tabuľku HTML, ktorá zobrazuje ceny rôznych produktov. Táto tabuľka HTML vyzerá ako nasledujúci obrázok:

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;

table.insertRow(i)Pridá 6. riadok, pretože hodnota premennej, i 'je 6 v čase, keď Kým Loop koncoch.

Stĺpce (prvok „td“) pridá do tohto nového riadku používateľ row.insertCell(0), row.insertCell(1), row.insertCell(2).

Zobrazujem hodnotu vo vnútri stĺpca podľa:

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

Vyššie uvedený kód JavaScript vytvorí nový riadok obsahujúci celkovú cenu produktu. Teraz bude tabuľka vyzerať takto:

b. Nekonečné opakovanie

Ďalej je uvedená nekonečná slučka vo vyhlásení While:

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

Poznámka: Nekonečné slučky môžu zavesiť prehliadač, takže je potrebné spustiť slučku s odstupom niekoľkých milisekúnd. Môžete použiť metódu setInterval JavaScriptu na spustenie danej funkcie každých 1000 milisekúnd. Pozrite si nasledujúci kód:

var myVar = setInterval(myTimer, 1000); function myTimer() { // your code }
Referenčný tutoriál - Pochopenie metód časovača „setTimeout ()“ a „setInterval ()“ v prostredí jQuery / JavaScript

4. Smyčka „Do While“

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

Ďakujeme za váš čas strávený čítaním tohto tutoriálu. Dúfam, že vás to naučilo niečo nové o narábaní so slučkami v JavaScripte. Teraz môžete vo svojom webovom projekte uplatniť ktorúkoľvek zo svojich obľúbených taktík opakovania opísaných v tomto návode.

Publikujem 2 články o vývoji webu týždenne. Zvážte, či ma sledujete a dostanete upozornenie vždy, keď zverejním nový návod na médiu. Ak bol tento príspevok užitočný, kliknite prosím niekoľkokrát na tlačidlo tlieskať, čím prejavíte svoju podporu! Prinesie mi to úsmev na tvári a motivuje ma to písať viac pre čitateľov, ako ste vy.

Publikoval som tiež ďalší návod na freeCodeCamp, chceli by ste ho tiež vidieť - Ako vytvoriť funkciu prihlásenia pomocou Bootstrap Modal a jQuery AJAX

Ďakujeme a prajeme šťastné kódovanie!