S temi neverjetnimi triki obvladajte umetnost petljanja v JavaScript

Velikokrat v kodi potrebujete zanko skozi niz številk, nizov ali predmeta . Obstaja samo toliko načinov, kako to storiti, in ta vadnica vas želi naučiti vseh, tako da postanete mojster 'Looping in JavaScript'.

Oglejte si to ninja mačko, ki je mojster skakanja.

prek GIPHY

Tako kot mačka boste tudi vi postali mojster JavaScript Loopinga, potem ko poznate vse trike zanke.

1. Zanka »Za«

Za Loop je najbolj osnovni način za zanko v kodi JavaScript. Zelo priročno je večkrat izvesti blok kode. Uporablja števec , katerega vrednost je najprej inicializirana, nato pa je določena njegova končna vrednost.

Števec se poveča za določeno vrednost, vsakič, ko se zanka teče. Zanka for preveri, ali je števec znotraj omejitev (začetna vrednost do končne vrednosti), in zanka se konča, ko vrednost števca preseže končno vrednost.

Naj vam pokažem nekaj primerov.

a. Looping skozi matriko

V spodnji kodi pregledujem vse številke v polju in vsako od njih natisnem na okno konzole.

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

Na enak način lahko tudi vijugate skozi nize nizov.

b. Prelistavanje elementov DOM

Recimo, da želite poiskati in obarvati vsa sidra na strani rdeče. Potem lahko tudi tukaj uporabite zanko For :

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

Pojasnilo : Vsa sidra sem najprej dobil v nizu z uporabo document.querySelectorAll("a"). Potem sem jih preprosto previl in jim spremenil barvo v rdečo.

Odšel sem na spletno mesto W3Schools in na konzoli brskalnika zagnal zgornjo kodo in videl, kaj je naredil:

Opomba: jQuery ima tudi zelo dobro metodo zanke, imenovano jQuery Vsaka metoda, ki vam pomaga dokaj enostavno prečkati polja, predmete, elemente DOM, JSON in XML. Če na svojem spletnem mestu uporabljate jQuery, ga razmislite o uporabi med zanko.

2. Zanka »Za«

Za V zanka se uporablja za zanka skozi lastnosti predmeta / paleto brez uporabe "števec". Gre torej za poenostavljeno različico For Loop .

Blok kode znotraj zanke se izvede enkrat za vsako lastnost.

a. Pregledovanje lastnosti objekta

Imam predmet, ki vsebuje nekatere lastnosti. Bom uporabite v zanko , da poišče vse premoženje in vrednost, ki jo je.

Spodnja koda natisne vse lastnosti in njihove vrednosti v oknu konzole.

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

b. Looping skozi JSON

JSON je zelo priljubljena oblika za prenos podatkovnih objektov, sestavljena iz parov atribut-vrednost in podatkovnih tipov matrike. Spletna mesta uporabljajo JSON za izmenjavo svojih informacij z zunanjimi spletnimi mesti. Zdaj vam bom povedal, kako pridobiti podatke iz JSON-a.

Recimo, da imam nekaj JSON-a, ki vsebuje nekaj informacij, kot je prikazano spodaj:

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

JSON ima korensko vozlišče, imenovano ' jsonData ', in vsebuje 3 vozlišča - ' eno ', ' dve ', ' tri '. Vozlišča se imenujejo tudi ključi.

Spodnja koda prikazuje, kako iz zanke For In pridobiti informacije iz JSON :

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

Pojasnilo : V zgornji kodi sta 2 zanki za In - Zunanja zanka in Notranja zanka.

Zunanja Loop poteka 3-krat in zajema vozlišča "eno", "dva" & "tri".

Notranja Loop zajema vse vrednosti znotraj izbranega vozlišča tj vozlišč "ena", "dva", in "tri".

Zaženite kodo na svoji spletni strani ali v oknu konzole brskalnika in videli boste vse vrednosti vozlišč, natisnjenih, kot na spodnji sliki:

Pojdite malo globlje v JSON

Isti JSON lahko izrazimo tako, da postavimo [], da vsebuje tri vozlišča "eno", "dve", "tri":

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

Zdaj bom za izločanje vseh informacij iz tega JSON- a uporabil kombinacijo zank For & For In . Spodnja koda to dela zame:

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. Zanka »Medtem ko«

V zanki While je določeno stanje. Preveri stanje in izvede blok kode, dokler je pogoj resničen . Upoštevajte, da zanka while nima števca, kot je zanka for.

a. Pregledovanje elementa tabele HTML

Recimo, da imam tabelo HTML, ki prikazuje cene različnih izdelkov. Ta tabela HTML je videti kot spodnja slika:

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;

The table.insertRow(i)bo dodal 6. vrstico, ker je vrednost spremenljivke 'i' 6 v času, ko se zanka konča.

Stolpci (element 'td') so dodani v to novo vrstico z row.insertCell(0), row.insertCell(1), row.insertCell(2).

V stolpcu prikažem vrednost:

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

Zgornja koda JavaScript bo ustvarila novo vrstico, ki vsebuje skupno ceno izdelka. Zdaj bo tabela videti tako:

b. Neskončna zanka

Spodaj je neskončna zanka v stavku While:

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

Opomba: Neskončne zanke lahko obesijo brskalnik, zato je zanko potrebno zagnati s presledkom nekaj milisekund. Z metodo JavaScript setInterval lahko zaženete dano funkcijo vsakih 1000 milisekund. Glejte spodnjo kodo:

var myVar = setInterval(myTimer, 1000); function myTimer() { // your code }
Referenčna vadnica - Razumevanje načinov časovnika »setTimeout ()« in »setInterval ()« v jQuery / JavaScript

4. Zanka »Naredi medtem«

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 za vaš čas, ki ste ga prebrali. Upam, da vas je naučil nekaj novega o ravnanju z zankami v JavaScript. Zdaj lahko v svojem spletnem projektu uporabite katero koli svojo najljubšo taktiko zanke, opisano v tej vadnici.

Na teden objavim 2 članka o spletnem razvoju. Razmislite o tem, da bi me spremljali in prejeli obvestilo, kadar koli objavim novo vadnico o mediju. Če je bila ta objava koristna, nekajkrat kliknite na ploskanje, da pokažete svojo podporo! Prinesel mi bo nasmeh na obraz in me motiviral, da napišem več za bralce, kot ste vi.

Objavil sem tudi drugo vadnico o freeCodeCamp, tudi vi bi jo radi videli - Kako ustvariti funkcijo za prijavo z Bootstrap Modal in jQuery AJAX

Hvala in srečno kodiranje!