Obiekty w JavaScript i skąd się bierze [object Object]
Przewodnik po obiektach w JavaScript
Obiekty w JavaScript: klucze, kopie i naprawa [object Object] | We.Inc
Twórz, czytaj, iteruj i kopiuj obiekty JavaScript oraz dowiedz się, dlaczego Twoja strona wyświetla [object Object] i jak pokazać prawdziwą wartość. Wklej dowolny JSON, aby zbadać go na żywo.
Obiekt JavaScript to zbiór nazwanych wartości zapisany jako { key: value }. Wartość odczytujesz przez obj.key lub obj['key'], klucze wypisujesz przez Object.keys, a pary przez Object.entries. Tekst [object Object] pojawia się, gdy obiekt zostaje zamieniony na string; aby wypisać jego zawartość, użyj JSON.stringify(obj).
Obiekty to kształt, w jakim przychodzi niemal każda odpowiedź API, plik konfiguracyjny i prop w React. Ten przewodnik omawia garść operacji używanych codziennie, a potem dwie klasyczne niespodzianki: [object Object] pojawiające się na stronie lub w alercie oraz kopię, która po cichu dzieli zagnieżdżone dane z oryginałem.
Wklej lub edytuj JSON w inspektorze. Jest parsowany w Twojej przeglądarce przez JSON.parse.
Każdy wiersz pokazuje popularny sposób zamiany obiektu na tekst lub listę, łącznie z tym, który daje [object Object].
W eksperymencie z kopiowaniem zmień zagnieżdżoną wartość w kopii przez spread i w kopii przez structuredClone i zobacz, która przecieka z powrotem do oryginału.
Przykłady kodu poniżej są gotowe do wklejenia w edytorze lub konsoli przeglądarki.
Aby zobaczyć obiekt w konsoli, zaloguj go osobno przez console.log(obj) lub console.table(obj). Doklejenie go do stringa przez + spłaszcza go do [object Object].
Object.keys zwraca klucze jako stringi, nawet te wyglądające na liczby, a klucze przypominające liczby całkowite wychodzą rosnąco przed pozostałymi.
JSON.stringify pomija właściwości, których wartość to undefined, funkcja lub symbol, a przy referencjach cyklicznych rzuca TypeError.
Użyj Object.hasOwn(obj, key), aby sprawdzić, czy sam obiekt ma klucz; operator in patrzy też na właściwości dziedziczone.
Najczęściej zadawane pytania
Dlaczego mój kod wypisuje [object Object]?
Coś zamieniło obiekt na string: + z tekstem, template literal, alert, element.textContent lub innerText. Domyślny toString dla zwykłych obiektów zwraca stały tekst [object Object]. Zamiast tego wypisz JSON.stringify(obj) albo wybierz właściwość, o którą Ci chodziło, na przykład obj.name.
Jak iterować po obiekcie w JavaScript?
Użyj for (const [key, value] of Object.entries(obj)) { ... }. Zwykły obiekt nie jest iterowalny, więc for...of bezpośrednio na nim rzuca TypeError. for...in też działa, ale obejmuje dziedziczone klucze enumerable.
Jak skopiować obiekt, aby nie był powiązany z oryginałem?
Dla płaskiego obiektu wystarczy { ...obj } lub Object.assign({}, obj). Jeśli obiekt zawiera zagnieżdżone obiekty lub tablice, użyj structuredClone(obj), który kopiuje każdy poziom. Obsługuje Date, Map i Set, ale rzuca DataCloneError przy funkcjach i węzłach DOM.
Jak zamienić obiekt na tablicę i z powrotem?
Object.entries(obj) daje tablicę par [key, value]. Przekształć ją przez map lub filter, a potem odbuduj obiekt przez Object.fromEntries(pairs). To typowy sposób mapowania wartości obiektu.
Czym różni się obiekt od Map?
Map przyjmuje jako klucz dowolny typ, pamięta kolejność wstawiania wszystkich kluczy i ma właściwość size. Zwykłe obiekty używają kluczy typu string lub symbol i to je produkuje JSON. Pamiętaj, że JSON.stringify zamienia Map na {}, więc najpierw przekonwertuj ją przez Object.fromEntries(map).
Notacja kropkowa kontra nawiasy
Notacja kropkowa jest krótsza i działa, gdy klucz to poprawny identyfikator znany Ci w momencie pisania kodu. Nawiasy są wymagane, gdy klucz siedzi w zmiennej, zawiera spację lub myślnik albo zaczyna się od cyfry, na przykład headers['content-type'].
Odczyt nieistniejącego klucza daje undefined, a nie błąd. Błąd rzuca dopiero odczyt właściwości tego undefined, dlatego optional chaining (user.address?.city) jest tak przydatny przy danych z API.
Płytkie i głębokie kopie
Spread kopiuje tylko najwyższy poziom. Nowy obiekt dostaje własne miejsca, ale jeśli miejsce zawiera inny obiekt, obie kopie wskazują ten sam wewnętrzny obiekt, więc edycja copy.address.city zmienia też oryginał.
structuredClone przechodzi przez całą strukturę i buduje też nowe obiekty wewnętrzne. Nie zachowuje prototypów klas, getterów ani setterów, więc instancja klasy wraca jako zwykły obiekt z tymi samymi danymi.
Pokazywanie prawdziwej wartości zamiast [object Object]
Cztery sposoby wyświetlenia obiektu
Tylko pierwsza linia daje [object Object]. Pozostałe wypisują czytelną zawartość.
Ładne formatowanie na stronie
Element pre zachowuje łamania linii i wcięcia, które JSON.stringify dodaje dzięki trzeciemu argumentowi.
Przekształcanie obiektów przez entries i fromEntries
Dolicz podatek do każdej ceny
entries zamienia obiekt na pary, map zmienia każdą wartość, fromEntries buduje nowy obiekt.
Spread kontra structuredClone
Kopia przez spread współdzieli wewnętrzny obiekt address; klon nie.
Inspektor obiektów
Edytuj JSON i zobacz, jak każde podejście zamienia go na tekst lub listę.
Twój obiekt jako JSON
Niepoprawny JSON: {v}
To poprawny JSON, ale nie obiekt. Otocz go nawiasami klamrowymi.
Sposoby wyświetlenia obiektu
Kod
Wynik
Eksperyment z kopiowaniem
Zmień miasto w kopii, a potem sprawdź, czy oryginał też się zmienił.