Pętla for w JavaScript i wszystkie inne pętle, porównane na żywo | We.Inc
for, for...of, for...in, while, do...while i forEach obok siebie. Uruchom każdą pętlę na tablicy, stringu, obiekcie lub Map i zobacz wynik albo błąd, który rzuca.
Klasyczna pętla for ma trzy części: for (let i = 0; i < arr.length; i++) { ... }. Używaj jej, gdy potrzebujesz indeksu lub własnego kroku. Dla samych wartości używaj for...of, dla kluczy obiektu for...in lub Object.entries, a while wtedy, gdy nie wiesz z góry, ile obiegów będzie potrzebnych.
Która pętla pasuje do zadania
Pętla
Najlepsza do
Można przerwać wcześniej?
for (let i = 0; i < n; i++)
Liczenia, dostępu przez indeks, cofania się lub kroku co 2
Tak
for (const x of iterable)
Wartości tablic, stringów, Map, Set, NodeList
Tak
for (const key in obj)
Kluczy zwykłego obiektu (łącznie z dziedziczonymi)
Tak
while (condition)
Powtarzania, aż coś się zmieni, przy nieznanej liczbie obiegów
Tak
do { } while (condition)
To samo, ale zawsze wykonuje się co najmniej raz
Tak
arr.forEach(fn)
Efektów ubocznych dla każdego elementu tablicy
Nie (tylko przez rzucenie błędu)
Każda pętla na tej stronie powtarza kod, ale różnią się tym, co dostajesz w każdym obiegu, po czym mogą iterować i jak z nich wyjść. Poniższy runner pozwala skierować każdą pętlę na cztery rodzaje danych i zobaczyć prawdziwy wynik, dzięki czemu łatwo wychwycić błędy, takie jak for...in na tablicy albo for...of na zwykłym obiekcie.
Wybierz pętlę i rodzaj danych. Strona naprawdę uruchamia tę pętlę w Twojej przeglądarce.
Panel wyniku pokazuje, co zawierała zmienna pętli w każdym obiegu, albo błąd, który rzuca dana kombinacja.
Włącz opcję break, aby zatrzymać pętlę w trzecim obiegu i zobaczyć, które pętle to obsługują.
Skopiuj dowolny wzorzec z przykładów niżej.
Deklaruj licznik przez let, a nie var. Z let każdy obieg dostaje własną kopię, więc callbacki utworzone w pętli widzą właściwą liczbę.
W for...of i for...in wybieraj const, gdy nie przypisujesz zmiennej ponownie; każdy obieg dostaje nowe wiązanie.
forEach nie czeka na asynchroniczne callbacki. Aby po kolei czekać na każdy element, użyj for...of z await wewnątrz funkcji async.
Upewnij się, że warunek pętli while może stać się fałszywy. Zmieniaj w ciele pętli testowaną zmienną, inaczej karta się zawiesi.
Najczęściej zadawane pytania
Czym różni się for...of od for...in?
for...of daje wartości z dowolnego obiektu iterowalnego, na przykład elementy tablicy lub znaki stringa. for...in daje nazwy właściwości jako stringi, łącznie z dziedziczonymi właściwościami wyliczalnymi. Na tablicy for...in zwraca '0', '1', '2' zamiast elementów.
Jak przerwać pętlę forEach?
Nie da się, chyba że rzucisz błąd. Przejdź na for...of, który obsługuje break, albo na some, every, find lub findIndex, które same się zatrzymują, gdy znajdą odpowiedź.
Jak iterować po obiekcie w JavaScript?
Użyj for (const [key, value] of Object.entries(obj)). Obejmuje tylko własne klucze obiektu i daje obie części. Użycie for...of bezpośrednio na zwykłym obiekcie rzuca TypeError: obj is not iterable.
Jak wyjść naraz z dwóch zagnieżdżonych pętli?
Umieść etykietę przed zewnętrzną pętlą i użyj jej z break: outer: for (...) { for (...) { if (found) break outer; } }. continue outer przechodzi natomiast do następnego obiegu zewnętrznej pętli.
Jak iterować od końca?
Zacznij od ostatniego indeksu i odliczaj w dół: for (let i = arr.length - 1; i >= 0; i--). To także bezpieczny sposób usuwania elementów przez splice w trakcie pętli, bo pozycje, które jeszcze masz odwiedzić, się nie przesuwają.
Trzy części pętli for
Pierwsza część wykonuje się raz, przed wszystkim innym, i zwykle tworzy licznik. Druga jest sprawdzana przed każdym obiegiem, a pętla kończy się, gdy tylko stanie się fałszywa. Trzecia wykonuje się po każdym obiegu, zwykle po to, by przesunąć licznik.
Każdą część można zostawić pustą. for (;;) to pętla, która kończy się tylko przez break lub return, co czasem przydaje się w logice ponawiania z wyraźnym wyjściem w środku.
break, continue i etykiety
break natychmiast opuszcza najbardziej wewnętrzną pętlę. continue pomija resztę bieżącego obiegu i przechodzi do następnego. Oba działają w for, for...of, for...in, while i do...while, ale nie w callbacku forEach, gdzie return kończy tylko to jedno wywołanie.
Etykieta to nazwa z dwukropkiem przed instrukcją. break label i continue label wskazują wtedy tę zewnętrzną instrukcję, co oszczędza Ci zarządzania flagą found w zagnieżdżonych pętlach.
Wzorce pętli do skopiowania
Klasyczne for: do przodu, do tyłu i z krokiem
Zmień początek, warunek lub krok, aby liczyć w dowolny sposób.
for...of z indeksem
entries() łączy każdą wartość z jej pozycją, więc dostajesz obie bez licznika.
while i do...while
do...while sprawdza warunek po ciele pętli, więc ciało wykona się raz, nawet gdy warunek od początku jest fałszywy.
Wychodzenie z zagnieżdżonych pętli przez etykietę
break grid zatrzymuje obie pętle, gdy tylko zostanie znalezione pierwsze dopasowanie.
Czekanie na każdy element po kolei
for...of zatrzymuje się przy każdym await. Ten sam kod w forEach uruchomiłby wszystkie żądania naraz i nie czekałby.
Uruchamianie pętli
Wybierz pętlę i dane. Pętla naprawdę się wykonuje, a każdy obieg jest wypisany poniżej.
Pętla
Dane
Tablica
String
Zwykły obiekt
Map
break po trzecim obiegu
Co się wykonuje
Wynik
Obieg {n}: {v}
forEach nie ma break. return wewnątrz callbacku kończy tylko to jedno wywołanie, więc każdy obieg i tak się wykonuje.