Comment regrouper des objets par plusieurs propriétés et agréger leurs valeurs en JavaScript ?

Regrouper des objets par plusieurs propriétés et agréger leurs valeurs

Le regroupement d'éléments dans un tableau par plusieurs propriétés est essentiel pour l'organisation et la synthèse des données. Pour répondre à l'exigence spécifique de regrouper les objets par forme et couleur et d'agréger leurs valeurs, nous pouvons exploiter la puissance des méthodes intégrées de JavaScript.

Étape 1 : Array#reduce

La méthode Array#reduce fournit un moyen concis et efficace de parcourir un tableau, en accumulant une seule sortie à partir des éléments individuels. Dans ce cas, nous pouvons l'utiliser pour accumuler des objets en fonction de leurs propriétés combinées de forme et de couleur.

Étape 2 : Objet d'assistance

Nous utilisons un objet d'assistance pour suivre combinaisons uniques de forme et de couleur. Pour chaque objet du tableau, nous vérifions si la combinaison existe dans l'assistant en concaténant les propriétés de forme et de couleur. S'il n'existe pas, nous créons une nouvelle entrée dans l'objet d'assistance et envoyons simultanément une copie de l'objet actuel dans le tableau de résultats.

Étape 3 : Agrégation de valeurs

Si une combinaison similaire existe déjà dans l'objet assistant, nous incrémentons simplement les valeurs utilisées et instances de l'entrée correspondante, agrégeant ainsi les valeurs de l'objet actuel. object.

Étape 4 : Copie d'objet

Pour éviter de modifier les objets d'origine dans le tableau, nous créons une copie à l'aide de Object.assign. Cela garantit que l'objet d'assistance contient des copies indépendantes des objets, ce qui nous permet d'agréger les valeurs séparément.

Implémentation :

const arr = [
  { shape: 'square', color: 'red', used: 1, instances: 1 },
  { shape: 'square', color: 'red', used: 2, instances: 1 },
  { shape: 'circle', color: 'blue', used: 0, instances: 0 },
  { shape: 'square', color: 'blue', used: 4, instances: 4 },
  { shape: 'circle', color: 'red', used: 1, instances: 1 },
  { shape: 'circle', color: 'red', used: 1, instances: 0 },
  { shape: 'square', color: 'blue', used: 4, instances: 5 },
  { shape: 'square', color: 'red', used: 2, instances: 1 },
];

const helper = {};
const result = arr.reduce((r, o) => {
  const key = o.shape + '-' + o.color;
  if (!helper[key]) {
    helper[key] = Object.assign({}, o); // create a copy of o
    r.push(helper[key]);
  } else {
    helper[key].used += o.used;
    helper[key].instances += o.instances;
  }
  return r;
}, []);

console.log(result);

Sortie :

[
  { shape: 'square', color: 'red', used: 5, instances: 3 },
  { shape: 'circle', color: 'red', used: 2, instances: 1 },
  { shape: 'square', color: 'blue', used: 11, instances: 9 },
  { shape: 'circle', color: 'blue', used: 0, instances: 0 }
]

Cette solution regroupe efficacement les objets par forme et couleur, fournissant un résumé cohérent de l'objet. données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!