Maison > Article > interface Web > Extraire des objets uniques d'un tableau d'objets par propriété en JavaScript

Extraire des objets uniques d'un tableau d'objets par propriété en JavaScript

PHPzavant: 2023-08-29 15:33:12970parcourir

在 JavaScript 中按属性从对象数组中提取唯一对象

Dans ce tutoriel, nous apprendrons à extraire des objets uniques d'un tableau d'objets par propriétés. Parfois, nous devons filtrer des objets à partir d'un tableau d'objets en fonction de propriétés spécifiques.

Par exemple, nous avons un identifiant comme clé qui identifie un objet. Par conséquent, nous devons nous assurer que le tableau ne contient qu’un seul objet avec un seul identifiant. Si deux objets ou plus contiennent la même valeur de clé primaire, cela peut entraîner des problèmes d'identification unique des objets.

Ici, nous allons apprendre différentes façons de filtrer tous les objets uniques d'un tableau en fonction de propriétés spécifiques.

Utilisez des cartes et des boucles

En JavaScript, Map peut stocker des paires clé-valeur uniques. De plus, nous pouvons obtenir n'importe quelle valeur de la carte en utilisant les clés de la carte en complexité temporelle O(1). Nous allons donc parcourir le tableau d’objets et stocker les paires clé-valeur dans une carte. De plus, nous vérifierons si la Map contient un objet avec une valeur de propriété spécifique ; nous n'ajouterons pas l'objet au tableau de nouveaux objets.

Grammaire

Vous pouvez extraire des objets uniques d'un tableau à l'aide de la carte selon la syntaxe ci-dessous.

const employees = [
   { emp_id: 1, emp_name: "Shubham", emp_age: 22 },
   { emp_id: 1, emp_name: "Joe", emp_age: 23 },
];     
var map = new Map();
for (let employee of employees) {
   map.set(employee["emp_id"], employee);
}
var iteratorValues = map.values();
var uniqueEmployess = [...iteratorValues];

Dans la syntaxe ci-dessus, nous utilisons le mappage pour stocker des objets avec un emp_id unique.

Algorithme

Étape 1 - Créez un tableau d'objets contenant plusieurs objets avec emp_id en double.
Étape 2 - Créez un objet Map() à l'aide du constructeur Map.
Étape 3 - Utilisez une boucle for-of pour parcourir chaque objet du tableau "employés".
Étape 4 - Pour la carte, utilisez emp_id comme clé et l'objet entier comme valeur. Dans une boucle for-of, utilisez la méthode set() de l'objet Map pour définir l'objet sur la valeur de la clé emp_id.
Étape 5 - La carte est un itérateur. Donc, pour obtenir toutes les valeurs de l'itérateur, appliquez la méthode values().
Étape 6 - Copiez tous les objets de iteratorValues dans le tableau uniqueEmployees à l'aide de l'opérateur spread.
Étape 7 - Le tableau uniqueEmployees contient tous les objets avec un emp_id unique, l'utilisateur peut le parcourir pour obtenir les valeurs des objets.

Exemple

Dans l'exemple ci-dessous, nous avons implémenté l'algorithme d'extraction d'objets uniques par attributs à l'aide de Map et de la boucle for-of. Nous avons créé un tableau d'employés contenant quatre objets différents avec des valeurs emp_id en double et nous utilisons l'algorithme ci-dessus pour extraire tous les objets uniques.

<html>
<body>
   <h3>Extracting the unique objects by the emp_id attribute of an array of objects using the <i> Map and for-loop. </i></h3>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      // creating the array of employees, which contains multiple objects.
      const employees = [
         { emp_id: 1, emp_name: "Shubham", emp_age: 22 },
         { emp_id: 2, emp_name: "Joe", emp_age: 23 },
         { emp_id: 2, emp_name: "Sam", emp_age: 62 },
      ];
      var map = new Map();
      for (let employee of employees) {
         // setting up the employee object for unique emp_id value
         map.set(employee["emp_id"], employee);
      }
      var iteratorValues = map.values();
      var uniqueEmployess = [...iteratorValues];
      for (let uniqueEmp of uniqueEmployess) {
         output.innerHTML += "The new unique object values is </br>";
         output.innerHTML +=  "emp_id :- " + uniqueEmp.emp_id +
            ", emp_name :-  " + uniqueEmp.emp_name +
            ", emp_age :- " + uniqueEmp.emp_age +" </br> ";
      }
   </script>
</body>
</html>

Utilisez la méthode array.filter() et Map

Nous pouvons utiliser la méthode filter() pour filtrer les valeurs du tableau. Il prend une fonction de rappel comme paramètre et filtre les valeurs en fonction de la valeur booléenne renvoyée par la fonction de rappel.

Semblable à l'exemple ci-dessus, nous utiliserons une carte pour stocker la valeur de l'attribut et vérifierons si la carte contient déjà la valeur. Si tel est le cas, nous passons à autre chose ; sinon, nous ajoutons les valeurs aux tableaux de carte et de filtrage.

Grammaire

Les utilisateurs peuvent filtrer tous les objets avec des valeurs d'attribut uniques en suivant la syntaxe suivante.

var map = new Map();
let uniqueObjects = websites.filter((web) => {
   if (map.get(web.website_name)) {
      return false;
   }
   map.set(web.website_name, web);
   return true;
});

Algorithme

Étape 1 - Créez une carte à l'aide d'un objet Map().
Étape 2 - Utilisez la méthode filter() pour filtrer les valeurs du tableau.
Étape 3 - Passez la fonction de rappel en argument à la méthode de filtrage qui prend le réseau en paramètre. Le réseau est un objet dans le tableau de référence.
Étape 4 - Vérifiez si la carte contient déjà website_name comme clé et continuez en renvoyant false à partir de la fonction de rappel.
Étape 5 - Si la carte ne contient pas website_name, ajoutez website_name et l'objet en tant que paires clé-valeur à la carte et renvoyez true pour le filtrer dans le tableau uniqueObjects.

Exemple

Dans cet exemple, nous utilisons la méthode filter() pour filtrer tous les objets du site Web par nom_site Web à partir du tableau. Dans le résultat, l'utilisateur peut observer que la méthode filter() ne renvoie que deux objets contenant des noms de site Web uniques.

<html>
<body>
   <h3>Extracting the unique objects by the website_name attribute of an array of objects using the <i> Map and filter() method. </i></h3>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
         //creating the array of websites object. A single website can have multiple domains
      const websites = [
         { website_name: "TutorialsPoint", domain: "tutorialspoint.com" },
         { website_name: "TutorialsPoint", domain: "qries.com" },
         { website_name: "Tutorix", domain: "tutorix.com" },
      ];
      var map = new Map();
      let uniqueObjects = websites.filter((web) => {
         if (map.get(web.website_name)) {
            return false;
         }
         // If website_name is not found in the map, return true.
         map.set(web.website_name, web);
         return true;
      });
      // iterating through the unique objects and printing its value
      for (let web of uniqueObjects) {
         output.innerHTML += "The new unique object values is </br>";
         output.innerHTML += "website_name :- " + web.website_name +
            ", domain :-  " +  web.domain +  " </br> ";
     }
   </script>
</body>
</html>

Ce tutoriel nous apprend deux méthodes pour extraire des objets uniques par valeurs d'attributs spécifiques. Nous utilisons une carte dans les deux méthodes, mais en utilisant différentes méthodes d'itérateur pour parcourir le tableau d'objets. Les utilisateurs peuvent utiliser la méthode for-of loop ou filter() pour parcourir le tableau.

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!

JavaScript Array 运算符 for 构造函数 Filter 回调函数循环 map 对象算法

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Backbone.js alimente les applications ToDo d'une seule pageArticle suivant：Backbone.js alimente les applications ToDo d'une seule page

Articles Liés

Voir plus