de Joanna Gaudyn

O prezentare generală a iteratorilor JavaScript

Diferența dintre pentru, pentru … în și pentru … de bucle

O prezentare generala a iteratorilor JavaScript
sursă

Iterarea ar putea fi una dintre cele mai frecvent utilizate operațiuni în programare. Se ia un set de articole și se efectuează o operație dată pe fiecare dintre ele într-o succesiune. Buclele permit o modalitate rapidă și ușoară de a face ceva în mod repetat.

În JavaScript, diferite mecanisme de buclă vă permit să definiți începutul și sfârșitul unei bucle în moduri diferite. Nu există un răspuns ușor la care dintre mecanisme este cel mai bun, deoarece situații diferite necesită abordări diferite, ceea ce înseamnă că nevoile dvs. pot fi deservite mai ușor de un tip de buclă peste celelalte.

Iată la ce vă puteți folosi buclă în JavaScript:

  • face … în timp ce declarație
  • în timp ce afirmație
  • declarație etichetată
  • declarație de pauză
  • declarație continuă
  • pentru declaratie
  • pentru … în declarație
  • pentru … de declarație

Să aruncăm o privire mai atentă la ultimele 3. Ele tind să fie destul de confuze atunci când începeți să lucrați cu JavaScript, deoarece numele nu fac cu adevărat mai ușoară memorarea mecanicii din spatele lor. Sper că câteva exemple vor face ca lucrurile să cadă la locul lor dacă sunteți încă puțin șubred în ceea ce privește conceptele.

1611314107 880 O prezentare generala a iteratorilor JavaScript
sursă

Bucla „pentru”

for bucla este cel mai comun tip de buclă și s-ar putea să fi dat peste ea și în alte limbaje de programare, așa că hai să facem o reîmprospătare rapidă.

Iată sintaxa de bază:

for ([initialExpression]; [exit condition]; [incrementExpression]) {
  do something;
}

Să luăm un exemplu:

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

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

Tipărituri:

0
1
2
3
4
5
6
7
8
9

Deci, ce se întâmplă cu adevărat aici? A for bucla se repetă până când o condiție specificată este evaluată ca fiind falsă. În cazul nostru, începem un contor (variabilă i) la 0, tipăriți un număr din numbers matrice care trăiește la i indexul matricei și, în cele din urmă, creșteți contorul. De asemenea, declarăm că bucla noastră ar trebui să se rupă atunci când contorul nu mai este mai mic decât dimensiunea matricei (numbers.length).

Cele mai mari dezavantaje ale unui for bucla trebuie să țină evidența unui contor și a unei condiții de ieșire. Sintaxa nu este, de asemenea, foarte simplă și, pentru a înțelege ce se întâmplă, trebuie doar să memorați ceea ce reprezintă fiecare parte a codului. Chiar dacă a for bucla poate fi o soluție practică pentru a parcurge o matrice, de multe ori există modalități mai simple de a o face.

1611314107 669 O prezentare generala a iteratorilor JavaScript
sursă

Bucla pentru … în buclă

for ... in bucla elimină cele două puncte slabe majore ale for buclă. Nu este nevoie să vă gândiți la un contor sau la o condiție de ieșire.

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in numbers) {
  console.log(numbers[index]);
}

Tipărituri:

0
1
2
3
4
5
6
7
8
9

Principalul dezavantaj al acestei soluții este că trebuie să folosim în continuare un index pentru a accesa elementele matricei.

Un alt lucru care poate fi problematic este că for ... in buclele se bucură de toate proprietățile enumerabile Ce înseamnă în practică? Dacă trebuie să adăugați o metodă suplimentară la obiectul dvs. (în cazul nostru: matrice), această metodă va apărea și în bucla dvs.

Aruncați o privire la acest exemplu:

Array.prototype.decimalfy = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toFixed(4);
  }
};

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in numbers) {
  console.log(numbers[index]);
}

Tipărituri:

0
1
2
3
4
5
6
7
8
9
function () {
for (let i = 0; i acest[i] = aceasta[i].toFixed (2);
}
}

Bănuiesc că veți fi de acord că nu exact ceea ce am urmărit. Când parcurgeți matricele, încercați să stați departe de for ... in bucle pentru a evita surprize neașteptate.

1611314108 119 O prezentare generala a iteratorilor JavaScript
sursă

Pentru … bucla

Bucla pentru … de buclă este cea mai nouă adăugare la familia de for bucle în JavaScript.

Acesta combină punctele forte ale for bucla și for ... in buclă, permițându-vă să faceți o buclă peste orice tip de tip de date care este iterabil (= urmează fișierul protocol iterabil), cum ar fi șir, matrice, set sau hartă. Rețineți că obiectul ( {}) nu este iterabil în mod implicit.

Sintaxa unui for ... of bucla este aproape la fel ca la a for ... in buclă:

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const number of numbers) {
  console.log(number);
}

Tipărituri:

0
1
2
3
4
5
6
7
8
9

Un mare avantaj este că nu mai avem nevoie de un index și putem accesa direct elemente sau matricea noastră. Face ca for ... of bucla cea mai compactă din întreaga familie de bucle.

In plus for ... of mecanism de buclă permite o pauză de buclă, în funcție de starea dumneavoastră. Aruncați o privire la acest exemplu:

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const number of numbers) {
  if (number % 2 !== 0) {
    continue;
  }
  console.log(number);
}

Tipărituri:

0
2
4
6
8

În plus, adăugarea de metode noi la obiecte nu afectează for ... of buclă:

Array.prototype.decimalfy = function() {
  for (i = 0; i < this.length; i++) {
    this[i] = this[i].toFixed(4);
  }
};
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const number of numbers) {
  console.log(number);
}

Tipărituri:

0
1
2
3
4
5
6
7
8
9

Acest lucru face ca for ... of bucla cea mai puternică dintre toate!

Notă laterală: bucla forEach

Ceea ce ar putea fi demn de menționat este și forEach buclă. Rețineți, totuși, că forEach() este o metodă matrice și, prin urmare, nu poate fi utilizat pe alte obiecte JavaScript. Această metodă poate fi utilă dacă cazul dvs. îndeplinește două condiții: doriți să faceți o buclă peste o matrice și nu trebuie să opriți bucla înainte de sfârșitul acelei matrici:

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

numbers.forEach(function(number) {
  console.log(number);
});

Tipărituri:

0
1
2
3
4
5
6
7
8
9

Sper că aceste exemple v-au ajutat să vă înfășurați capul în jurul tuturor mecanicilor diferite ale iterației în JavaScript.

Abia începi călătoria cu programarea? Iată câteva articole care s-ar putea să te intereseze și pe tine: