JavaScript: esplorare e trasformare gli oggetti con Object.entries()

by Anastasia P.
SHARE
JavaScript: esplorare e trasformare gli oggetti con Object.entries()
© Guida-HTML5.it

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() e Object.fromEntries() per produrre una nuova struttura.
  • Usa il metodo più adatto: Object.keys() per le chiavi, Object.values() per i valori e Object.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, prezzo e totale rendono 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() e reduce().

SHARE