for...of

Przechodzi po kolejnych wartościach obiektu iterowalnego: tablicy, napisu, Map, Set i innych.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

JavaScript

const skills = ['HTML', 'CSS', 'JavaScript']

for (const skill of skills) {
  console.log(`Uczę się: ${skill}`)
}

Konsola

Uczę się: HTML

Uczę się: CSS

Uczę się: JavaScript

Definicja i zastosowanie

Pętla for...of w każdym obrocie podaje kolejną wartość z obiektu iterowalnego. Nie musisz zarządzać licznikiem ani sięgać po element przez indeks, więc kod jest krótszy i trudniej o błąd „o jeden”.

Działa z tablicami, napisami (znak po znaku, bez rozcinania emoji na połówki), obiektami Map i Set, listami z querySelectorAll() czy generatorami. Zwykły obiekt {} nie jest iterowalny, więc po jego zawartości przejdziesz przez Object.keys(), Object.values() albo Object.entries().

W przeciwieństwie do forEach() w for...of możesz używać break, continue, return i await. Gdy potrzebujesz też indeksu, użyj array.entries() z destrukturyzacją: for (const [index, value] of array.entries()).

Składnia

for (const element of iterable) {
  // instrukcje
}

Więcej przykładów

Indeks i wartość przez entries()

JavaScript

const tasks = ['Zmienne', 'Pętle', 'Funkcje']

for (const [index, task] of tasks.entries()) {
  console.log(index, task)
}

Konsola

0 Zmienne

1 Pętle

2 Funkcje

Obiekt przez Object.entries()

JavaScript

const scores = { Ania: 120, Kuba: 95 }

for (const [name, points] of Object.entries(scores)) {
  console.log(`${name} ma ${points} pkt`)
}

Konsola

Ania ma 120 pkt

Kuba ma 95 pkt

Napis znak po znaku

JavaScript

const word = 'Kod👾'

for (const char of word) {
  console.log(char)
}

console.log(word.length)

Konsola

👾

for...of przechodzi po całych znakach Unicode, dlatego emoji jest jednym elementem, choć length liczy je jako 2.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

for...of daje wartości, a for...in klucze. Do tablic prawie zawsze chcesz for...of.
Z await wewnątrz pętli operacje wykonają się po kolei. Aby uruchomić je równolegle, zbierz obietnice w tablicy i użyj Promise.all().
Deklaruj zmienną pętli przez const. Każdy obrót dostaje nową zmienną, a przypadkowe nadpisanie od razu zgłosi błąd.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz JavaScript w kursie JavaScript i ReactZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs