Įvaldykite „JavaScript“ kūrimo meną naudodami šiuos neįtikėtinus triukus

Daug kartų savo kode reikia pereiti per skaičių, eilučių ar objektų masyvą . Yra tik tiek būdų, kaip tai padaryti, ir šia mokymo programa siekiama išmokyti jus visus, kad taptumėte „Looping in JavaScript“ meistru.

Pamatykite šią nindzių katę, kuri yra šokinėjimo meistrė.

per GIPHY

Kaip ir katė, jūs taip pat tapsite „JavaScript Looping“ meistru, kai žinosite visas kilpų gudrybes.

1. „Už“ kilpa

For Loop“ yra pats paprasčiausias būdas pereiti prie „JavaScript“ kodo. Labai patogu kelis kartus vykdyti kodo bloką. Jis naudoja skaitiklį , kurio vertė pirmiausia inicijuojama, o tada nurodoma jo galutinė vertė.

Skaitiklis padidėjo tam tikra specifine verte kiekvieną kartą, kai kilpa veikia. „For loop“ patikrina, ar skaitiklis yra ribose (pradinė vertė iki galutinės vertės), ir ciklas baigiasi, kai skaitiklio vertė viršija galutinę vertę.

Leiskite parodyti jums keletą pavyzdžių.

a. Kilpa per masyvą

Žemiau esančiame kode peržiūriu visus masyvo skaičius ir atspausdinu juos visus konsolės lange.

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

Tokiu pačiu būdu jūs taip pat galite pereiti per eilutės masyvus.

b. Perėjimas per DOM elementus

Tarkime, kad norite rasti ir spalvoti visus inkarus puslapyje. Tada čia taip pat galite naudoti „ For Loop“ :

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

Paaiškinimas : Visus inkarus pirmiausia gavau iš masyvo naudodamas document.querySelectorAll("a"). Tada paprasčiausiai perėjau juos ir pakeičiau jų spalvą į raudoną.

Aš nuėjau į „W3Schools“ svetainę ir naršyklės konsolėje paleidžiau aukščiau nurodytą kodą ir pažiūrėjau, ką jis padarė:

Pastaba: „ jQuery“ taip pat turi labai gerą ciklo metodą, vadinamą „ jQuery“. Kiekvienas metodas padeda jums gana lengvai pereiti per masyvus, objektus, DOM elementus, JSON ir XML. Jei savo svetainėje naudojate „jQuery“, apsvarstykite galimybę jį naudoti vykdant ciklą.

2. „For In“ kilpa

Skirta in kilpa naudojama kilpų per objekto / masyvo savybių nenaudojant "skaitiklis". Taigi tai yra supaprastinta „ For Loop“ versija .

Kodo blokas ciklo viduje bus vykdomas vieną kartą kiekvienai nuosavybei.

a. Perėjimas per objekto ypatybes

Turiu objektą, kuriame yra keletas savybių. Aš naudosiu „ For In“ kilpą, norėdamas ieškoti kiekvienos nuosavybės ir jos vertės.

Žemiau pateiktas kodas atspausdina visas ypatybes ir jų reikšmes konsolės lange.

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

b. Loop per JSON

JSON yra labai populiarus formatas perduoti duomenų objektus, susidedančius iš atributų ir reikšmių porų ir masyvo duomenų tipų. Svetainės naudoja JSON, kad galėtų dalytis informacija su išorinėmis svetainėmis. Dabar aš jums pasakysiu, kaip išgauti duomenis iš JSON.

Tarkime, kad turiu JSON, kuriame yra šiek tiek informacijos, kaip parodyta žemiau:

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

JSON turi šakninį mazgą, vadinamą „ jsonData “, ir jame yra 3 mazgai - „ vienas “, „ du “, „ trys “. Mazgai dar vadinami klavišais.

Žemiau pateiktas kodas parodo, kaip išgauti informaciją iš JSON naudojant kilpą 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]) } }

Paaiškinimas : Pirmiau pateiktame kode yra 2 „In“ kilpos - išorinė kilpa ir vidinė kilpa.

Išorinis Ciklas tęsiasi 3 kartus ir apima mazgai "vienas", "du" & "trys".

Vidinis Ciklas apima visas viduje pasirinktas mazgas ty mazgai "vienas", "du", ir "trijų" vertybes.

Paleiskite kodą savo tinklalapyje arba naršyklės konsolės lange ir pamatysite visas atspausdintų mazgų vertes, kaip nurodyta toliau pateiktame paveikslėlyje:

Einame šiek tiek giliau į JSON

Tą patį JSON galima išreikšti dedant [] į 3 mazgus „vienas“, „du“, „trys“:

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

Dabar naudosiu „ For & For“ kilpų derinį, kad išgautų visą informaciją iš šio JSON. Žemiau pateiktas kodas man tai daro:

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. Kilpa „Nors“

Nors kilpa“ turi joje nurodytą sąlygą. Jis tikrina sąlygą ir vykdo kodo bloką tol, kol sąlyga yra teisinga . Atkreipkite dėmesį, kad „while“ kilpa neturi skaitiklio kaip „for loop“.

a. Perėjimas per HTML lentelės elementą

Tarkime, kad turiu HTML lentelę, kurioje rodomos skirtingų produktų kainos. Ši HTML lentelė atrodo kaip žemiau pateiktas vaizdas:

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)Bus pridėti 6-eilė, nes kintamasis "i" reikšmė yra 6 metu ir while cikle galuose.

Stulpeliai (elementas „td“) prie šios naujos eilutės pridedami row.insertCell(0), row.insertCell(1), row.insertCell(2).

Stulpelio viduje rodau vertę:

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

Aukščiau pateiktas „JavaScript“ kodas sukurs naują eilutę, kurioje bus nurodyta visa produkto kaina. Dabar lentelė atrodys taip:

b. Begalinis kilpas

Žemiau yra begalinė „Kaut“ sakinio kilpa:

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

Pastaba: begalinės kilpos gali pakabinti naršyklę, todėl ją reikia paleisti per kelias milisekundes. Norėdami paleisti nurodytą funkciją kas 1000 milisekundžių, galite naudoti „ JavaScript setInterval“ metodą . Žiūrėkite žemiau esantį kodą:

var myVar = setInterval(myTimer, 1000); function myTimer() { // your code }
Susipažinimo pamoka - „setTimeout ()“ ir „setInterval ()“ laikmačio metodų supratimas jQuery / JavaScript

4. Kilpa „Daryti“

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

Dėkojame už jūsų laiką skaitant šią pamoką. Tikiuosi, kad tai išmokė kažko naujo, kaip elgtis su „JavaScript“ kilpomis. Dabar savo žiniatinklio projekte galite pritaikyti bet kurią mėgstamą ciklo taktiką, aprašytą šioje pamokoje.

Per savaitę paskelbiu 2 straipsnius apie interneto svetainių kūrimą. Apsvarstykite galimybę sekti mane ir gauti pranešimą, kai aš paskelbiu naują mokymo programą „Medium“. Jei šis pranešimas buvo naudingas, prašome keletą kartų spustelėti mygtuką, kad parodytumėte savo palaikymą! Tai sukels šypseną mano veide ir paskatins daugiau rašyti tokiems skaitytojams kaip jūs.

Aš taip pat paskelbiau kitą „freeCodeCamp“ pamoką, kurią taip pat norėtumėte pamatyti - Kaip sukurti prisijungimo funkciją naudojant „Bootstrap Modal“ ir „jQuery AJAX“

Ačiū ir laimingo kodavimo!