De JavaScript for-loop, en welke loop u moet gebruiken
JavaScript-loops vergeleken
De JavaScript for-loop en alle andere loops, live vergeleken | We.Inc
for, for...of, for...in, while, do...while en forEach naast elkaar. Draai elke loop op een array, een string, een object of een Map en zie de output, of de fout die hij gooit.
Een klassieke for-loop heeft drie delen: for (let i = 0; i < arr.length; i++) { ... }. Gebruik hem als u de index of een eigen stapgrootte nodig hebt. Gebruik for...of voor gewone waarden, for...in of Object.entries voor de keys van een object, en while als u niet vooraf weet hoeveel rondes u nodig hebt.
Welke loop past bij de taak
Loop
Het best voor
Kan vroeg stoppen?
for (let i = 0; i < n; i++)
Tellen, toegang via index, achteruit of per 2 stappen
Ja
for (const x of iterable)
Waarden van arrays, strings, Maps, Sets, NodeLists
Ja
for (const key in obj)
Keys van een gewoon object (inclusief overgeërfde)
Ja
while (condition)
Herhalen tot er iets verandert, onbekend aantal
Ja
do { } while (condition)
Hetzelfde, maar draait altijd minstens één keer
Ja
arr.forEach(fn)
Side effects op elk item van een array
Nee (alleen door een fout te gooien)
Elke loop op deze pagina herhaalt code, maar ze verschillen in wat ze u per ronde geven, waarover ze kunnen lopen en hoe u eruit komt. Met de runner hieronder richt u elke loop op vier soorten data en ziet u de echte output, waardoor fouten zoals for...in op een array of for...of op een gewoon object makkelijk op te sporen zijn.
Kies een loop en een soort data. De pagina draait die loop echt in uw browser.
Het outputpaneel toont wat de loopvariabele per ronde bevatte, of de fout die de combinatie gooit.
Zet de break-optie aan om bij de derde ronde te stoppen en te zien welke loops dat ondersteunen.
Kopieer een patroon uit de voorbeelden verderop.
Declareer de teller met let, niet met var. Met let krijgt elke ronde een eigen kopie, zodat callbacks die in de loop worden gemaakt het juiste getal zien.
Gebruik bij voorkeur const in for...of en for...in als u de variabele niet opnieuw toewijst; elke ronde krijgt een verse binding.
forEach wacht niet op async callbacks. Wilt u elk item om de beurt awaiten, gebruik dan for...of met await in een async-functie.
Zorg dat de conditie van een while-loop false kan worden. Verander de geteste variabele in de body, anders bevriest het tabblad.
Veelgestelde vragen
Wat is het verschil tussen for...of en for...in?
for...of geeft u waarden uit alles wat iterable is, zoals de items van een array of de tekens van een string. for...in geeft u propertynamen als strings, inclusief overgeërfde enumerable properties. Op een array levert for...in '0', '1', '2' op in plaats van de items.
Hoe breek ik uit een forEach-loop?
Dat kan niet, behalve door een fout te gooien. Stap over op for...of, dat break ondersteunt, of op some, every, find of findIndex, die vanzelf stoppen zodra ze een antwoord hebben.
Hoe loop ik over een object in JavaScript?
Gebruik for (const [key, value] of Object.entries(obj)). Dat behandelt alleen de eigen keys van het object en geeft u beide delen. for...of rechtstreeks op een gewoon object gooit TypeError: obj is not iterable.
Hoe verlaat ik twee geneste loops tegelijk?
Zet een label vóór de buitenste loop en gebruik het met break: outer: for (...) { for (...) { if (found) break outer; } }. continue outer springt in plaats daarvan naar de volgende ronde van de buitenste loop.
Hoe loop ik achteruit?
Begin bij de laatste index en tel af: for (let i = arr.length - 1; i >= 0; i--). Dit is ook de veilige manier om items met splice te verwijderen tijdens het lopen, omdat de posities die u nog moet bezoeken niet verschuiven.
De drie delen van een for-loop lezen
Het eerste deel draait één keer vóór al het andere en maakt meestal de teller aan. Het tweede wordt vóór elke ronde gecontroleerd, en de loop stopt zodra het false is. Het derde draait na elke ronde, meestal om de teller op te hogen.
Elk deel mag leeg blijven. for (;;) is een loop die alleen eindigt via break of return, wat af en toe handig is voor retry-logica met een duidelijke uitgang erin.
break, continue en labels
break verlaat direct de binnenste loop. continue slaat de rest van de huidige ronde over en gaat door met de volgende. Beide werken in for, for...of, for...in, while en do...while, maar niet in een forEach-callback, waar return alleen die ene aanroep beëindigt.
Een label is een naam gevolgd door een dubbele punt vóór een statement. break label en continue label richten zich dan op dat buitenste statement, wat u bespaart om een found-vlag bij te houden over geneste loops heen.
Looppatronen om te kopiëren
Klassieke for, vooruit, achteruit en in stappen
Verander de start, de conditie of de stap om te tellen zoals u wilt.
for...of met de index
entries() koppelt elke waarde aan haar positie, zodat u beide krijgt zonder teller.
while en do...while
do...while controleert de conditie na de body, dus de body draait één keer, ook als de conditie vanaf het begin false is.
Geneste loops verlaten met een label
break grid stopt beide loops zodra de eerste overeenkomst is gevonden.
Elk item op volgorde awaiten
for...of pauzeert bij elke await. Dezelfde code binnen forEach zou elke request tegelijk starten en niet wachten.
Loop-runner
Kies een loop en wat data. De loop draait echt, en elke ronde staat hieronder.
Loop
Data
Array
String
Gewoon object
Map
break na de derde ronde
Wat er draait
Output
Ronde {n}: {v}
forEach heeft geen break. De return in de callback beëindigt alleen die ene aanroep, dus elke ronde draait nog steeds.