Somma di array di oggetti in JavaScript

Per sommare una proprietà in un array di oggetti, aggiungi il valore di quella proprietà a un totale progressivo mentre esamini ogni oggetto. Per esempio, se ogni oggetto contiene un valore numerico amount, JavaScript può calcolare il totale con reduce(). Puoi ottenere lo stesso risultato anche con forEach o con un ciclo for...of, se preferisci vedere esplicitamente ogni iterazione.

Gli esempi usano gli stessi tre record per permetterti di confrontare i diversi approcci; la somma dei valori amount è 600.

Sommare le proprietà degli oggetti con reduce()

reduce() richiama una funzione di callback per ogni elemento dell’array e passa al giro successivo il valore restituito dalla callback come accumulatore. Nel codice seguente, il primo argomento della callback è il totale progressivo e il secondo è l’oggetto corrente. L’ultimo 0 è il valore iniziale dell’accumulatore: in questo modo il calcolo ha un punto di partenza definito anche quando l’array non contiene record.

Esegui questo esempio:

Il codice e le etichette o gli output visibili in questa sezione restano in inglese.

const items = [
  { id: 1, amount: 100 },
  { id: 2, amount: 200 },
  { id: 3, amount: 300 },
];

const total = items.reduce((sum, item) => sum + item.amount, 0);
console.log(total);

Questo calcola la somma della proprietà amount, che distingue tra maiuscole e minuscole, e registra il numero ottenuto. Il nome della proprietà deve corrispondere esattamente, comprese le maiuscole: item.Amount indica una proprietà diversa. Usa reduce() quando un unico risultato accumulato rende chiara la trasformazione. Se il valore da sommare deriva da ciascun oggetto, calcolalo nella callback; puoi anche usare un map() separato per proiettare i valori, ma map() trasforma ogni elemento e non filtra i record.

Sommare le proprietà degli oggetti con forEach()

forEach visita ogni elemento dell’array e ne esegue la callback, ma non restituisce il totale accumulato. Inizializza una variabile separata prima della callback, poi aggiungi a essa la proprietà di ciascun elemento. Questo approccio può risultare più leggibile quando l’aggiornamento richiede più istruzioni.

Il codice e le etichette o gli output visibili in questa sezione restano in inglese.

const items = [
  { id: 1, amount: 100 },
  { id: 2, amount: 200 },
  { id: 3, amount: 300 },
];

let total = 0;
items.forEach((item) => {
  total += item.amount;
});
console.log(total);

L’accumulatore deve essere dichiarato con let, perché la callback ne modifica il valore. Mantieni il totale limitato all’ambito del calcolo e non aspettarti che il valore restituito da forEach contenga la somma. Scegli questa forma quando una callback esplicita e un totale progressivo con un nome chiaro rendono il codice più facile da seguire per il tuo team.

Sommare le proprietà degli oggetti con un ciclo for...of

Anche un ciclo for...of visita ogni elemento di un array iterabile. Offre un corpo del ciclo diretto, utile se devi saltare alcuni record, esaminare più di una proprietà o aggiungere altri controlli al calcolo.

Il codice e le etichette o gli output visibili in questa sezione restano in inglese.

const items = [
  { id: 1, amount: 100 },
  { id: 2, amount: 200 },
  { id: 3, amount: 300 },
];

let total = 0;
for (const item of items) {
  total += item.amount;
}
console.log(total);

Per un totale semplice, questi tre schemi esprimono la stessa somma. Scegli quello che rende più comprensibile la logica circostante: il materiale fornito non include benchmark che dimostrino un vantaggio generale in termini di velocità di un approccio rispetto agli altri. Tutti gli esempi presuppongono che amount sia un numero. Se aggiungi una stringa, questa può concatenarsi al totale progressivo; aggiungendo undefined, invece, si ottiene NaN. Decidi quindi come convalidare o normalizzare i dati in ingresso.

Gestire i valori mancanti e le somme condizionali

Se una proprietà può essere assente o avere valore null, decidi se quel record debba contribuire con zero oppure se i dati vadano rifiutati. Se la regola prevista è trattare entrambi i casi come zero, usa l’operatore di coalescenza nullish. Questo preserva il valore numerico legittimo 0, a differenza di un ripiego basato sulla veridicità del valore.

Il codice e le etichette o gli output visibili in questa sezione restano in inglese.

const items = [
  { id: 1, amount: 100 },
  { id: 2 },
  { id: 3, amount: null },
];

const total = items.reduce((sum, item) => sum + (item.amount ?? 0), 0);
console.log(total);

La coalescenza nullish gestisce null e undefined, ma non rende numeri validi stringhe arbitrarie. Con dati esterni, convalida il valore prima di aggiungerlo. Per esempio, controlla typeof item.amount === "number" e, in base alle esigenze dell’applicazione, salta i valori non numerici oppure segnala il problema. Non convertire i valori senza indicarlo, a meno che il formato di input non definisca come effettuare la conversione.

Per includere solo gli oggetti che soddisfano una condizione, inseriscila nella callback di accumulo o nel ciclo. Così eviti di usare map() come se fosse un filtro. L’esempio seguente somma gli importi solo dei record il cui flag paid è true:

const items = [
  { amount: 100, paid: true },
  { amount: 200, paid: false },
  { amount: 300, paid: true },
];

const paidTotal = items.reduce(
  (sum, item) => sum + (item.paid ? item.amount : 0),
  0
);
console.log(paidTotal);

Puoi accumulare più proprietà in un unico passaggio usando un oggetto come accumulatore di reduce(), per esempio { amount: 0, tax: 0 }, e restituendo un oggetto aggiornato per ogni elemento. Per sommare una sola proprietà, è più semplice usare un accumulatore numerico. In pratica, scegli tra reduce(), forEach e for...of in base a ciò che si adatta meglio al calcolo: un valore accumulato restituito, una callback esplicita o il controllo diretto del ciclo.