Comment obtenir des valeurs distinctes d'un tableau d'objets en javascript?

Les tableaux sont fréquemment utilisés pour stocker des données en javascript. Ces tableaux peuvent contenir des objets avec de nombreuses propriétés. Tout en travaillant avec ces types de tableaux, les développeurs sont fréquemment confrontés à une situation où ils doivent extraire des valeurs uniques ou différentes des tableaux. Par exemple, récupérez une liste de toutes les catégories de produits distinctes / uniques, etc.

Ce blog définira les moyens d'obtenir des valeurs distinctes / uniques d'un tableau d'objets en JavaScript.

Comment obtenir des valeurs distinctes / uniques d'un tableau d'objets en JavaScript?

Pour obtenir les valeurs uniques d'un tableau d'objets, utilisez les approches suivantes:

• OBJET "SET" avec la méthode "Map ()".
• Méthode «filter ()» avec la méthode «map ()».

Méthode 1: Obtenez des valeurs distinctes d'un tableau d'objets utilisant l'objet «set» avec la méthode «map ()»

Pour récupérer des valeurs distinctes d'un tableau d'objets, utilisez le «Ensemble"Objet avec le"carte()" méthode. Le «set» permet d'enregistrer des valeurs distinctes de tout type. La méthode «map ()» est utilisée pour créer un nouveau tableau qui contient la sortie en invoquant une fonction de rappel donnée sur chaque élément du tableau d'origine. Il accepte une fonction comme un paramètre qui l'appelle sur chaque élément de tableau, puis publie une nouvelle valeur.

Exemple

Créez un tableau d'objets nommés «studibsetails»:

const StudentDetails = [
id: 1, nom: "Joseph", âge: 15,
id: 2, nom: "Milli", âge: 13,
id: 3, nom: "John", âge: 11,
id: 4, nom: "Mike", âge: 16,
id: 5, nom: "John", âge: 18
]]

Appelez la méthode map () pour créer un nouveau tableau avec uniquement le «nom»Propriété de chaque objet dans le tableau d'origine. Passez-le au constructeur de set qui stockera des valeurs uniques en supprimant toutes les valeurs en double. Ensuite, utilisez l'opérateur de propagation «… ”Pour convertir l'objet SET dans un tableau:

constancestdNames = [… nouvel ensemble (StudentDetails.map (obj => obj.nom))];

Enfin, imprimez le tableau résultant sur la console:

console.log (distinctStDNames);

La sortie indique que le tableau de valeurs de nom distinctes a été récupérée avec succès à partir d'un tableau d'objets:

Méthode 2: Obtenez des valeurs distinctes d'un tableau d'objets en utilisant la méthode «Filter ()» Avec la méthode «map ()»

Une autre approche pour obtenir les valeurs uniques d'un tableau d'objets consiste à utiliser le «filtre()«Méthode avec le«carte()" méthode. La méthode «Filter ()» crée un nouveau tableau avec tous les éléments qui transmettent une condition spécifique, tandis que la méthode «map ()» crée un nouveau tableau avec les résultats de l'invoquer une fonction fournie sur chaque membre du tableau.

Exemple

Invoquez la méthode «filter ()» avec la méthode «map ()» pour récupérer les valeurs uniques du «nom”Propriété des objets:

constancestdNames = StudentDetails.map ((item) => item.nom)
.filtre ((nom, index, currentval) =>
CurrentVal.indexof (nom) === index
));

Enfin, affichez les valeurs uniques sur la console:

console.log (distinctStDNames);

Sortir

Il s'agit d'obtenir des valeurs distinctes / uniques d'un tableau d'objets en JavaScript.

Conclusion

Pour obtenir les valeurs uniques d'un tableau d'objets, utilisez le «Ensemble"Objet avec le"carte()«Méthode ou le«filtre()«Méthode avec le«carte()" méthode. En termes de performances, la première approche «définir» avec la méthode «map ()» est la meilleure. Ce blog a défini les moyens d'obtenir des valeurs uniques d'un tableau d'objets en JavaScript.