JavaScript wordt afgesloten voor lus. Voor loops in JavaScript

Loops zijn een eenvoudige manier om iets meerdere keren te doen. In dit hoofdstuk van de JavaScript-gids maakt u kennis met diverse exploitanten beschikbaar in JavaScript.

Je kunt de lus zien als een computerversie van een spel waarbij je iemand vertelt X stappen in de ene richting te zetten, en vervolgens Y stappen in de andere richting; Het idee van het spel "Walk 5 steps east" kan bijvoorbeeld worden uitgedrukt als een lus:

Var-stap; voor (stap = 0; stap< 5; step++) { // Запускается 5 раз, с шагом от 0 до 4. console.log("Идём 1 шаг на восток"); }

Er zijn er veel verschillende soorten loops, maar ze doen in wezen allemaal hetzelfde: ze herhalen een actie meerdere keren (vergeet de herhalingstijd van nul niet, het tellen in de array begint vanaf 0). Cycli van verschillende structuren bieden verschillende manieren om het begin en einde van een cyclus te bepalen. Voor diverse taken programmeren heeft zijn eigen lusoperatoren, met behulp waarvan ze veel eenvoudiger kunnen worden opgelost.

Operators die zijn ontworpen om lussen in JavaScript te organiseren:

voor lus

De for-lus herhaalt acties totdat een speciale lusbeëindigingsgebeurtenis plaatsvindt. De for-instructie in JavaScript is vergelijkbaar met de for-instructie in Java en C. Declaratie voor exploitant ziet er zo uit:

Voor ([start]; [voorwaarde]; [stap]) expressies

Wanneer het wordt uitgevoerd, gebeurt het volgende:

  • De startexpressie wordt uitgevoerd, indien opgegeven. Deze expressie initialiseert doorgaans een of meer tellers, maar de syntaxis maakt het mogelijk dat de expressie enige complexiteit heeft. Wordt ook gebruikt om variabelen te declareren.
  • Er is aan de voorwaarde voldaan. Als de voorwaarde waar is, worden de expressies uitgevoerd. Als deze onwaar is, wordt de for-lus verbroken. Als de voorwaarde volledig wordt weggelaten, wordt deze als waar beschouwd.
  • Expressies worden uitgevoerd. Om meerdere expressies uit te voeren, worden blokexpressies ( ... ) gebruikt om expressies te groeperen.
  • De stap wordt bijgewerkt als die er is, en vervolgens keert de besturing terug naar stap 2.
  • Voorbeeld

    IN volgende functie Er is een for-lus die het aantal geselecteerde genres in een schuiflijst telt (een element waarmee u meerdere items kunt selecteren). De for-lus declareert een variabele i en stelt de waarde ervan in op 0. Hij controleert ook of i kleiner is dan het aantal elementen in element , voert de if-instructie uit en verhoogt i met één na elke passage door de lus.

    Selecteer enkele muziekgenres en klik vervolgens op de onderstaande knop: R&B Jazz Blues New Age Klassieke Opera

    functie howMany(selectObject) ( var numberSelected = 0; for (var i = 0; i< selectObject.options.length; i++) { if (selectObject.options[i].selected) { numberSelected++; } } return numberSelected; } var btn = document.getElementById("btn"); btn.addEventListener("click", function(){ alert("Выбрано элементов: " + howMany(document.selectForm.musicTypes)) });

    doe... while-lus

    De do...while-lus herhaalt while gegeven voorwaarde WAAR. De do...while-instructie ziet er als volgt uit:

    Doe expressies while(condition);

    expressies worden uitgevoerd zolang de voorwaarde waar is. Als u meerdere expressies wilt gebruiken, gebruikt u een blokexpressie ( ... ) om ze te groeperen. Als de voorwaarde waar is, worden de expressies opnieuw uitgevoerd. Aan het einde van elke doorgang wordt de toestand gecontroleerd. Als de voorwaarde onwaar is, wordt de uitvoering opgeschort en wordt de controle overgedragen naar de expressie na do...while .

    Voorbeeld

    In het volgende voorbeeld wordt de do-lus minimaal één keer uitgevoerd en opnieuw uitgevoerd zolang i kleiner is dan 5.

    Doen ( i += 1; console.log(i); ) terwijl (i< 5);

    terwijl lus

    De while-lus voert expressies uit zolang de voorwaarde waar is. Het ziet er zo uit:

    While (voorwaarde)-expressies

    Als de voorwaarde onwaar wordt, stoppen de expressies in de lus met uitvoeren en gaat de controle over naar de expressie na de lus.

    Er wordt gecontroleerd of de voorwaarde waar is voordat de expressies in de lus worden uitgevoerd. Als de voorwaarde waar is, worden de expressies uitgevoerd en vervolgens wordt de voorwaarde opnieuw getest. Als de voorwaarde onwaar is, wordt de uitvoering opgeschort en wordt de besturing na enige tijd verplaatst naar de uitdrukking.

    Als u meerdere expressies wilt gebruiken, gebruikt u een expressieblok ( ... ) om ze te groeperen.

    Voorbeeld 1

    Volgende terwijl lus werkt zolang n kleiner is dan drie:

    Varn = 0; varx = 0; terwijl (n< 3) { n++; x += n; }

    Bij elke iteratie verhoogt de lus n en telt die waarde op bij x. Daarom krijgen x en n de volgende waarden:

    • Na de eerste passage: n = 1 en x = 1
    • Na de tweede: n = 2 en x = 3
    • Na de derde passage: n = 3 en x = 6

    Na de derde passage, voorwaarde n< 3 становится ложным, поэтому цикл прерывается.

    Voorbeeld 2

    Vermijd eindeloze lussen. Zorg ervoor dat de lusvoorwaarde uiteindelijk onwaar wordt; anders wordt de cyclus nooit onderbroken. De expressies in de volgende while-lus zullen voor altijd worden uitgevoerd omdat de voorwaarde zal nooit onwaar worden:

    Terwijl (waar) ( console.log("Hallo wereld"); )

    Label

    Een label is een verklaring met een identificatie waarmee u naar een bepaalde plaats in uw programma kunt verwijzen. U kunt bijvoorbeeld een label gebruiken om een ​​lus aan te geven en vervolgens break- of continue-instructies gebruiken om aan te geven of het programma de lus moet verbreken of moet doorgaan met het uitvoeren ervan.

    De syntaxis van het label is als volgt:

    Label: exploitant

    Betekenis labels kan elke geldige JavaScript-ID zijn die geen gereserveerd woord is. Exploitant , degene die u opgeeft na het label kan elke expressie zijn.

    Voorbeeld

    In dit voorbeeld vertegenwoordigt de markLoop een while-lus.

    MarkLoop: while (theMark == true) ( ​​​​doSomething(); )

    pauze

    Gebruik de break-instructie om een ​​lus te verbreken, de controle te wijzigen of in combinatie met de label-instructie.

    • Wanneer u break zonder label gebruikt, worden de while , do-while en for loops verbroken of wordt de besturing onmiddellijk overgeschakeld naar de volgende expressie.
    • Wanneer u break met een markering gebruikt, wordt de speciaal gemarkeerde uitdrukking verbroken.

    De syntaxis van de operator zou kunnen zijn:

  • pauze;
  • pauze Label;
  • De eerste vorm van syntaxis doorbreekt de lus helemaal of verandert van besturing; de tweede onderbreekt een speciaal aangewezen uitdrukking.

    Voorbeeld 1

    In het volgende voorbeeld worden de elementen in een array doorlopen totdat een element wordt gevonden waarvan de waarde theValue is:

    Voor (i = 0; ik< a.length; i++) { if (a[i] == theValue) { break; } }

    Voorbeeld 2: Labelonderbreking var x = 0; var z = 0 labelCancelLoops: while (true) ( ​​console.log("Buitenste lus: " + x); x += 1; z = 1; while (true) ( ​​console.log("Binnenste lus: " + z) ; z += 1; if (z === 10 && x === 10) ( break labelCancelLoops; ) else if (z === 10) ( break; ) ) doorgaan

    De continue instructie wordt gebruikt om één stap vooruit te gaan in while , do-while , for loops of om naar een label te springen.

    • Wanneer u continue zonder label gebruikt, wordt de huidige iteratie van de while , do-while en for loops verbroken en wordt de lus voortgezet vanaf de volgende iteratie. In tegenstelling tot break onderbreekt continue de uitvoering van de lus niet volledig. In de while-lus springt het naar de voorwaarde. En ervoor zorgt dat de stap groter wordt.
    • Wanneer u Doorgaan met een label gebruikt, wordt dit toegepast op de lus met dat label.

    De continue syntaxis kan er als volgt uitzien:

  • doorgaan;
  • doorgaan Label ;
  • Voorbeeld 1

    Het volgende voorbeeld toont een while-lus met exploitant doorgaan, die vuurt als de waarde van i 3 is. Dus n krijgt de waarden 1, 3, 7 en 12.

    Vari = 0; var n = 0; terwijl (ik< 5) { i++; if (i == 3) { continue; } n += i; }

    Voorbeeld 2

    Uitdrukking gemarkeerd checkiandj bevat de gemarkeerde uitdrukking checkj. Wanneer u continue tegenkomt, breekt het programma de huidige iteratie af checkj en start de volgende iteratie. Elke keer dat je tegenkomt, ga verder, checkj gaat door naar de volgende iteratie zolang de voorwaarde false retourneert. Wanneer false wordt geretourneerd na het berekenen van de rest van een deling checkiandj, checkiandj gaat door naar de volgende iteratie zolang de voorwaarde false retourneert. Wanneer false wordt geretourneerd, gaat het programma verder met de uitvoering met de expressie erna checkiandj.

    Als doorgaan is gemarkeerd checkiandj, kan het programma vanaf het begin van de markering doorgaan checkiandj.

    Checkiandj: terwijl (i< 4) { console.log(i); i += 1; checkj: while (j >4) ( console.log(j); j -= 1; if ((j % 2) != 0) ( ga door met checkj; ) console.log(j + "even."); ) console.log("i = " + ik);

    console.log("j = " + j);

    De instructie for...in doorloopt alle opsombare eigenschappen van een object. JavaScript voert de opgegeven expressies uit voor elke afzonderlijke eigenschap. De for...in-lus ziet er als volgt uit:

    Voor (variabele in object) (expressies)

    Voorbeeld

    De volgende functie neemt een object en zijn naam als argument. Vervolgens doorloopt het alle eigenschappen van het object en retourneert een tekenreeks die de namen van de eigenschappen en hun waarden bevat.

    Functie dump_props(obj, obj_naam) ( var resultaat = ""; for (var i in obj) ( resultaat += obj_naam + "." + i + " = " + obj[i] + "
    "; ) resultaat += ""; retourneert resultaat; )

    Voor een autoobject met merk- en modeleigenschappen geldt: resultaat zullen :

    Auto.merk = Ford auto.model = Mustang

    Voorbeeld nr. 2

    U kunt de waarde ook per sleutel weergeven:

    Laat obj = (model: "AUDI A8", jaar: "2019", kleur: "bruin") voor (sleutel in obj) ( console.log(`$(key) = $(obj)`); ) // model = AUDI A8 // jaar = 2019 // kleur = bruin

    Arrays

    Hoewel het verleidelijk is om for... te gebruiken als een manier om alle elementen van een array te doorlopen, retourneert deze operator naast de numerieke indexen ook de naam van door de gebruiker gedefinieerde eigenschappen. Het is dus beter om de standaard for te gebruiken voor numerieke indices bij interactie met arrays, aangezien de instructie for...in doorgaat specifieke gebruiker eigenschappen naast de array-elementen als u de array wijzigt, bijvoorbeeld door eigenschappen en methoden toe te voegen.

    Voor ( variabel van voorwerp) { uitdrukkingen}

    Het volgende voorbeeld laat het verschil zien tussen de for...of- en for...in-lussen. Terwijl for...in itereert over eigenschapsnamen, for...of itereert over eigenschapswaarden:

    Laat arr = ; arr.foo = "hallo"; for (laat i in arr) ( console.log(i); // print "0", "1", "2", "foo" ) for (laat i van arr) ( console.log(i); / / uitgangen "3", "5", "7")

    De cyclus is controle instructie, waarmee u de uitvoering van programmacode kunt herhalen een bepaald bedrag eenmaal. Elke individuele uitvoering van instructies in de hoofdtekst van een lus wordt een iteratie genoemd.

    terwijl lus

    While-lussyntaxis:

    Expressie in haakjes Dit wordt een lusuitvoeringsvoorwaarde of kortweg voorwaarde genoemd. Eerst wordt de waarde van de uitdrukking berekend. De resulterende waarde wordt, indien nodig, impliciet omgezet naar Booleaans type. Als het resultaat van het evalueren van een uitdrukking is WAAR Vervolgens wordt de instructie in de hoofdtekst van de lus uitgevoerd, waarna de besturing wordt overgedragen naar het begin van de lus en de voorwaarde opnieuw wordt berekend. Als het resultaat van het evalueren van de expressie false is, beëindigt de tolk de lus en gaat hij verder met het uitvoeren van de instructie die volgt op de lus. De tolk voert dus de code in de hoofdtekst van de lus keer op keer uit, zolang de voorwaarde waar blijft:

    Vari = 0; terwijl (ik< 3) { // Выполнять код, пока значение переменной i меньше 3 alert("i: " + i); i++; // Увеличиваем значение переменной i }

    do-while-lus

    Syntaxis van de do-while-lus:

    Een do-while-lus is vergelijkbaar met een while-lus, behalve dat de lusvoorwaarde wordt gecontroleerd na de eerste iteratie in plaats van ervoor, en de lus eindigt met een puntkomma. Omdat de voorwaarde na de iteratie wordt gecontroleerd, wordt de code in de body van de do-while-lus altijd minstens één keer uitgevoerd:

    Var-aantal = 0; do ( document.write(tel + " "); tel++; ) while(tel< 5); Попробовать »

    Deze cyclus kan handig zijn als de code in de lusbody minstens één keer moet worden uitgevoerd, ongeacht de uitvoeringsvoorwaarde.

    voor lus

    Voor lussyntaxis:

    Een for-lus bevat drie expressies, gescheiden door puntkomma's. Deze drie expressies hebben de volgende uitvoeringsvolgorde:

  • De eerste expressie wordt altijd slechts één keer geëvalueerd: vóór de eerste iteratie. Daarom is de eerste expressie meestal de definitie van een variabele die in de lusuitvoeringsvoorwaarde als teller wordt gebruikt.
  • De tweede expressie definieert de voorwaarde voor het uitvoeren van de lus. Het wordt vóór elke iteratie berekend en bepaalt of het lichaam van de lus wordt uitgevoerd. Als het resultaat van het evalueren van een uitdrukking waar is, programmacode wordt uitgevoerd in de body van de lus. Als false wordt geretourneerd, eindigt de lus en gaat de besturing naar de volgende instructie na de lus. Als de voorwaarde de eerste keer wordt gecontroleerd en deze onwaar blijkt te zijn, wordt de code in de hoofdtekst van de lus niet eens één keer uitgevoerd.
  • Na elke iteratie wordt de derde uitdrukking geëvalueerd. Meestal wordt het gebruikt om de waarde van een variabele te wijzigen die wordt gebruikt om de toestand van een lus te testen.
  • Voorbeeld voor lus:

    Voor (var aantal = 0; aantal< 5; count++) document.write(count + " "); Попробовать »

    Zoals u in het voorbeeld kunt zien, kunt u met de for-lus, in tegenstelling tot andere lussen, de code die aan de lus is gekoppeld, op één plaats groeperen.

    Elk van de expressies in de for-lus mag ontbreken, maar de puntkomma's zelf moeten aanwezig zijn, anders zal dat wel zo zijn syntaxisfout. Als de tweede expressie ontbreekt, loopt de lus voor altijd door.

    Vari = 0; voor(;ik< 4; i++) ... var i = 0; for (; i < 4;) ... for (var i = 1; /* нет условия */ ; i++) ... // Это эквивалентно следующему коду for (var i = 1; true; i++) ...

    In plaats van één expressie kunt u meerdere expressies opgeven, waarbij u ze scheidt met de komma-operator.

    // wordt niet uitgevoerd omdat de voorwaarde wordt gecontroleerd laatste uitdrukking onwaar voor (i = 1; i< 4, false; i++) ... for (var i = 1, j = 5; i 50) break;
    ++ik;
    }

    In dit voorbeeld verbreken we de lus als de waarde van variabele a groter is dan 50.

    Met de restart-operator continue kunt u de lus opnieuw starten, d.w.z. alle volgende expressies in de hoofdtekst van de lus onuitgevoerd laten, en de uitvoering van de lus vanaf het allereerste begin starten: de voorwaarde controleren, de increment en body uitvoeren, enz.

    Voorbeeld:

    terwijl (een< 100) {
    ik = ++ik;
    als (i > 9 && ik< 11) continue;
    een = een * ik + 2;
    }

    Hier slaan we de uitdrukking over die a evalueert voor alle waarden van i van 10 tot 20.