Grouper un tableau d'objets en javascript

Parfois, les développeurs doivent organiser un tableau d'objets en fonction d'une clé ou d'une valeur de propriété particulière. JavaScript propose des méthodes et des bibliothèques prédéfinies pour ce faire, y compris le «réduire()«Méthode ou le«par groupe()»Méthode de la bibliothèque Lodash.

Ce tutoriel démontrera des méthodes pour regrouper des objets JavaScript dans un tableau.

Comment regrouper une gamme d'objets en javascript?

Pour regrouper un tableau d'objets en JavaScript, utilisez les méthodes suivantes:

• Méthode réduir ()
• Méthode groupby () de la bibliothèque Lodash

Comprenons le fonctionnement de ces méthodes un par un.

Méthode 1: regrouper un tableau d'objets en utilisant la méthode Reduce ()

La méthode la plus couramment utilisée pour regrouper le tableau d'objets est le «réduire()" méthode. Il est invoqué avec la fonction de rappel. Il réduit le tableau d'objets groupés par type spécifié. La méthode réduction () est puissante mais un peu complexe à comprendre.

Syntaxe

Utilisez la syntaxe suivante pour la méthode Reduce () pour regrouper un tableau d'objets:

Réduire (précédent Value, CurrentValue)

Valeur de retour

Il renvoie la somme de tous les éléments groupés dans un tableau.

Exemple

Créer un tableau d'objets "déployer”Avec des propriétés, des noms et des catégories:

const Array = [
nom: "Apple", catégorie: "fruits",
nom: "orange", catégorie: "couleurs",
nom: "mangue", catégorie: "fruits",
Name: "Peach", catégorie: "Couleurs",
nom: "orange", catégorie: "fruits",
nom: "Grapes", catégorie: "fruits",
]]

Appeler le "réduire()«Méthode avec la fonction de flèche de rappel qui regroupera les objets en fonction de la clé« catégorie »et les stockera dans une variable«groupArrayObject»:

const GroupArrayObject = Array.réduire ((groupe, arr) =>
const catégorie = arr;
groupe [catégorie] = groupe [catégorie] ?? [];
groupe [catégorie].push (arr);
groupe de retour;
,
);

Imprimez le tableau qui en résulte sur la console en utilisant le «console.enregistrer()" méthode:

console.log (groupArrayObject);

Sortir

À partir de la sortie ci-dessus, le réseau résultant a deux tableaux minimisés «Couleurs" et "Des fruits". Cliquez simplement sur la tête du tableau à côté du nom du tableau minimisée pour l'agrandir:

Maintenant, la sortie montre deux objets, "Couleurs" et "Des fruits,«Qui contiennent respectivement 2 et 4 tableaux.

Méthode 2: regrouper un tableau d'objets utilisant la méthode groupby ()

Une autre méthode pour regrouper un tableau d'objets est le «par groupe()" méthode. La méthode GroupBy () sera utilisée dans le projet NPM avec le «loger" bibliothèque. Il est plus simple à comprendre et prend moins de lignes de code.

Syntaxe

Suivez la syntaxe mentionnée ci-dessous pour la méthode groupby () pour regrouper le tableau d'objets en javascript:

_.Groupby (liste, clé)

Dans la syntaxe ci-dessus,

• Le "liste«Est un tableau d'objets.
• Le "clé»Est la propriété des objets par lesquels les éléments seront regroupés.

Valeur de retour

Il renvoie les multiples collections groupées par une clé donnée.

Exemple

Utilisez les commandes suivantes pour inclure la bibliothèque Lodash dans votre projet NPM:

$ npm i -g npm
$ npm I - Save Lodash

Ensuite, ajoutez la bibliothèque Lodash dans le fichier JavaScript avec la ligne suivante:

var _ = require ("lodash");

Après cela, utilisez simplement les lignes de code suivantes:

const Array = [
nom: "Apple", catégorie: "fruits",
nom: "orange", catégorie: "couleurs",
nom: "mangue", catégorie: "fruits",
Name: "Peach", catégorie: "Couleurs",
nom: "orange", catégorie: "fruits",
nom: "Grapes", catégorie: "fruits",
]]
Laissez la sortie = _.GroupBy (Array, "catégorie");
console.journal (sortie);

Dans cet extrait de code:

• Créez un tableau d'objets appelés «tableau».
• Appeler le "par groupe()"Méthode en passant un tableau d'objets"déployer"Et une clé"catégorie«Dans ce document, qui regroupe tous les éléments liés aux catégories.

Exécutez le code ci-dessus et la sortie sera:

On peut facilement observer que les objets ont maintenant été regroupés en fonction de la valeur de leur «catégorie».

Conclusion

Pour le regroupement, un tableau d'objets en JavaScript, utilisez le «réduire()«Méthode ou le«par groupe()" méthode. La méthode Reduce () est la méthode la plus couramment utilisée pour regrouper un tableau d'objets, tandis que la méthode groupby () nécessite moins de code et est plus facile à comprendre, mais elle s'exécutera dans le projet NPM avec la bibliothèque Lodash. Ce tutoriel a démontré les méthodes pour regrouper les objets JavaScript dans un tableau.