Stăpânește arta buclării în JavaScript cu aceste trucuri incredibile

De multe ori în codul dvs. trebuie să parcurgeți o serie de numere, șiruri sau obiecte . Există doar atât de multe modalități de a face acest lucru, iar acest tutorial își propune să vă învețe pe toate, astfel încât să deveniți un Maestru al „Buclării în JavaScript”.

Vedeți această pisică ninja care este stăpânul săriturilor.

prin GIPHY

La fel ca pisica, veți deveni și Maestru al JavaScript Looping, după ce veți cunoaște toate trucurile de looping.

1. Bucla „Pentru”

Pentru bucla este cel mai mod de bază la bucla în codul JavaScript. Este foarte util să executați un bloc de cod de mai multe ori. Folosește un contor , a cărui valoare este inițializată inițial, iar apoi este specificată valoarea sa finală.

Contorul este crescut cu o valoare specifică de fiecare dată când bucla se execută. Bucla for verifică dacă contorul se află în limite (valoarea inițială până la valoarea finală), iar bucla se termină atunci când valoarea contorului depășește valoarea finală.

Permiteți-mi să vă arăt câteva exemple.

A. Buclând printr-o matrice

În codul de mai jos, parcurg toate numerele dintr-o matrice și le imprim pe fiecare pe fereastra consolei.

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

În același mod, puteți parcurge și matricile de șiruri.

b. Buclarea prin elemente DOM

Să presupunem că doriți să găsiți și să colorați toate ancorele din pagină în roșu. Apoi și aici puteți folosi For Loop astfel:

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

Explicație : Am primit mai întâi toate ancorele dintr-o matrice folosind document.querySelectorAll("a"). Apoi, pur și simplu am trecut prin ele și le-am schimbat culoarea în roșu.

Am mers pe site-ul W3Schools și am rulat codul de mai sus pe consola browserului și am văzut ce a făcut:

Notă: jQuery are, de asemenea, o metodă de looping foarte bună numită jQuery Fiecare metodă care vă ajută să vă buclați prin matrici, obiecte, elemente DOM, JSON și XML destul de ușor. Dacă utilizați jQuery pe site-ul dvs. web, atunci luați în considerare utilizarea acestuia în timp ce faceți o buclă.

2. Bucla „For In”

Pentru In bucla este utilizat pentru luping prin proprietățile unui obiect / array fără a utiliza un „contor“. Deci, este o versiune simplificată a For Loop .

Blocul de cod din interiorul buclei va fi executat o dată pentru fiecare proprietate.

A. Buclarea printr-un obiect Proprietăți

Am un obiect care conține unele proprietăți. Voi folosi bucla For In pentru a căuta fiecare proprietate și valoarea ei.

Codul de mai jos tipărește toate proprietățile și valorile acestora în fereastra consolei.

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

b. În buclă prin JSON

JSON este un format foarte popular pentru a transmite obiecte de date constând din perechi atribut-valoare și tipuri de date matrice. Site-urile folosesc JSON pentru a partaja informațiile lor cu site-uri web externe. Acum vă voi spune cum să extrageți date dintr-un JSON.

Să presupunem că am un JSON care conține unele informații, așa cum se arată mai jos:

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

JSON are un nod rădăcină numit „ jsonData ” și acesta conține 3 noduri - „ unul ”, „ doi ”, „ trei ”. Nodurile sunt, de asemenea, numite chei.

Codul de mai jos arată cum să extrageți informații din JSON folosind bucla 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]) } }

Explicație : Există 2 bucle For In în codul de mai sus - Buclă exterioară și buclă interioară.

Exterior Bucla ruleaza de 3 ori și capace noduri „unu“, „doi“ și „trei“.

Bucla interioară acoperă toate valorile din interiorul selectat nodul respectiv nodurile „unu“, „doi“, și „trei“.

Rulați codul în pagina dvs. web sau în fereastra consolei browserului dvs. și veți vedea toate valorile nodurilor tipărite, ca în imaginea de mai jos:

Going a little deeper into the JSON

The same JSON can be expressed by putting [] to contain the 3 nodes ‘one’, ‘two’, ‘three’:

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

Now I will use a combination of For & For In loops to extract all information from this JSON. The below code does this work for me:

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. The “While” loop

The While Loop has a condition specified in it. It checks the condition and executes the code block as long as the condition is true. Note that the while loop does not havea counter like the for loop.

a. Looping through an HTML table element

Suppose I have an HTML table that shows the prices of different products. This HTML table looks like the below image:

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)Va adăuga un rând sasea , deoarece variabila valoare „i“ este 6 în momentul în timp ce Buclă se termină.

Coloanele (elementul „td”) sunt adăugate la acest nou rând de row.insertCell(0), row.insertCell(1), row.insertCell(2).

Afișez o valoare în interiorul coloanei prin:

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

Codul JavaScript de mai sus va crea un nou rând care conține prețul total al produsului. Acum, tabelul va arăta astfel:

b. Un Looping infinit

Mai jos este bucla infinită din instrucțiunea While:

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

Notă: buclele infinite pot bloca browserul, deci este necesar să rulați bucla într-un interval de câteva milisecunde. Puteți utiliza metoda JavaScript setInterval pentru a rula o funcție dată la fiecare 1000 de milisecunde. Vezi codul de mai jos:

var myVar = setInterval(myTimer, 1000); function myTimer() { // your code }
Tutorial de referință - Înțelegerea metodelor de temporizare „setTimeout ()” și „setInterval ()” în jQuery / JavaScript

4. Bucla „Do While”

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

Vă mulțumim pentru timpul acordat citind acest tutorial. Sper că v-a învățat ceva nou despre tratarea buclelor în JavaScript. Acum puteți aplica oricare dintre tacticile de buclă preferate, descrise în acest tutorial, în proiectul dvs. web.

Public 2 articole de dezvoltare web pe săptămână. Luați în considerare urmărirea mea și primiți notificări ori de câte ori public un nou tutorial pe Medium. Dacă această postare a fost de ajutor, vă rugăm să faceți clic de câteva ori pe butonul clap pentru a vă arăta sprijinul! Îmi va aduce un zâmbet pe față și mă va motiva să scriu mai mult pentru cititorii ca tine.

De asemenea, am publicat un alt tutorial pe freeCodeCamp, ați dori să-l vedeți și voi - Cum să creați o caracteristică de conectare cu Bootstrap Modal și jQuery AJAX

Mulțumesc și Happy Coding!