Acest articol vă va oferi o înțelegere solidă a modului exact de a itera o structură de date Array în JavaScript.

Fie că abia ați început să învățați JavaScript, fie că sunteți aici pentru o reîmprospătare, va fi util pentru dvs. în ambele sensuri. Acest articol vă va prezenta prin unul dintre cele mai utilizate concepte JavaScript.

Ce este o matrice?

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];

Mai sus este o matrice JavaScript utilizată pentru a stoca mai multe valori. Aceasta este una dintre cele mai simple forme ale unui tablou. Conține 4 „elemente” în interiorul matricei, toate șirurile. Și, după cum puteți vedea, fiecare element este separat printr-o virgulă.

Acest exemplu de matrice conține diferite mărci de mașini și poate fi menționat cu cars variabil.

Există o serie de moduri în care putem itera pe această matrice. JavaScript este incredibil de bogat în funcții, așa că avem luxul de a alege cel mai bun mod de a rezolva problema noastră.

Iată cum vom aborda iterarea peste matrice în JavaScript:

  1. Evidențiați 5 metode obișnuite pentru a itera pe o matrice
  2. Afișați câteva informații despre fiecare metodă iterativă
  3. Furnizați un cod pe care îl puteți utiliza și pentru a-l testa!

Tradițional pentru buclă

Ce este For Loop?

Wikipedia definește un Pentru Loop la fel de:

“În informatică, A pentru buclă (sau pur și simplu pentru bucla) este un controlul fluxului afirmație pentru precizare repetare, ceea ce permite codului să fie executat repetat.”

O buclă for este o modalitate de a executa cod în mod repetat. În loc să tastați console.log(“hi”) de cinci ori, îl puteți înfășura într-o buclă for.

În acest prim exemplu, vom învăța cum să iterați peste matricea de mașini pe care ați văzut-o mai sus și să imprimăm fiecare element. Iteratorul sau contorul va începe la primul index „Tesla” și va termina la ultimul „Audi”. Se deplasează prin matrice și tipărește câte un element.

ad-banner
let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];

for(let i = 0; i < cars.length; i++) {
  console.log(cars[i]);
}

Ieșire:

Tesla
Ferrari
Lamborghini
Audi

Scufundându-ne în cod, trecem trei opțiuni la bucla for

  • variabila iterator – let i = 0;
  • unde iteratorul ar trebui să se oprească – i < card.length
  • cât să incrementezi iteratorul în fiecare buclă – i++

Această buclă ne pornește de la 0, mărește variabila cu câte una buclă și se oprește când lovim ultimul element din matrice.

Beneficiul cheie al buclei tradiționale pentru buclă este că aveți mai mult control.

Este posibil să accesați diferite elemente din matrice sau să iterați prin matrice într-un mod sofisticat pentru a rezolva o problemă complexă. De exemplu, omiterea oricărui alt element din matrice se poate face destul de ușor cu bucla tradițională pentru.

Metoda forEach

Care este metoda forEach?

forEach metoda este utilizată pentru a executa o funcție pentru fiecare element al matricei. Această metodă este o alegere excelentă dacă lungimea matricei este „necunoscută” sau garantată pentru schimbare. Această metodă poate fi utilizată numai cu matrice, seturi și hărți.

const amounts = [65, 44, 12, 4];
let doubledAmounts = [];

amounts.forEach(item => {
  doubledAmounts.push(item * 2);
})

console.log(doubledAmounts);

Cel mai mare beneficiu al unui forEach bucla poate accesa fiecare articol, chiar dacă matricea dvs. va crește probabil în dimensiune. Este o soluție scalabilă pentru multe cazuri de utilizare și este mai ușor de citit și de înțeles decât o buclă tradițională pentru că știm că vom itera fiecare element exact o dată.

În timp ce bucla

Ce este un loop în timp ce?

Wikipedia definește un loop în timp ce:

“A în timp ce bucla este un controlul fluxului afirmație care permite executarea repetată a codului pe baza unui anumit Boolean condiție. in timp ce bucla poate fi gândită ca o repetare afirmatie if.

A while bucla este o modalitate de a executa cod în mod repetat pentru a verifica dacă o condiție este adevărată sau falsă. Deci, în loc să folosim o buclă for, cu o instrucțiune imbricată if, putem folosi o buclă while. Sau, dacă nu putem găsi lungimea matricei, în timp ce buclele sunt o alegere excelentă.

Bucla while este adesea controlată de un contor. În exemplul de mai jos, vă prezentăm o buclă de bază în timp ce iterați printr-o matrice. Cheia este să ai control asupra buclei while pe care o creezi.

În timp ce buclă Exemplu (Bine):

let i = 0 

while (i < 5) { 
  console.log(i); 
  i++; 
}

