Ovladajte umijećem petljanja u JavaScript-u s ovim nevjerojatnim trikovima

Mnogo puta u kodu trebate petlju kroz niz brojeva, nizova ili predmeta . Postoji samo toliko načina kako to učiniti, a ovaj vam vodič želi naučiti sve njih tako da postanete majstor 'petlje u JavaScriptu'.

Pogledajte ovu mačku nindžu koja je majstor skakanja.

putem GIPHY-a

Poput mačke, i vi ćete postati majstor JavaScript petlje, nakon što znate sve trikove petlje.

1. Petlja "Za"

Za Petlja je najosnovniji način da se petlja u vaš JavaScript koda. Vrlo je zgodno izvršiti blok koda nekoliko puta. Koristi brojač čija se vrijednost prvo inicijalizira, a zatim se navodi njegova konačna vrijednost.

Brojač se povećava za određenu vrijednost svaki put petlje traje. Petlja for provjerava je li brojač unutar ograničenja (početna vrijednost do konačne vrijednosti), a petlja završava kad vrijednost brojača prijeđe krajnju vrijednost.

Dopustite mi da vam pokažem nekoliko primjera.

a. Prelistavanje niza

U donjem kodu pregledavam sve brojeve u nizu i ispisujem svaki od njih na prozoru konzole.

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

Na isti način možete provući i niz nizova.

b. Prelistavanje DOM elemenata

Pretpostavimo da želite pronaći i obojiti sva sidra na stranici crveno. Tada i ovdje možete koristiti For Loop ovako:

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

Objašnjenje : Prvo sam dobio sva sidra u nizu pomoću document.querySelectorAll("a"). Tada sam ih jednostavno provukao i promijenio njihovu boju u crvenu.

Otišao sam na web mjesto W3Schools i pokrenuo gornji kod na konzoli preglednika i vidio što je učinio:

Napomena: jQuery također ima vrlo dobru metodu petlje koja se naziva jQuery Svaka metoda koja vam pomaže da vrlo lako prođete kroz nizove, objekte, DOM elemente, JSON i XML. Ako na svom web mjestu koristite jQuery, razmislite o korištenju tijekom petlje.

2. Petlja "Za"

Za u petlji se koristi za petlje kroz svojstva objektno / polja , bez korištenja „” brojača. Dakle, riječ je o pojednostavljenoj verziji For Loop .

Blok koda unutar petlje izvršit će se jednom za svako svojstvo.

a. Pregledavanje svojstava objekta

Imam objekt koji sadrži neka svojstva. Upotrijebit ću petlju For In da bih pretražio svako svojstvo i njegovu vrijednost.

Kôd u nastavku ispisuje sva svojstva i njihove vrijednosti u prozoru konzole.

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

b. Prelistavanje JSON-a

JSON je vrlo popularan format za prijenos podatkovnih objekata koji se sastoje od parova atribut-vrijednost i tipova podataka niza. Web stranice koriste JSON za dijeljenje svojih podataka s vanjskim web mjestima. Sada ću vam reći kako izvući podatke iz JSON-a.

Pretpostavimo da imam neki JSON koji sadrži neke informacije, kao što je prikazano u nastavku:

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

JSON ima korijenski čvor nazvan ' jsonData ', a on sadrži 3 čvora - ' jedan ', ' dva ', ' tri '. Čvorovi se nazivaju i ključevi.

Donji kod pokazuje kako izvući podatke iz JSON-a pomoću petlje 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]) } }

Objašnjenje : U gornjem kodu postoje 2 petlje In u - vanjska petlja i unutarnja petlja.

Outer Loop traje 3 puta i pokriva čvorovi „jedan”, „dva” & „tri”.

Unutarnja petlja pokriva sve vrijednosti unutar odabranog čvora odnosno čvorovi „One”, „dva”, ' „tri”.

Pokrenite kod na svojoj web stranici ili u prozoru konzole preglednika i vidjet ćete sve vrijednosti čvorova ispisanih, kao na donjoj slici:

Ulazeći malo dublje u JSON

Isti JSON može se izraziti stavljanjem [] da sadrži 3 čvora 'jedan', 'dva', 'tri':

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

Sada ću upotrijebiti kombinaciju petlji For & For In za izdvajanje svih podataka iz ovog JSON-a. Kôd u nastavku to mi odgovara:

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. Petlja "Dok"

While petlja ima uvjet naveden u njoj. Provjerava stanje i izvršava blok koda sve dok je uvjet istinit . Imajte na umu da while petlja nema brojač poput for petlje.

a. Prelistavanje elementa HTML tablice

Pretpostavimo da imam HTML tablicu koja prikazuje cijene različitih proizvoda. Ova HTML tablica izgleda poput donje slike:

