Oggetti JavaScript: Chiavi, Copie e [object Object] Risolto | We.Inc
Crea, leggi, scorri e copia oggetti JavaScript, e scopri perché la tua pagina stampa [object Object] e come mostrare il valore reale. Incolla qualsiasi JSON per esaminarlo dal vivo.
Un oggetto JavaScript è un insieme di valori con nome scritto come { key: value }. Leggi un valore con obj.key o obj['key'], elenchi le chiavi con Object.keys e le coppie con Object.entries. Il testo [object Object] compare quando un oggetto viene convertito in stringa; usa JSON.stringify(obj) per stamparne il contenuto.
Gli oggetti sono la forma in cui arrivano quasi tutte le risposte delle API, i file di configurazione e le prop di React. Questa guida copre le poche operazioni che usi ogni giorno, poi affronta le due sorprese classiche: [object Object] che compare nella pagina o in un alert, e una copia che condivide di nascosto i dati annidati con l'originale.
Incolla o modifica il JSON nell'ispettore. Viene analizzato nel tuo browser con JSON.parse.
Ogni riga mostra un modo comune di trasformare l'oggetto in testo o in una lista, compreso quello che produce [object Object].
Usa l'esperimento sulle copie per cambiare un valore annidato su una copia fatta con lo spread e su una fatta con structuredClone, e vedi quale si ripercuote sull'originale.
Gli esempi di codice qui sotto sono pronti da incollare nel tuo editor o nella console del browser.
Per vedere un oggetto nella console, stampalo da solo con console.log(obj) o console.table(obj). Unirlo a una stringa con + lo appiattisce in [object Object].
Object.keys restituisce le chiavi come stringhe, anche quelle che sembrano numeri, e le chiavi simili a interi escono in ordine crescente prima delle altre.
JSON.stringify salta le proprietà il cui valore è undefined, una funzione o un symbol, e lancia un TypeError sui riferimenti circolari.
Usa Object.hasOwn(obj, key) per verificare se l'oggetto stesso ha una chiave; l'operatore in considera anche le proprietà ereditate.
Domande frequenti
Perché il mio codice stampa [object Object]?
Qualcosa ha convertito l'oggetto in stringa: un + con del testo, un template literal, un alert, element.textContent o innerText. Il toString predefinito degli oggetti semplici restituisce il testo fisso [object Object]. Stampa invece JSON.stringify(obj), oppure scegli la proprietà che intendevi, come obj.name.
Come scorro un oggetto in JavaScript?
Usa for (const [key, value] of Object.entries(obj)) { ... }. Un oggetto semplice non è iterabile, quindi un for...of usato direttamente su di esso lancia un TypeError. Funziona anche for...in, ma include le chiavi enumerabili ereditate.
Come copio un oggetto senza legarlo all'originale?
Per un oggetto piatto basta { ...obj } o Object.assign({}, obj). Se l'oggetto contiene oggetti o array annidati, usa structuredClone(obj), che copia ogni livello. Gestisce Date, Map e Set ma lancia un DataCloneError su funzioni e nodi DOM.
Come trasformo un oggetto in un array e viceversa?
Object.entries(obj) dà un array di coppie [key, value]. Trasformalo con map o filter, poi ricostruisci un oggetto con Object.fromEntries(pairs). È il modo abituale per applicare map ai valori di un oggetto.
Qual è la differenza tra un oggetto e una Map?
Una Map accetta qualsiasi tipo come chiave, ricorda l'ordine di inserimento di tutte le chiavi e ha una proprietà size. Gli oggetti semplici usano chiavi stringa o symbol e sono ciò che produce il JSON. Nota che JSON.stringify trasforma una Map in {}, quindi convertila prima con Object.fromEntries(map).
Notazione con il punto o con le parentesi quadre
La notazione con il punto è più breve e funziona quando la chiave è un identificatore valido che conosci mentre scrivi il codice. Le parentesi quadre sono obbligatorie quando la chiave sta in una variabile, contiene uno spazio o un trattino, o inizia con una cifra, per esempio headers['content-type'].
Leggere una chiave che non esiste dà undefined invece di un errore. È leggere una proprietà di quell'undefined che genera l'errore, ed è per questo che l'optional chaining (user.address?.city) è così comodo sui dati delle API.
Copie superficiali e profonde
Lo spread copia solo il primo livello. Il nuovo oggetto ha i propri slot, ma se uno slot contiene un altro oggetto, entrambe le copie puntano allo stesso oggetto interno, quindi modificare copy.address.city modifica anche l'originale.
structuredClone percorre l'intera struttura e crea anche nuovi oggetti interni. Non mantiene i prototipi delle classi, i getter o i setter, quindi un'istanza di classe torna come un oggetto semplice con gli stessi dati.
Mostrare il valore reale invece di [object Object]
Quattro modi per visualizzare un oggetto
Solo la prima riga produce [object Object]. Le altre stampano un contenuto leggibile.
Stampa formattata dentro la pagina
Un elemento pre mantiene gli a capo e il rientro che JSON.stringify aggiunge con il terzo argomento.
Trasformare oggetti con entries e fromEntries
Aggiungere le tasse a ogni prezzo
entries trasforma l'oggetto in coppie, map cambia ogni valore, fromEntries costruisce un nuovo oggetto.
Spread o structuredClone
La copia con lo spread condivide l'oggetto address interno; il clone no.
Ispettore di oggetti
Modifica il JSON e guarda come ogni approccio lo trasforma in testo o in una lista.
Il tuo oggetto come JSON
JSON non valido: {v}
È un JSON valido ma non un oggetto. Racchiudilo tra parentesi graffe.
Modi per visualizzare l'oggetto
Codice
Output
Esperimento sulle copie
Cambia la città su una copia, poi controlla se è cambiato anche l'originale.