Ezekkel a hihetetlen trükkökkel sajátítsa el a JavaScript használatát

A kódban sokszor számok, karakterláncok vagy objektumok tömbjén kell végigmennie . Csak nagyon sokféleképpen lehet ezt megtenni, és ez az oktatóanyag célja mindannyiuk megtanítása, hogy a „Hurkolás a JavaScriptben” mesterévé váljanak.

Lásd ezt a ninja macskát, aki az ugrás mestere.

a GIPHY-n keresztül

A macskához hasonlóan Ön is a JavaScript Looping mesterévé válik, miután ismeri az összes hurok trükköt.

1. A „For” hurok

A For Loop a legalkalmasabb módja a JavaScript-kód bekapcsolásának. Nagyon hasznos, ha egy kódblokkot többször végrehajtunk. Számlálót használ , amelynek értékét először inicializálják, majd megadják a végső értékét.

A számláló egy adott értékkel növekszik minden alkalommal, amikor a hurok fut. A for ciklus ellenőrzi, hogy a számláló belül van-e a határokon (kezdeti érték a végső értékig), és a ciklus akkor ér véget, amikor a számláló értéke meghaladja a végső értéket.

Hadd mutassak néhány példát.

a. Hurok egy tömbön

Az alábbi kódban végignézem egy tömb összes számát , és mindegyiket kinyomtatom a konzol ablakára.

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

Ugyanígy a húr tömbjein is keresztül lehet lépkedni.

b. Hurkolás a DOM elemeken keresztül

Tegyük fel, hogy az oldalon található összes horgonyt meg akarja találni és pirosra színezni . Akkor itt is használhatja a For Loop-ot így:

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

Magyarázat : Először az összes horgonyt egy tömbben kaptam a használatával document.querySelectorAll("a"). Aztán egyszerűen hurkoltam rajtuk, és megváltoztattam a színüket vörösre.

Elmentem a W3Schools webhelyére, és a böngésző konzolon futtattam a fenti kódot, és megnéztem, hogy mit tett:

Megjegyzés: A jQuery rendelkezik egy nagyon jó looping módszerrel is, az úgynevezett jQuery Mindegyik módszerrel, amely segít tömbökön, objektumokon, DOM elemeken, JSON és XML-en keresztül végigkönnyíteni. Ha a webhelyén használja a jQuery szoftvert, fontolja meg a ciklus közben történő használatát.

2. A „For In” hurok

A For In ciklus egy objektum / tömb tulajdonságainak áttekintésére szolgál, számláló használata nélkül. Tehát a For Loop egyszerűsített változata .

A hurok belsejében lévő kódblokk minden tulajdonsághoz egyszer végrehajtásra kerül.

a. Hurok az objektum tulajdonságain

Van egy objektumom, amely tartalmaz néhány tulajdonságot. A For In ciklust használom minden tulajdonság és értékének felkutatására.

Az alábbi kód kinyomtatja az összes tulajdonságot és értéküket a konzol ablakban.

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

b. Hurok a JSON-on keresztül

A JSON nagyon népszerű formátum attribútum-érték párokból és tömb adattípusokból álló adatobjektumok továbbítására . A webhelyek a JSON-t használják, hogy megosszák információikat külső webhelyekkel. Most elmondom, hogyan lehet adatokat kinyerni egy JSON-ból.

Tegyük fel, hogy van néhány JSON-m, amely bizonyos információkat tartalmaz, az alábbiak szerint:

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

A JSON-nak van egy „ jsonData ” nevű gyökércsomópontja , amely 3 csomópontot tartalmaz - „ egy ”, „ kettő ”, „ három ”. A csomópontokat kulcsoknak is nevezik.

Az alábbi kód megmutatja, hogyan lehet információkat kinyerni a JSON-ból a For In ciklus segítségével:

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

Magyarázat : A fenti kódban 2 For In hurok található - Külső hurok és Belső hurok.

A külső hurok háromszor fut, és lefedi az „egy”, „kettő” és „három” csomópontokat.

A belső hurok lefedi az összes értéket a kiválasztott csomóponton belül, azaz az „egy”, „kettő” és „három” csomópontokat.

Futtassa a kódot a weboldalán vagy a böngésző konzolablakában, és megjelenik a nyomtatott csomópontok összes értéke, például az alábbi képen:

Kicsit elmélyülve a JSON-ban

Ugyanaz a JSON kifejezhető úgy, hogy a [] -be beírja a 3 csomópontot: „egy”, „kettő”, „három”:

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

Most a For & For In ciklusok kombinációját használom az összes információ kinyeréséhez ebből a JSON-ból. Az alábbi kód ezt a dolgot szolgálja nekem:

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. A „Míg” hurok

A While Loop egy feltételt tartalmaz. Ellenőrzi a feltételt és végrehajtja a kódblokkot, amíg a feltétel igaz . Vegye figyelembe, hogy a while ciklusnak nincs olyan számlálója, mint a for ciklusnak.

a. Hurok egy HTML tábla elemen keresztül

Tegyük fel, hogy van egy HTML-táblázatom, amely a különböző termékek árait mutatja. Ez a HTML táblázat az alábbi képnek tűnik:

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;

A table.insertRow(i)6. sor kerül hozzáadásra, mert az 'i' változó értéke 6, míg a Loop vége véget ér.

Oszlopok ('td' elem) hozzáadódnak ehhez az új sorhoz row.insertCell(0), row.insertCell(1), row.insertCell(2).

Az oszlopon belül egy értéket mutatok:

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

A fenti JavaScript-kód új sort hoz létre, amely tartalmazza a termék teljes árát. Most az asztal így fog kinézni:

b. Végtelen hurok

Az alábbiakban látható a While utasítás végtelen hurkja:

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

Megjegyzés: A végtelen hurkok felakaszthatják a böngészőt, ezért néhány másodpercnyi távolságon belül kell futtatni a hurkot. Használhatja a JavaScript setInterval metódust egy adott függvény 1000 milliszekundumonként történő futtatásához. Lásd az alábbi kódot:

var myVar = setInterval(myTimer, 1000); function myTimer() { // your code }
Referencia oktatóanyag - A „setTimeout ()” és a „setInterval ()” időzítő módszerek megértése a jQuery / JavaScript programban

4. A „Do while” hurok

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

Köszönjük, hogy elolvasta ezt az oktatóanyagot. Remélem, hogy valami újat tanított Önnek a JavaScript hurkok kezeléséről. Most alkalmazhatja az ebben az oktatóanyagban ismertetett kedvenc ciklustaktikát a webprojektjében.

Hetente 2 webfejlesztési cikket teszek közzé. Fontolja meg, hogy követ engem, és értesítést kap, ha új oktatóanyagot teszek közzé a Mediumon. Ha ez a bejegyzés hasznos volt, kérjük, kattintson néhányszor a taps gombra, hogy megmutassa támogatását! Mosolyt csal az arcomra, és arra ösztönöz, hogy többet írjak a hozzád hasonló olvasóknak.

Egy másik oktatóanyagot is közzétettem a freeCodeCamp-on, te is szeretnéd látni - Hogyan lehet létrehozni egy bejelentkezési funkciót a Bootstrap Modal és a jQuery AJAX használatával

Köszönet és Boldog kódolás!