Buclele sunt utilizate în JavaScript pentru a efectua activități repetate pe baza unei condiții. Condițiile revin de obicei true sau false când este analizat. O buclă va continua să ruleze până la revenirea condiției definite false.

Cele mai comune trei tipuri de bucle sunt

Puteți tasta js for, js while sau js do while pentru a obține mai multe informații despre oricare dintre acestea. Să ne uităm la ele și la câteva variante, mai detaliat acum.

pentru bucla

Sintaxă

for ([initialization]); [condition]; [final-expression]) {
   // statement
}

Javascriptul for declarația constă din trei expresii și o declarație:

Descriere

  • inițializare – Rulați înainte de prima execuție pe buclă. Această expresie este utilizată în mod obișnuit pentru a crea contoare. Variabilele create aici sunt incluse în buclă. Odată ce bucla sa încheiat, este executată, acestea sunt distruse.
  • condiție – Expresie care este verificată înainte de executarea fiecărei iterații. Dacă este omisă, această expresie se evaluează ca fiind adevărată. Dacă se evaluează la adevărat, instrucțiunea buclei este executată. Dacă se evaluează la fals, bucla se oprește.
  • expresie finală – Expresie care se execută după fiecare iterație. De obicei folosit pentru a crește un contor. Dar poate fi folosit și pentru decretarea unui contor.
  • statement – Cod care trebuie repetat în buclă

oricare dintre aceste trei expresii sau afirmația poate fi omisă. Pentru bucle sunt utilizate în mod obișnuit pentru a număra un anumit număr de iterații pentru a repeta o instrucțiune. Folosește o break pentru a ieși din buclă înainte ca expresia condiției să fie evaluată ca fiind falsă.

Capcane comune

Depășirea limitelor unui tablou

Când indexați peste o matrice de mai multe ori este ușor să depășiți limitele matricei (de exemplu, încercați să faceți referire la cel de-al patrulea element al unui tablou cu 3 elemente).

    // This will cause an error.
    // The bounds of the array will be exceeded.
    var arr = [ 1, 2, 3 ];
    for (var i = 0; i <= arr.length; i++) {
       console.log(arr[i]);
    }

    output:
    1
    2
    3
    undefined

Există două moduri de a remedia acest cod. Setați condiția la oricare i < arr.length sau i <= arr.length - 1

Exemple

Iterează prin numere întregi de la 0 la 8

for (var i = 0; i < 9; i++) {
   console.log(i);
}

output:
0
1
2
3
4
5
6
7
8

Ieși dintr-o buclă înainte ca expresia condiției să fie falsă

for (var elephant = 1; elephant < 10; elephant+=2) {
    if (elephant === 7) {
        break;
    }
    console.info('elephant is ' + elephant);
}

output:
elephant is 1
elephant is 3
elephant is 5

pentru … în buclă

for...in declarația repetă proprietățile enumerabile ale unui obiect, în ordine arbitrară. Pentru fiecare proprietate distinctă, pot fi executate instrucțiuni.

for (variable in object) {
...
}

Required / OptionalParameterDescriptionRequiredVariable Un nume de proprietate diferit este atribuit variabilei pe fiecare iterație.OptionalObjectObject ale cărui proprietăți enumerabile sunt iterate.

Exemple

// Initialize object.
a = { "a": "Athens", "b": "Belgrade", "c": "Cairo" }

// Iterate over the properties.
var s = ""
for (var key in a) {
    s += key + ": " + a[key];
    s += "<br />";
    }
document.write (s);

// Output:
// a: Athens
// b: Belgrade
// c: Cairo

// Initialize the array.
var arr = new Array("zero", "one", "two");

// Add a few expando properties to the array.
arr["orange"] = "fruit";
arr["carrot"] = "vegetable";

// Iterate over the properties and elements.
var s = "";
for (var key in arr) {
    s += key + ": " + arr[key];
    s += "<br />";
}

document.write (s);

// Output:
//   0: zero
//   1: one
//   2: two
//   orange: fruit
//   carrot: vegetable

// Efficient way of getting an object's keys using an expression within the for-in loop's conditions
var myObj = {a: 1, b: 2, c:3}, myKeys = [], i=0;
for (myKeys[i++] in myObj);

