Iteracja po obiekcie w Javascript
Spis treści
Wstęp
W języku javascript, najczęściej spotkasz się z potrzebą iteracji po tablicy. Zdecydowanie rzadziej będziesz chciał iterować po właściwościach obiektu.
Gwarantuję ci jednak, że prędzej czy później będziesz musiał się z tym problemem zmierzyć. A mówię problemem, ponieważ obiekt nie jest strukturą danych stworzoną z myślą o iteracji i dlatego, nie jest to wcale tak trywialne zadanie, jak mogłoby ci się wydawać.
for...in
for...in to w zasadzie jedyny sposób na iterację po obiekcie przed ES6.
Zatem jeśli z jakiegoś powodu musisz wspierać bardzo stare przeglądarki, to tutaj możesz zakończyć czytanie.
Zwróć uwagę na konieczność sprawdzenia czy klucz obiektu należy bezpośrednio do
tego obiektu za pomocą metody hasOwnProperty.
Uwaga! W powyższym przykładzie umyślnie użyłem "staroświeckiego" var przy deklarowaniu zmiennej.
Dlaczego? Skoro for...in to jedyna metoda, która zadziała bez wsparcia ES6, to chciałem żeby cały kod z przykładu
zadziałał w niewspierającej ES6 przeglądarce.
Jeżeli nie musisz wspierać takich dinozaurów (a najczęściej nie musisz), to już tradycyjnie polecam używanie
const i let zamiast var!
Dlaczego użycie hasOwnProperty jest konieczne/zalecane?
Wynika to trochę z tego co pisałem na wstępie - obiekt nie jest strukturą danych stworzoną z myślą o iteracji po nim (w przeciwieństwie do tablicy).
Iterując po obiekcie za pomocą for...in musisz pamiętać, że właściwości (klucze) obiektu, które zostały odziedziczone,
są również brane pod uwagę. Metoda hasOwnProperty ma za zadanie odpowiedzieć czy dany klucz został zdefiniowany
bezpośrednio na obiekcie, czy może został odziedziczony (prototype chain).
Oczywiście w przykładzie powyżej nie ma niebezpieczeństwa, że obiekt ma jakieś odziedziczone właściwości.
Przecież jawnie i bezpośrednio zdefiniowałem wszystkie klucze. Jednak nawet w takim przypadku, dobrą praktyką
jest użycie hasOwnProperty. Nigdy nie wiadomo jak kod będzie się zmieniał w przyszłości. Na dzisiaj nie ma problemu,
ale jutro już możesz mieć kłopoty.
Zamiana obiektu w tablicę
Skoro, obiekt nie jest najwygodniejszym typem danych do iteracji, to czemu nie użyć idealnej do tego zadania tablicy? Dokładnie tak należy zrobić!
Jak już zamienisz obiekt w tablicę, to otworzą się przed tobą bardzo wygodne metody iteracji, które opisałem w osobnym artykule: Iteracja po tablicy w języku javascript.
Specyfikacja ES6 udostępnia nowe metody obiektu, które pomogą ci w zamianie obiektu w tablicę.
Są to:
Object.keysObject.valuesObject.entries
Object.keys
Object.keys tworzy nową tablicę, wypełnioną właściwościami (kluczami) obiektu.
Object.values
Nie rzadko zdarzy się, że zamiast iterować po kluczach obiektu, będziesz bardziej zainteresowany wartościami obiektu.
Object.values tworzy nową tablicę, wypełnioną wartościami wszystkich właściwości (kluczy) obiektu.
Object.entries
Object.entries to trochę taka mieszanka dwóch poprzednich metod.
Tworzy nową tablicę, która zawiera w sobie kolejne tablice.
Każda tablica wewnętrzna zawiera dokładnie dwa elementy: klucz i wartość.
Podsumowanie
Według mnie, najlepszym i najwygdniejszym sposobem iteracji po obiekcie jest:
Zamienić obiekt w tablicę (używając
Object.keyslubObject.values)Iterować wygodnie po tablicy
Sposoby na iterację po tablicy, omówiłem w osobnym artykule: Iteracja po tablicy w języku javascript.
