for...in

Przechodzi po nazwach wyliczalnych właściwości obiektu, także tych odziedziczonych z prototypu.

Na tej stronie

Przykład

#
JavaScript
const student = { name: 'Ania', level: 3, course: 'JavaScript' }

for (const key in student) {
  console.log(`${key}: ${student[key]}`)
}
Konsola
name: Ania
level: 3
course: JavaScript

Definicja i zastosowanie

#

Pętla for...in w każdym obrocie podaje kolejny klucz obiektu jako napis. Wartość odczytasz przez nawiasy kwadratowe: object[key]. To najstarszy sposób przechodzenia po właściwościach zwykłych obiektów.

Pętla obejmuje też wyliczalne właściwości odziedziczone z prototypu. W zwykłych literałach obiektów rzadko to przeszkadza, ale przy obiektach tworzonych przez Object.create() pojawią się dodatkowe klucze. Odfiltrujesz je warunkiem Object.hasOwn(object, key).

Do tablic for...in się nie nadaje: zwraca indeksy jako napisy ("0", "1") i może złapać dodatkowe właściwości. W nowoczesnym kodzie częściej używa się Object.keys() lub Object.entries() razem z for...of, bo zwracają tylko własne klucze.

Składnia

#
Składnia
for (const key in object) {
  // instrukcje
}

Więcej przykładów

#
Odziedziczone klucze i Object.hasOwn()
JavaScript
const defaults = { theme: 'dark' }
const settings = Object.create(defaults)
settings.sounds = true

for (const key in settings) {
  console.log(key, Object.hasOwn(settings, key))
}
Konsola
sounds true
theme false
Pułapka: for...in na tablicy
JavaScript
const points = [10, 20, 30]

for (const index in points) {
  console.log(index + 1)
}
Konsola
01
11
21

Indeksy są napisami, więc + 1 skleja tekst zamiast dodawać. Do tablic używaj for...of albo forEach().

Kolejność kluczy
JavaScript
const lessons = { b: 'CSS', 2: 'Pętle', a: 'HTML', 1: 'Zmienne' }

for (const key in lessons) {
  console.log(key)
}
Konsola
1
2
b
a

Klucze wyglądające jak liczby całkowite idą najpierw, rosnąco. Pozostałe zachowują kolejność dodania.

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

#
  • Jeśli potrzebujesz tylko własnych kluczy, prościej napisać for (const key of Object.keys(obj)). Nie trzeba wtedy sprawdzać Object.hasOwn().
  • Nie dodawaj ani nie usuwaj właściwości w trakcie pętli for...in. Nie ma gwarancji, czy nowe klucze zostaną odwiedzone.
  • Klucze typu Symbol i właściwości niewyliczalne są pomijane.

Powiązane hasła

#

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