Przejdź do głównej treści
eLearner.app
Moduł 5 · Lekcja 2 z 418/32 w kursie~10 min
Lekcje modułu (2/4)

for…of oraz for…in

JavaScript ma dwie „ergonomiczne” pętle, których nie należy mylić:

  • for…of iteruje po wartościach kolekcji iterowalnej (tablica, string, Set, Map...).
  • for…in iteruje po enumerowalnych kluczach obiektu.

Są blisko spokrewnione i łatwo je pomylić – użycie niewłaściwej to jedna z pierwszych pułapek języka.

for…of dla tablic i stringów

JS
const colori = ['rosso', 'verde', 'blu'];
for (const c of colori) {
  console.log(c); // 'rosso', 'verde', 'blu'
}

for (const ch of 'abc') {
  console.log(ch); // 'a', 'b', 'c'
}

Nie daje Ci indeksu. Jeśli go potrzebujesz, użyj entries():

JS
for (const [i, c] of colori.entries()) {
  console.log(i, c); // 0 rosso, 1 verde, 2 blu
}

for…in dla obiektów

JS
const utente = { nome: 'Anna', eta: 30, citta: 'Roma' };
for (const chiave in utente) {
  console.log(chiave, utente[chiave]); // 'nome' 'Anna', ...
}

Kiedy ich NIE mylić

JS
const colori = ['rosso', 'verde', 'blu'];

// SBAGLIATO: stampa gli indici come stringhe!
for (const x in colori) {
  console.log(x); // '0', '1', '2'
}

// GIUSTO
for (const x of colori) {
  console.log(x); // 'rosso', 'verde', 'blu'
}

Spróbuj sam

Ćwiczenie#js.m5.l2.e1
Próby: 0Ładowanie...

Zdefiniuj `concat(words)`, które dla podanej listy stringów zwraca jeden połączony string, rozdzielony spacjami. Użyj for…of.

Ładowanie edytora...
Pokaż wskazówkę

Kumuluj w stringu; dodaj spację tylko wtedy, gdy to nie jest pierwsze słowo.

Rozwiązanie dostępne po 3 próbach

Ćwiczenie powtórzeniowe

Ćwiczenie#js.m5.l2.e2
Próby: 0Ładowanie...

Zdefiniuj `positiveValues(obj)`, które zwraca tablicę z wartościami obiektu będącymi liczbami > 0. Użyj for…in. Kolejność musi być zgodna z kolejnością iteracji kluczy.

Ładowanie edytora...
Pokaż wskazówkę

Przejdź pętlą for...in po kluczach, filtruj za pomocą typeof oraz > 0, a następnie dodaj (push) do wyników.

Rozwiązanie dostępne po 3 próbach