document.write(myKeys);

//Output:
//   a
//   b
//   c

pentru … de buclă

for...of declarația creează o buclă iterând peste obiecte iterabile (inclusiv Array, Map, Set, Arguments object și așa mai departe), invocând un cârlig de iterație personalizat cu instrucțiuni care trebuie executate pentru valoarea fiecărei proprietăți distincte.

    for (variable of object) {
        statement
    }

Descriptionvariable La fiecare iterație o valoare a unei proprietăți diferite este atribuită variable.objectObject ale cărei proprietăți enumerabile sunt iterate.

Exemple

Matrice

    let arr = [ "fred", "tom", "bob" ];

    for (let i of arr) {
        console.log(i);
    }

    // Output:
    // fred
    // tom
    // bob

Hartă

    var m = new Map();
    m.set(1, "black");
    m.set(2, "red");

    for (var n of m) {
        console.log(n);
    }

    // Output:
    // 1,black
    // 2,red

A stabilit

    var s = new Set();
    s.add(1);
    s.add("red");

    for (var n of s) {
        console.log(n);
    }

    // Output:
    // 1
    // red

Argumente obiect

    // your browser must support for..of loop
    // and let-scoped variables in for loops

    function displayArgumentsObject() {
        for (let n of arguments) {
            console.log(n);
        }
    }


    displayArgumentsObject(1, 'red');

    // Output:
    // 1
    // red

în timp ce bucla

Bucla while începe prin evaluarea stării. Dacă condiția este adevărată, declarația (e) este / sunt executate. Dacă condiția este falsă, declarația (e) este / nu executată (e). După aceea, în timp ce bucla se termină.

Aici este sintaxă pentru bucla while:

Sintaxă:

while (condition)

{

  statement(s);

}

declarație (e): O declarație care este executată atâta timp cât condiția este evaluată ca fiind adevărată.

condiție: Aici, condiția este o expresie booleană care este evaluată înainte de fiecare trecere prin buclă. Dacă această condiție este adevărată, instrucțiunile sunt executate. Când condiția este evaluată ca fiind falsă, execuția continuă cu instrucțiunea după bucla while.

Exemplu:

    var i = 1;
    while (i < 10) 
    {
      console.log(i);
       i++; // i=i+1 same thing
    }

    Output:
    1 
    2 
    3 
    4
    5
    6
    7
    8
    9

Cum să iterez cu JavaScript în timp ce bucle

În timp ce buclele vor rula atâta timp cât starea din interiorul () este adevărată. Exemplu:

while(condition){
code...
}

Sfat 1:

Utilizați o variabilă iterator, cum ar fi i în starea dvs.

var i = 0;
while(i <= 4){
}

Soluție de alertă spoiler înainte!

Soluţie:

// Setup
var myArray = [];

// Only change code below this line.
var i = 0;
while (i <= 4){
    myArray.push(i);
    i++;
}

Faceți … în buclă

do...while bucla este strâns legată de while buclă. În bucla do while, starea este verificată la sfârșitul buclei.

Aici este sintaxă pentru do...while buclă:

Sintaxă:

 do {

   *Statement(s);*

} while (*condition*);

declarație (e): O declarație care este executată cel puțin o dată înainte ca condiția sau expresia booleană să fie evaluată și reexecutată de fiecare dată când condiția este evaluată la adevărat.

condiție: Aici, o condiție este o Expresie booleană. Dacă expresia booleană se evaluează la adevărat, instrucțiunea este executată din nou. Când expresia booleană se evaluează la fals, buclele se termină.

Exemplu:

var i = 0;
do {
  i = i + 1;
  console.log(i);
} while (i < 5);

Output:
1
2
3
4
5

Cum să iterez cu JavaScript Do … While Bucle

  • Do...While buclele se asigură că codul este executat cel puțin o dată și după executare, dacă condiția din interiorul while() este Adevărat, continuă cu bucla, altfel se oprește.

Soluţie:

var myArray = [];
var i = 10;

do {
  myArray.push(i);
  i++;
} while(i <= 10);