de către Yogi

Stăpânește arta looping-ului în JavaScript cu aceste trucuri incredibile

Stapaneste arta buclarii in JavaScript cu aceste trucuri incredibile
Stăpânește arta Buclării în JavaScript

De multe ori în codul dvs. trebuie să parcurgeți un matrice de numere, șiruri sau obiect. Există 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 Loop este cel mai simplu mod de a vă conecta în codul dvs. JavaScript. Este foarte util să executați un bloc de cod de mai multe ori. Folosește un tejghea, a cărui valoare este inițializată inițial și apoi este specificată valoarea sa finală.

contorul este mărit cu o valoare specifică de fiecare dată când bucla rulează. 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 elementele numerele dintr-o matrice, și imprimând fiecare dintre ele 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ă vrei găsiți și colorați toate ancorele în pagina roșie. Apoi și aici puteți folosi fișierul Pentru Loop asa:

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:

1612082710 523 Stapaneste arta buclarii in JavaScript cu aceste trucuri incredibile
Schimbarea culorii tuturor ancorelor în roșu

Notă: jQuery are, de asemenea, o metodă de looping foarte bună numită jQuery Fiecare metodă ceea ce vă ajută să parcurgeți cu ușurință matrice, obiecte, elemente DOM, JSON și XML. Dacă utilizați jQuery în site-ul dvs. web, atunci luați în considerare utilizarea acestuia în timp ce faceți bucle.

2. Bucla „For In”

Pentru In bucla este utilizată pentru a face looping prin proprietățile unui obiect / matrice fără a utiliza un „contor”. Deci este o versiune simplificată a Pentru 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 Pentru In loop pentru a căuta fiecare proprietate și valoarea ei.

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

var person = { fname: "Nick", lname: "Jonas", age: 26 };
for (var x in person) {
    console.log(x + ": " + person[x])
}
1612082710 655 Stapaneste arta buclarii in JavaScript cu aceste trucuri incredibile
Buclarea prin proprietatea unui obiect cu bucla „For In” în JavaScript

b. În buclă prin JSON

JSON este un format foarte popular pentru a transmite obiecte de date constând din atribut – valoare perechi ș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‘, iar acesta conține 3 noduri -‘unu‘,’Două‘,’Trei‘. Nodurile sunt, de asemenea, numite chei.

Codul de mai jos arată cum să extrageți informații din JSON folosind Pentru In buclă:

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: Sunt 2 Pentru în bucle în codul de mai sus – Buclă exterioară și buclă interioară.

Buclă exterioară rulează de 3 ori și acoperă nodurile „unu”, „doi” și „trei”.

Buclă interioară acoperă toate valorile din interiorul nodului selectat, adică 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:

1612082710 323 Stapaneste arta buclarii in JavaScript cu aceste trucuri incredibile
Bucla „Pentru intrare” în JSON

Mergând un pic mai adânc în JSON

Același JSON poate fi exprimat prin punere [] pentru a conține cele 3 noduri „unu”, „două”, „trei”:

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

Acum voi folosi o combinație de Pentru & Pentru În bucle pentru a extrage toate informațiile din acest JSON. Codul de mai jos funcționează pentru mine:

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. Bucla „În timp ce”

În timp ce Loop are o condiție specificată în ea. Verifică starea și execută blocul de cod atâta timp cât condiția este adevărată. Rețineți că bucla while nu are un tejghea ca bucla for.

A. Buclarea printr-un element de tabel HTML

Să presupunem că am un Tabel HTML care arată prețurile diferitelor produse. Acest tabel HTML arată ca imaginea de mai jos:

1612082710 178 Stapaneste arta buclarii in JavaScript cu aceste trucuri incredibile
Tabel de prețuri fără total produse

Puteți vedea că acest tabel nu afișează pretul total din toate produsele. Deci, dacă este necesar să arătați prețul total, atunci puteți parcurge toate prețurile și afișați totalul în subsolul tabelului. Așa o veți face.

Adăugați codul tabelului HTML la pagina dvs. web:

<table id="priceTable">
    <tr>
        <th>Id</th>
        <th>Product Name</th>
        <th>Product Price</th>
    </tr>
    <tr> 
        <td>1</td>
        <td>Shirts</td>
        <td>49.99</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Pants</td>
        <td>55.50</td>
    </tr>
    <tr> 
        <td>3</td>
        <td>Socks</td>
        <td>20</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Shoes</td>
        <td>99</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Jackets</td>
        <td>88.90</td>
    </tr>
</table>

Apoi, adăugați CSS pentru a oferi un design adecvat acestui tabel html:

<style>
    #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;
        }
</style>

Acum buclați prin tabel cu În timp ce bucla și calculați suma tuturor produselor. Așadar, adăugați codul JavaScript de mai jos pe pagina dvs. web care funcționează:

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;

Explicaţie: Mai întâi obțin referința tabelului folosind var table = document.getElementById("priceTable"). Apoi am adăugat 2 variabile numite „i” și „sumă”. Variabila „i” este variabila condițională a buclei while, în timp ce „suma” va continua să adauge prețul fiecărui produs în ea.

