Maison > interface Web > js tutoriel > le corps du texte

Comment fusionner des clés en double et additionner leurs valeurs dans un tableau d'objets JavaScript ?

Linda Hamilton
Libérer: 2024-11-28 03:47:10
original
812 Les gens l'ont consulté

How to Merge Duplicate Keys and Sum Their Values in a JavaScript Object Array?

Fusionner des clés en double et additionner des valeurs dans un tableau d'objets

En JavaScript, travailler avec des tableaux d'objets peut être courant. Parfois, nous pouvons rencontrer le besoin de regrouper et de modifier des objets au sein d’un tableau tout en conservant des propriétés spécifiques. Un de ces scénarios consiste à résumer les valeurs associées à des clés similaires.

Explorons cette tâche avec un exemple de tableau d'objets :

const objects = [
  { name: 'P1', value: 150 },
  { name: 'P1', value: 150 },
  { name: 'P2', value: 200 },
  { name: 'P3', value: 450 },
];
Copier après la connexion

Notre objectif est de regrouper les objets par la propriété 'name' et additionnez la propriété « valeur » pour chaque « nom » distinct. Le résultat souhaité devrait ressembler à ceci :

[
  { name: 'P1', value: 300 },
  { name: 'P2', value: 200 },
  { name: 'P3', value: 450 },
];
Copier après la connexion

Pour y parvenir, nous pouvons utiliser les capacités de manipulation d'objets et de tableaux de JavaScript. Voici une solution étape par étape :

1. Créez un objet pour stocker les valeurs additionnées

Commencez par créer un objet JavaScript vide appelé « titulaire » qui servira de conteneur pour stocker les valeurs additionnées pour chaque « nom ».

2. Parcourez le tableau d'entrée

Utilisez une boucle « forEach » pour parcourir chaque objet du tableau d'entrée (« objets »).

3. Vérifiez les noms existants dans 'holder'

Dans la boucle, vérifiez si la propriété 'name' de l'objet actuel existe déjà en tant que propriété dans l'objet 'holder' en utilisant 'hasOwnProperty(d.name)'.

4. Somme ou initialiser les valeurs

Si la propriété 'name' existe, ajoutez la propriété 'value' de l'objet actuel à la propriété correspondante dans 'holder' (par exemple, 'holder[d.name] = d.value '). Si la propriété 'name' n'est pas trouvée, initialisez-la avec la propriété 'value' de l'objet actuel ('holder[d.name] = d.value').

5. Créez un nouveau tableau avec des objets fusionnés

Une fois toutes les valeurs additionnées, créez un nouveau tableau vide appelé « obj2 » pour stocker les objets fusionnés.

6. Itérer sur 'holder' et pousser les objets fusionnés

Utilisez une autre boucle pour parcourir les propriétés de l'objet 'holder' (« for (var prop inholder) »). Pour chaque propriété, créez un nouvel objet avec les propriétés « nom » et « valeur » et poussez-le dans « obj2 ».

7. Enregistrez la sortie

Enfin, enregistrez le tableau 'obj2' sur la console pour afficher les objets fusionnés avec les propriétés 'valeur' ​​additionnées.

Exemple de code

Voici un extrait de code qui démontre la solution :

const objects = [
  { name: 'P1', value: 150 },
  { name: 'P1', value: 150 },
  { name: 'P2', value: 200 },
  { name: 'P3', value: 450 },
];

const holder = {};

objects.forEach(d => {
  if (holder.hasOwnProperty(d.name)) {
    holder[d.name] += d.value;
  } else {
    holder[d.name] = d.value;
  }
});

const obj2 = [];

for (var prop in holder) {
  obj2.push({ name: prop, value: holder[prop] });
}

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

En suivant ces étapes, vous pouvez efficacement regrouper et additionner les valeurs associées avec des clés similaires dans un tableau d'objets, créant un nouveau tableau avec des objets modifiés selon le résultat souhaité.

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