Hallitse JavaScript-silmukan taito näillä uskomattomilla temppuilla

Monta kertaa koodissasi sinun täytyy selata joukkoa numeroita, merkkijonoja tai esineitä . On vain niin monia tapoja tehdä se, ja tämän opetusohjelman tarkoituksena on opettaa sinulle kaikille, jotta sinusta tulee Master of 'Looping in JavaScript'.

Katso tämä ninja-kissa, joka on hyppäämisen mestari.

kautta GIPHY

Kissan tavoin sinusta tulee myös JavaScript Looping -mestari, kun tiedät kaikki silmukat.

1. ”For” -silmukka

Sillä Loop on yksinkertaisin tapa silmukka oman JavaScript-koodin. On erittäin kätevää suorittaa koodilohko useita kertoja. Se käyttää laskuria , jonka arvo alustetaan ensin, ja sitten sen lopullinen arvo määritetään.

Laskuri on kasvanut tiettyyn arvoon joka kerta, kun silmukka loppuu. For for -silmukka tarkistaa, onko laskuri rajojen sisällä (alkuarvo lopulliseen arvoon), ja silmukka päättyy, kun laskurin arvo ylittää lopullisen arvon.

Haluan näyttää sinulle joitain esimerkkejä.

a. Silmukka läpi taulukon

Seuraavassa koodissa käyn läpi kaikki matriisin numerot ja tulostan ne kaikki konsoli-ikkunaan.

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

Samalla tavalla voit myös selata merkkijonorakenteita.

b. Silmukka DOM-elementtien läpi

Oletetaan, että haluat löytää ja värittää kaikki sivun ankkurit punaiseksi. Tässäkin tapauksessa voit käyttää For Loopia näin:

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

Selitys : Sain ensin kaikki ankkurit ryhmään käyttämällä document.querySelectorAll("a"). Sitten yksinkertaisesti silmukkasin niiden läpi ja muutin niiden värin punaiseksi.

Kävin W3Schools-sivustolla ja juoksin yllä olevan koodin selainkonsolissa ja katsoin, mitä se teki:

Huomaa: jQueryllä on myös erittäin hyvä silmukointimenetelmä nimeltä jQuery. Jokainen menetelmä auttaa sinua selaamaan matriiseja, objekteja, DOM-elementtejä, JSON- ja XML-tiedostoja melko helposti. Jos käytät jQueryä verkkosivustollasi, harkitse sen käyttöä silmukoitaessa.

2. ”For In” -silmukka

In silmukkaa käytetään kierrättämiseksi läpi objektin ominaisuudet / array käyttämättä 'laskuri'. Joten se on yksinkertaistettu versio For Loopista .

Silmukan sisällä oleva koodilohko suoritetaan kerran jokaiselle ominaisuudelle.

a. Silmukka objektin ominaisuuksien läpi

Minulla on esine, joka sisältää joitain ominaisuuksia. Käytän For In -silmukkaa etsimään jokaisen omaisuuden ja sen arvon.

Alla oleva koodi tulostaa kaikki ominaisuudet ja niiden arvot konsoli-ikkunaan.

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

b. Silmukka JSON: n kautta

JSON on erittäin suosittu muoto dataobjektien lähettämiseen, joka koostuu attribuutti-arvo- pareista ja matriisitietotyypeistä. Verkkosivustot käyttävät JSON-tekniikkaa tietojen jakamiseen ulkoisten verkkosivustojen kanssa. Nyt kerron sinulle, kuinka poimia tietoja JSON: sta.

Oletetaan, että minulla on JSON, joka sisältää joitain tietoja, kuten alla on esitetty:

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

JSON: lla on juurisolmu nimeltä ' jsonData ', ja se sisältää 3 solmua - ' yksi ', ' kaksi ', ' kolme '. Solmuja kutsutaan myös avaimiksi.

Alla oleva koodi näyttää, kuinka tietoja voidaan poimia JSONista For In -silmukalla:

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

Selitys : Yllä olevassa koodissa on 2 In-silmukkaa - ulkoinen silmukka ja sisäinen silmukka.

Outer Loop kulkee 3 kertaa ja kattaa solmut 'yksi', 'kaksi' ja 'kolme'.

Sisäsilmukassa kattaa kaikki arvot sisällä valitun solmun eli solmut 'yksi', 'kaksi', ja 'kolme'.

Suorita koodi verkkosivullasi tai selaimesi konsoli-ikkunassa, niin näet kaikki solmujen arvot tulostettuina, kuten alla olevassa kuvassa:

Menemme hieman syvemmälle JSON: iin

Sama JSON voidaan ilmaista asettamalla [] sisältämään 3 solmua 'yksi', 'kaksi', 'kolme':

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

Nyt käytän For & For In -silmukoiden yhdistelmää poimimaan kaikki tiedot tästä JSONista. Seuraava koodi tekee tämän työn minulle:

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. ”Vaikka” -silmukka

Vaikka Loop on ehto sen. Se tarkistaa ehdon ja suorittaa koodilohkon niin kauan kuin ehto on totta . Huomaa, että while-silmukassa ei ole laskuria kuin for-silmukassa.

a. Looping HTML-taulukkoelementin läpi

Oletetaan, että minulla on HTML-taulukko, joka näyttää eri tuotteiden hinnat. Tämä HTML-taulukko näyttää seuraavalta kuvalta:

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)Tuo 6. rivi, koska muuttuja 'i' arvo on 6, kun Vaikka Loop päät.

Sarakkeet ('td' -elementti) lisätään tähän uuteen riviin row.insertCell(0), row.insertCell(1), row.insertCell(2).

Näytän arvon sarakkeen sisällä seuraavasti:

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

Yllä oleva JavaScript-koodi luo uuden rivin, joka sisältää tuotteen kokonaishinnan. Nyt taulukko näyttää tältä:

b. Ääretön silmukka

Alla on ääretön silmukka While-lauseessa:

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

Huomaa: Äärettömät silmukat voivat ripustaa selaimen, joten silmukka on suoritettava muutaman millisekunnin välein. Voit käyttää JavaScripti setInterval -menetelmää tietyn toiminnon suorittamiseen 1000 millisekunnin välein. Katso alla oleva koodi:

var myVar = setInterval(myTimer, 1000); function myTimer() { // your code }
Viiteopas - SetTimeout () - ja setInterval () -ajastustapojen ymmärtäminen jQuery / JavaScript-ohjelmassa

4. ”Do While” -silmukka

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

Kiitos ajastasi tämän opetusohjelman lukemiselle. Toivon, että se on opettanut sinulle jotain uutta silmukoiden käsittelemisestä JavaScriptissä. Nyt voit käyttää mitä tahansa tässä opetusohjelmassa kuvattua suosikkisilmukkataktiikkaa verkkoprojektissasi.

Julkaisen 2 verkkokehitysartikkelia viikossa. Harkitse minun seuraamista ja saan ilmoituksen aina, kun julkaisen uuden opetusohjelman Mediumissa. Jos tästä viestistä oli hyötyä, napsauta taputuspainiketta muutaman kerran osoittaaksesi tukesi! Se tuo hymyn kasvoilleni ja motivoi minua kirjoittamaan enemmän lukijoille kuin sinä.

Olen myös julkaissut toisen opetusohjelman freeCodeCampista, sinäkin haluaisit nähdä sen - Kuinka luoda kirjautumisominaisuus Bootstrap Modalilla ja jQuery AJAX: lla

Kiitos ja hyvää koodausta!