JavaScript-objecten, en waarom u [object Object] ziet
Gids JavaScript-objecten
JavaScript-objecten: keys, kopieën en [object Object] opgelost | We.Inc
Maak, lees, doorloop en kopieer JavaScript-objecten, en ontdek waarom uw pagina [object Object] toont en hoe u de echte waarde laat zien. Plak willekeurige JSON om die live te inspecteren.
Een JavaScript-object is een verzameling benoemde waarden, geschreven als { key: value }. U leest een waarde met obj.key of obj['key'], toont de keys met Object.keys en de paren met Object.entries. De tekst [object Object] verschijnt als een object in een string wordt omgezet; gebruik JSON.stringify(obj) om de inhoud te tonen.
Objecten zijn de vorm waarin bijna elke API-response, elk configuratiebestand en elke React-prop binnenkomt. Deze gids behandelt de handvol bewerkingen die u dagelijks gebruikt en gaat daarna in op de twee klassieke verrassingen: [object Object] dat in de pagina of een alert verschijnt, en een kopie die stiekem geneste data deelt met het origineel.
Plak of bewerk JSON in de inspector. Die wordt in uw browser geparst met JSON.parse.
Elke rij toont een gangbare manier om het object om te zetten in tekst of een lijst, inclusief de manier die [object Object] oplevert.
Gebruik het kopieerexperiment om een geneste waarde te wijzigen op een spread-kopie en op een structuredClone-kopie, en zie welke terugstroomt naar het origineel.
De codevoorbeelden hieronder kunt u zo in uw editor of de browserconsole plakken.
Om een object in de console te zien, logt u het los met console.log(obj) of console.table(obj). Het met + aan een string plakken maakt er [object Object] van.
Object.keys geeft keys terug als strings, ook keys die op getallen lijken, en integer-achtige keys komen in oplopende volgorde vóór de rest.
JSON.stringify slaat properties over waarvan de waarde undefined, een functie of een symbol is, en gooit een TypeError bij circulaire verwijzingen.
Gebruik Object.hasOwn(obj, key) om te testen of het object zelf een key heeft; de in-operator kijkt ook naar geërfde properties.
Veelgestelde vragen
Waarom toont mijn code [object Object]?
Iets heeft het object naar een string omgezet: een + met tekst, een template literal, een alert, element.textContent of innerText. De standaard-toString van gewone objecten geeft de vaste tekst [object Object]. Toon in plaats daarvan JSON.stringify(obj), of kies de property die u bedoelde, zoals obj.name.
Hoe doorloop ik een object in JavaScript?
Gebruik for (const [key, value] of Object.entries(obj)) { ... }. Een gewoon object is niet iterable, dus for...of er direct op gooit een TypeError. for...in werkt ook, maar neemt geërfde enumerable keys mee.
Hoe kopieer ik een object zonder dat het aan het origineel gekoppeld blijft?
Voor een plat object volstaat { ...obj } of Object.assign({}, obj). Bevat het object geneste objecten of arrays, gebruik dan structuredClone(obj), dat elk niveau kopieert. Het kan overweg met Dates, Maps en Sets, maar gooit een DataCloneError bij functies en DOM-nodes.
Hoe zet ik een object om in een array en weer terug?
Object.entries(obj) geeft een array met [key, value]-paren. Bewerk die met map of filter en bouw daarna weer een object met Object.fromEntries(pairs). Dit is de gebruikelijke manier om over de waarden van een object te mappen.
Wat is het verschil tussen een object en een Map?
Een Map accepteert elk type als key, onthoudt de invoegvolgorde van alle keys en heeft een size-property. Gewone objecten gebruiken string- of symbol-keys en zijn wat JSON oplevert. Let op: JSON.stringify maakt van een Map {}, zet hem dus eerst om met Object.fromEntries(map).
Puntnotatie versus haakjes
Puntnotatie is korter en werkt als de key een geldige identifier is die u kent tijdens het schrijven van de code. Haakjes zijn nodig als de key in een variabele zit, een spatie of streepje bevat, of met een cijfer begint, bijvoorbeeld headers['content-type'].
Een key lezen die niet bestaat, geeft undefined in plaats van een fout. Een property van die undefined lezen is wat een fout gooit, en daarom is optional chaining (user.address?.city) zo handig bij API-data.
Ondiepe en diepe kopieën
Spread kopieert alleen het bovenste niveau. Het nieuwe object krijgt eigen slots, maar als een slot een ander object bevat, wijzen beide kopieën naar datzelfde binnenste object, dus copy.address.city wijzigen wijzigt ook het origineel.
structuredClone loopt door de hele structuur en bouwt ook nieuwe binnenste objecten. Het behoudt geen class-prototypes, getters of setters, dus een class-instantie komt terug als gewoon object met dezelfde data.
De echte waarde tonen in plaats van [object Object]
Vier manieren om een object te tonen
Alleen de eerste regel geeft [object Object]. De andere tonen leesbare inhoud.
Netjes opgemaakt tonen in de pagina
Een pre-element behoudt de regeleinden en inspringing die JSON.stringify met zijn derde argument toevoegt.
Objecten omvormen met entries en fromEntries
Btw toevoegen aan elke prijs
entries zet het object om in paren, map wijzigt elke waarde, fromEntries bouwt een nieuw object.
Spread versus structuredClone
De spread-kopie deelt het binnenste address-object; de clone niet.
Objectinspector
Bewerk de JSON en zie hoe elke aanpak hem omzet in tekst of een lijst.
Uw object als JSON
Geen geldige JSON: {v}
Dat is geldige JSON, maar geen object. Zet het tussen accolades.
Manieren om het object te tonen
Code
Output
Kopieerexperiment
Wijzig de stad op een kopie en kijk daarna of het origineel ook veranderde.