Ieșire:

0
1
2
3
4

Instrucțiunea if’s loop este i < 5, sau vorbit cu voce tare, „i este mai mic de 5”. Variabila i este incrementat de fiecare dată când rulează bucla.

În termeni simpli, aceasta înseamnă că 1 este adăugat la variabilă i de fiecare dată când bucla efectuează o iterație completă. La prima iterație, i este egal cu 0 și imprimăm „0” pe consolă.

Cel mai mare risc de a folosi o buclă while este scrierea unei condiții care nu este îndeplinită niciodată.

Acest lucru se întâmplă frecvent în scenarii din lumea reală, în care cineva scrie o buclă while, dar uită să-și testeze bucla și introduce o buclă infinită în baza de coduri.

O buclă infinită apare atunci când condiția nu este îndeplinită niciodată și bucla continuă să ruleze pentru totdeauna. Acest lucru duce adesea la modificări de rupere, ceea ce face ca întreaga aplicație software să se rupă și să nu mai funcționeze.

Atenție: Nu rulați acest cod.

Exemplu de buclă infinită (rău):

let i = 0 

while (i < 5) { 
  console.log(i); 
}

Ieșire:

Rezultatele pot varia.

Bucla Do While

Ce este o buclă do while?

Wikipedia definește o buclă Do-While ca:

“A face while loop este un controlul fluxului afirmație care execută un bloc de cod cel puțin o dată, și apoi execută în mod repetat blocul sau nu, în funcție de un anumit boolean condiție la sfârșitul blocului. ”

O buclă do-while este aproape identică cu o buclă while, totuși există o diferență cheie. Bucla do-while va garanta executarea întotdeauna a blocului de cod cel puțin o dată înainte ca instrucțiunea if să fie verificată.

De multe ori mă gândesc la asta ca la o buclă de timp inversă și nu le folosesc aproape niciodată. Cu toate acestea, ele sunt utile la unele scenarii foarte specifice.

Exemplu Do-Loop (Bun):

let i = 0; 

do { 
  console.log(i); 
  i++; 
} while (i < 5);

Ieșire:

0
1
2
3
4

Cel mai mare risc de a utiliza o buclă este să scrieți o condiție care nu este îndeplinită niciodată. (La fel ca în cazul unui Loop.)

Atenție: Nu rulați acest cod.

Exemplu de buclă infinită (rău):

let i = 0; 

do { 
  console.log(i); 
} while (i < 5);

Ieșire:

Rezultatele pot varia.

Doriți să vă duceți cunoștințele JavaScript la nivelul următor? Invata despre map, care este la fel ca forEach, dar cu bonus !! ?

Exemplu BONUS (Iterare cu hartă)

Ce este harta?

Wikipedia definește o hartă ca:

“In multe limbaje de programare, Hartă este numele unui funcție de ordin superior care se aplică a funcție dată la fiecare element al unui functor, de ex listă, returnând o listă de rezultate în aceeași ordine. Se numește adesea aplica la toate când este luat în considerare în forma funcțională. ”

Cum functioneazã? map funcția în JavaScript aplică o funcție la fiecare element în interiorul matricei. Vă rugăm să luați un moment pentru a citi din nou acea propoziție.

După aceea, map funcția returnează o nouă matrice cu rezultatele aplicării unei funcții fiecărui element din matrice.

Exemplu de hartă:

const array = [1, 1, 1, 1];

// pass a function to map
const results = array.map(x => x * 2);

console.log(results);

Ieșire:

[2,2,2,2]

Am aplicat map funcționează la matricea care conține patru 1. map funcția apoi a înmulțit fiecare element cu 2, adică x * 2, și a returnat o nouă matrice. Noua matrice a fost apoi stocată în results variabil.

Vizualizând rezultatele noastre, putem vedea că acest lucru a funcționat cu succes. Fiecare element din matrice a fost multiplicat cu 2. Această metodă poate fi utilizată ca înlocuitor al unei bucle în unele cazuri și este incredibil de puternică.

Concluzie

Foarte bine! Ați învățat cinci moduri diferite de a itera peste o matrice în JavaScript. Acestea sunt elementele fundamentale care vă vor pregăti pentru succes în călătoria dvs. de programare JavaScript.

De asemenea, ați fost expus la un concept avansat, map, care este folosit adesea în aplicații software la scară largă.

Deci, vă voi lăsa cu acest lucru: cum veți folosi matricele în proiectele dvs.? Și ce metodă de iterație vi s-a părut cea mai interesantă?

Mulțumesc pentru lectură!

Dacă ți-a plăcut articolul meu, te rog să mă urmărești și / sau să-mi trimiți un mesaj!

Stare de nervozitateMediuGithub