Introduzione
Gli oggetti JavaScript sono strutture fondamentali per rappresentare dati organizzati in coppie chiave-valore. Oltre ad aggiungere, modificare o rimuovere proprietà, spesso è necessario analizzare dinamicamente il contenuto di un oggetto: per esempio, visualizzare un riepilogo, filtrare alcune informazioni, trasformare i valori oppure creare un nuovo oggetto.
In questo tutorial vedremo come utilizzare Object.keys(), Object.values() e soprattutto Object.entries(). Quest’ultimo metodo converte un oggetto in un array di coppie, rendendo possibile applicare metodi come map(), filter() e reduce().
Impareremo inoltre a ricostruire un oggetto con Object.fromEntries(). Questa tecnica è utile quando si lavora con dati provenienti da API, configurazioni, moduli di ricerca o sistemi di gestione degli utenti.
Codice completo
const prodotto = {
nome: "Tastiera meccanica",
categoria: "accessori",
prezzo: 89.90,
disponibile: true,
recensioni: 4.6
};
// 1. Ottenere soltanto le chiavi
const chiavi = Object.keys(prodotto);
console.log("Chiavi:", chiavi);
// 2. Ottenere soltanto i valori
const valori = Object.values(prodotto);
console.log("Valori:", valori);
// 3. Trasformare l´oggetto in un array di coppie
const coppie = Object.entries(prodotto);
console.log("Coppie:", coppie);
// 4. Filtrare solo le proprietà utili per il riepilogo
const riepilogo = Object.fromEntries(
Object.entries(prodotto).filter(([chiave]) => {
return chiave !== "disponibile";
})
);
console.log("Riepilogo:", riepilogo);
// 5. Applicare una trasformazione a una proprietà
const prodottoScontato = Object.fromEntries(
Object.entries(prodotto).map(([chiave, valore]) => {
if (chiave === "prezzo") {
return [chiave, valore * 0.9];
}
return [chiave, valore];
})
);
console.log("Prodotto scontato:", prodottoScontato);
// 6. Calcolare un valore derivato
const numeri = {
primo: 12,
secondo: 8,
terzo: 15
};
const totale = Object.values(numeri).reduce((somma, valore) => {
return somma + valore;
}, 0);
console.log("Totale:", totale); Spiegazione
Object.keys()
Object.keys() restituisce un array contenente i nomi delle proprietà enumerabili dell’oggetto. È utile quando si desidera controllare quali informazioni sono disponibili senza accedere immediatamente ai valori.
const account = {
username: "marta89",
ruolo: "editor",
attivo: true
};
const proprieta = Object.keys(account);
proprieta.forEach((proprieta) => {
console.log("Proprietà trovata:", proprieta);
}); Il risultato sarà un array simile a ["username", "ruolo", "attivo"]. L’oggetto originale non viene modificato.
Object.values()
Object.values() restituisce solo i valori delle proprietà. È particolarmente comodo quando non interessa il nome della chiave, ma si vuole eseguire un calcolo sui dati.
const vendite = {
lunedi: 120,
martedi: 95,
mercoledi: 140
};
const totaleVendite = Object.values(vendite).reduce(
(totale, valore) => totale + valore,
0
);
console.log(totaleVendite); // 355 In questo caso reduce() attraversa tutti i valori e li somma. Il secondo argomento, 0, rappresenta il valore iniziale dell’accumulatore.
Object.entries()
Object.entries() restituisce un array nel quale ogni elemento è composto da due valori: la chiave e il valore corrispondente.
const impostazioni = {
tema: "scuro",
lingua: "it",
notifiche: true
};
for (const [chiave, valore] of Object.entries(impostazioni)) {
console.log(`${chiave}: ${valore}`);
} La sintassi [chiave, valore] utilizza la destrutturazione dell’array. In questo modo non è necessario accedere manualmente a coppia[0] e coppia[1].
Filtrare e ricostruire un oggetto
Un caso pratico consiste nel selezionare solo alcune proprietà. filter() decide quali coppie mantenere, mentre Object.fromEntries() converte nuovamente l’array filtrato in un oggetto.
const profilo = {
nome: "Luca",
email: "[email protected]",
password: "segreta",
eta: 28
};
const datiPubblici = Object.fromEntries(
Object.entries(profilo).filter(([chiave]) => {
return chiave !== "password";
})
);
console.log(datiPubblici); Questa strategia è utile per evitare di inviare accidentalmente dati riservati a un’interfaccia o a un’API. Naturalmente, la sicurezza reale deve essere gestita anche lato server.
Trasformare i valori
Con map() possiamo creare una nuova coppia modificando il valore originale. È preferibile restituire un nuovo oggetto invece di alterare direttamente quello di partenza, soprattutto quando lo stesso dato viene usato in più punti dell’applicazione.
const prezzi = {
mouse: 25,
monitor: 180,
webcam: 60
};
const prezziConIVA = Object.fromEntries(
Object.entries(prezzi).map(([prodotto, prezzo]) => {
return [prodotto, prezzo * 1.22];
})
);
console.log(prezziConIVA); Best practice
- Non modificare inutilmente l’oggetto originale: usa
Object.entries()eObject.fromEntries()per produrre una nuova struttura. - Usa il metodo più adatto:
Object.keys()per le chiavi,Object.values()per i valori eObject.entries()quando servono entrambi. - Valida i dati prima dei calcoli: verifica che i valori siano numerici prima di applicare somme o moltiplicazioni.
- Evita di confondere oggetti e array: gli oggetti descrivono proprietà nominate, mentre gli array rappresentano sequenze ordinate.
- Preferisci nomi chiari: variabili come
chiave,valore,prezzoetotalerendono il codice più leggibile. - Considera la compatibilità:
Object.fromEntries()è disponibile nei browser moderni e nelle versioni recenti di Node.js.
Riepilogo
Gli oggetti possono essere esplorati e trasformati facilmente grazie ai metodi statici di Object. Object.keys() restituisce le proprietà, Object.values() i relativi valori e Object.entries() le coppie chiave-valore.
Combinando Object.entries() con filter(), map() e reduce() è possibile creare trasformazioni dinamiche e leggibili. Infine, Object.fromEntries() permette di ricostruire un nuovo oggetto a partire dai risultati elaborati.
Queste tecniche sono molto utili per filtrare dati sensibili, calcolare statistiche, applicare trasformazioni a configurazioni e preparare oggetti da inviare a servizi esterni.
Approfondisci con risorse ufficiali
- MDN - Object.keys(): documentazione ufficiale per ottenere le chiavi enumerabili di un oggetto.
- MDN - Object.values(): riferimento per lavorare con l’elenco dei valori di un oggetto.
- MDN - Object.entries(): guida alle coppie chiave-valore e alla loro iterazione.
- MDN - Object.fromEntries(): documentazione per ricostruire oggetti a partire da array di coppie.
- MDN - Array methods: approfondimento su
map(),filter()ereduce().