Možete vidjeti da ova tablica ne prikazuje ukupnu cijenu svih proizvoda. Dakle, ako za vas postoji potreba da prikažete ukupnu cijenu, tada možete pregledati sve cijene i prikazati ukupnu cijenu u podnožju tablice. Ovako ćete to učiniti.

Dodajte kod HTML tablice na svoju web stranicu:


    
Id Product Name Product Price
1 Shirts 49.99
2 Pants 55.50
3 Socks 20
4 Shoes 99
5 Jackets 88.90

Zatim dodajte CSS za davanje pravilnog dizajna ovoj html tablici:

 #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; } 

Sada loop stol s while petlja i izračunati zbroj svih proizvoda. Dakle, dodajte donji JavaScript kôd na svoju web stranicu koja radi ovaj posao:

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;

Objašnjenje : Prvo dobivam referencu tablice pomoću var table = document.getElementById("priceTable"). Tada sam dodao 2 varijable zvane 'i' i 'sum'. Varijabla 'i' uvjetna je varijabla while petlje, dok će 'zbroj' u nju neprestano dodavati cijenu svakog proizvoda.

Stoga sam pokrenuo while petlju za vrijednost varijable 'i' od 1 do (ukupno redaka -1). Dobio sam sve retke u tablici koju table.rows.length i dodao da je stanje u while petlji:

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

Napomena : Tablica ima 6 redaka od indeksa 0 do 5, a svaki redak ima 3 stupca od indeksa 0 do 2. Posebno sam pokrenuo petlju od vrijednosti "i" varijable 1, a ne 0. To je zato što je u 0-om indeksu u redu tablice nalazi se naziv stupca (koji mi ne treba).

Unutar while petlje nastavio sam dodavati vrijednosti cijene svakog proizvoda na varijablu zbroja poput ove: sum += parseFloat(table.rows[i].cells[2].innerHTML)i na kraju povećao vrijednost 'i' za 1.

Na primjer, kada je vrijednost 'i' 1, tada table.rows[1]mi daje prvi redak (prvi element 'tr'). Slično table.rows[1].cells[2]će dati vrijednost stupca cijene (element 'td' element) prvog reda.

Nakon završetka petlje dodajem novi red u tablicu na samom kraju. Unutar ovog retka dodajem 3 stupca - 0. indeks, 1. indeks i 2. indeks. Napokon prikazujem niz 'ukupno' u prvom stupcu i ukupnu cijenu koja se nalazi u varijabli 'zbroj' u drugom stupcu .

Kôd koji dodaje ovaj novi redak je:

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;

The table.insertRow(i)će dodati 6. redak jer je vrijednost varijable 'i' 6 u trenutku dok Loop završava.

Stupci (element 'td') dodaju se u ovaj novi redak pomoću row.insertCell(0), row.insertCell(1), row.insertCell(2).

Prikazujem vrijednost unutar stupca prema:

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

Gornji JavaScript kôd stvorit će novi redak koji sadrži ukupnu cijenu proizvoda. Sada će tablica izgledati ovako:

b. Beskrajno petljanje

Ispod je beskonačna petlja u naredbi While:

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

Napomena: Beskonačne petlje mogu objesiti preglednik pa je petlju potrebno pokrenuti u razmaku od nekoliko milisekundi. Možete koristiti JavaScript setInterval metodu za pokretanje zadane funkcije svakih 1000 milisekundi. Pogledajte donji kod:

var myVar = setInterval(myTimer, 1000); function myTimer() { // your code }
Referentni vodič - Razumijevanje metoda odbrojavanja “setTimeout ()” i “setInterval ()” u jQuery / JavaScript

4. Petlja "Napravi dok"

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

Hvala vam što ste odvojili vrijeme za čitanje ovog vodiča. Nadam se da vas je naučio nečem novom u vezi s petljama u JavaScript-u. Sada u svom web projektu možete primijeniti bilo koju svoju omiljenu taktiku petlje, opisanu u ovom vodiču.

Tjedno objavljujem 2 članka o web razvoju. Razmislite o tome da me slijedite i primite obavijest kad god objavim novi vodič na Medijumu. Ako je ovaj post bio koristan, kliknite nekoliko puta gumb za pljeskanje kako biste pokazali svoju podršku! Izmamit će mi osmijeh na lice i motivirat će me da napišem više za čitatelje poput vas.

Također sam objavio još jedan vodič o freeCodeCampu, i vi biste ga voljeli vidjeti - Kako stvoriti značajku za prijavu pomoću Bootstrap Modal i jQuery AJAX

Hvala i sretno kodiranje!