Așa că am condus în timp ce bucla pentru variabila “i” valoare de la 1 la (rândurile totale -1). Am obținut rândurile totale din tabel până la table.rows.length și l-a adăugat la starea buclei while:

while (i < table.rows.length) {
  //…
}

Notă: Tabelul are 6 rânduri de la index 0 la 5 și fiecare rând are 3 coloane de la index 0 la 2. Am rulat în mod specific bucla de la valoarea variabilă „i” de 1 și nu 0. Acest lucru se datorează faptului că în indexul 0 al rândul tabelului este numele coloanei (de care nu am nevoie).

În interiorul buclei while am continuat să adaug valorile prețului fiecărui produs la variabila sumă astfel:sum += parseFloat(table.rows[i].cells[2].innerHTML) iar la sfârșit a crescut valoarea „i” cu 1.

De exemplu, când valoarea „i” este 1 atunci table.rows[1] îmi dă primul rând (primul element „tr”). În mod similar table.rows[1].cells[2] va da valoarea coloanei de preț (elementul preț “td”) din primul rând.

După încheierea buclei, adaug un rând nou la masă chiar la final. În interiorul acestui rând adaug cele 3 coloane – 0 index, 1 index și 2 index. În cele din urmă, afișez șirul „total” în prima coloană și prețul total conținut în variabila „sumă” din A doua coloană.

Codul care face adăugarea acestui nou rând este:

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 al șaselea rând, deoarece valoarea variabilă „i” este 6 în momentul în care În timp ce Loop 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:

1612082710 604 Stapaneste arta buclarii in JavaScript cu aceste trucuri incredibile
Tabel de prețuri cu Total produse

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 JavaScript setInterval method 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”

În Bucla Do While condiția de a fi verificat este dat la sfârșit, și astfel bucla se execută cel puțin o dată chiar dacă condiția nu este adevărată. Verificați codul de mai jos care va da un mesaj „Bună ziua” în caseta de alertă, chiar dacă condiția este falsă chiar de la început (deoarece valoarea variabilă „i” este întotdeauna mai mare de 1).

var i = 2;

do {
    alert("Hello");
    i++;
}
while (i < 1);

A. Buclare prin XML

Acum voi folosi Bucla Do While pentru cum să bucla prin XML și extrageți date din acesta. Am un fișier XML numit „XMLFile1.xml” al cărui conținut este:

<?xml version="1.0" encoding="utf-8" ?>
<cities>
    <city>Washington DC</city>    
    <city>Islamabad</city>
    <city>Beijing</city>
    <city>Tokyo</city>
</cities>

voi folosi AJAX pentru a citi acest fișier XML și apoi buclați-l cu bucla Do While. Codul de mai jos tipărește toate numele orașelor (date în fișierul XML) în fereastra consolei.

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

Explicaţie: Am creat un XMLHttpRequest obiect pentru efectuarea apelului AJAX. Când fișierul XML este citit, atunci evenimentul este numit onreadystatechange este ridicat, vezi codul de mai jos:

xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};

În acest caz, sun funcția mea personalizată numită myFunction (). Aici, stochez conținutul XML într-o variabilă numită xmlDoc:

var xmlDoc = xml.responseXML;

Apoi am convertit toate numele orașelor într-un matrice:

var cityNames = Array.from(xmlDoc.getElementsByTagName("city"));

În cele din urmă, am parcurs această serie de orașe folosind Bucla Do While și imprimați numele fiecărui oraș în fereastra consolei:

var i = 0;
do {
    console.log(cityNames[i].innerHTML);
    i++;
}
while (i < cityNames.length);

Imaginea de mai jos ilustrează ieșirea tipărită pe consolă:

1612082710 170 Stapaneste arta buclarii in JavaScript cu aceste trucuri incredibile
Valorile orașelor din XML

5. Metoda „.forEach ()”

Ediția ES6 a JavaScript a introdus o nouă metodă numită .forEach() pentru looping printr-o matrice de elemente. O veți găsi foarte la îndemână atunci când aveți de-a face cu matrice.

A. Buclarea printr-o matrice cu metoda .forEach ():

În această situație fac o buclă printr-un element matrice cu .pentru fiecare() metoda și tipăriți index și valoare din fiecare element în fereastra consolei. Vezi codul de mai jos:

var names = ["jerry", "tom", "pluto", "micky", "mini"];
names.forEach(Function1);

function Function1(currentValue, index) {
    console.log("Array Current Index is: " + index + " :: Value is: " + currentValue);
}

Funcția 1 este numele funcției care este apelată pentru fiecare element al matricei. În cazul meu se va apela de 5 ori. Acceptă 2 parametri – „index” și „valoare” a elementului curent.

Notă că puteți converti un obiect într-o matrice folosind Array.from () metodă:

var linksArr = Array.from(links);

Concluzie

Vă mulțumim pentru timpul petrecut 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.

Stapaneste arta buclarii in JavaScript cu aceste trucuri incredibile

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 Routech, ați dori să-l vedeți și – Cum să creați o caracteristică de conectare cu Bootstrap Modal și jQuery AJAX

Mulțumesc și Happy Coding!