Maison > interface Web > js tutoriel > Comment regrouper efficacement des objets dans un tableau selon plusieurs propriétés et résumer leurs valeurs ?

Comment regrouper efficacement des objets dans un tableau selon plusieurs propriétés et résumer leurs valeurs ?

Barbara Streisand
Libérer: 2024-11-08 15:53:02
original
286 Les gens l'ont consulté

How to efficiently group objects in an array by multiple properties and summarize their values?

Regroupement d'objets efficace avec plusieurs propriétés dans des tableaux

La tâche de regroupement d'objets dans des tableaux peut s'étendre au-delà d'une seule propriété ; dans certains cas, plusieurs propriétés doivent être prises en compte pour le regroupement. Dans ce scénario, une approche personnalisée est requise.

Abordons le problème du regroupement d'objets en fonction de la forme et de la couleur. L'objectif est de regrouper des objets de forme et de couleur identiques, tout en résumant leurs valeurs d'utilisation et d'instance.

Comportement attendu :

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 expectedResult = [
  { 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 }
];
Copier après la connexion

Considérations clés :

  • Identifiez des combinaisons uniques de propriétés de forme et de couleur.
  • Résumez les valeurs utilisées et d'instances pour les objets avec des combinaisons identiques.

Solution :

En utilisant Array#reduce, nous pouvons parcourir le tableau tout en conservant un objet assistant pour suivre les combinaisons forme-couleur.

Pour chaque objet :

  • Construisez une clé unique basée sur les propriétés de forme et de couleur.
  • Si la clé n'est pas trouvée dans l'objet d'assistance :

    • Créez un nouvel objet comme copie de l'objet actuel.
    • Ajoutez-le à l'objet assistant.
    • Incluez-le dans le tableau de résultats.
  • Si la clé est déjà dans l'objet d'assistance :

    • Incrément utilisé et valeurs d'instances pour l'objet existant dans l'objet d'assistance.

Ce processus est efficace regroupe les objets de forme et de couleur identiques tout en accumulant leurs valeurs.

Extrait de code :

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 }
];

let helper = {};
const result = arr.reduce((r, o) => {
  const key = `${o.shape}-${o.color}`;

  if (!helper[key]) {
    helper[key] = Object.assign({}, o);
    r.push(helper[key]);
  } else {
    helper[key].used += o.used;
    helper[key].instances += o.instances;
  }

  return r;
}, []);

console.log(result);
Copier après la connexion

Le résultat est systématiquement correct, correspondant au résultat attendu :

[
  { 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 }
]
Copier après la connexion

En utilisant cette technique, vous pouvez regrouper et résumer efficacement les valeurs en fonction de plusieurs propriétés, vous permettant ainsi de gérer des tâches complexes de manipulation de données dans des tableaux.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal