Heim > Web-Frontend > js-Tutorial > Hauptteil

Extrahieren Sie in JavaScript eindeutige Objekte aus einem Array von Objekten nach Eigenschaften

PHPz
Freigeben: 2023-08-29 15:33:12
nach vorne
947 Leute haben es durchsucht

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

In diesem Tutorial lernen wir, einzigartige Objekte anhand ihrer Eigenschaften aus einem Array von Objekten zu extrahieren. Manchmal müssen wir Objekte aus einem Array von Objekten basierend auf bestimmten Eigenschaften filtern.

Zum Beispiel haben wir eine ID als Schlüssel, der das Objekt identifiziert. Daher müssen wir sicherstellen, dass das Array nur ein einzelnes Objekt mit einer einzigen ID enthält. Wenn zwei oder mehr Objekte denselben Primärschlüsselwert enthalten, kann dies zu Problemen bei der eindeutigen Identifizierung des Objekts führen.

Hier lernen wir verschiedene Möglichkeiten kennen, alle eindeutigen Objekte aus einem Array basierend auf bestimmten Eigenschaften zu filtern.

Verwenden Sie Karten und For-Schleifen

In JavaScript kann Map eindeutige Schlüssel-Wert-Paare speichern. Darüber hinaus können wir jeden Wert aus der Karte erhalten, indem wir die Schlüssel der Karte in der Zeitkomplexität O(1) verwenden. Wir durchlaufen also das Array von Objekten und speichern die Schlüssel-Wert-Paare in einer Map. Darüber hinaus prüfen wir, ob die Karte ein Objekt mit einem bestimmten Eigenschaftswert enthält. Wir werden das Objekt nicht zum Array neuer Objekte hinzufügen.

Grammatik

Sie können mithilfe von Map gemäß der folgenden Syntax eindeutige Objekte aus einem Array extrahieren.

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];
Nach dem Login kopieren

In der obigen Syntax verwenden wir Mapping, um Objekte mit einer eindeutigen emp_id zu speichern.

Algorithmus

  • Schritt 1 – Erstellen Sie ein Array von Objekten, das mehrere Objekte mit doppelter emp_id enthält.

  • Schritt 2 – Erstellen Sie ein Map()-Objekt mit dem Map-Konstruktor.

  • Schritt 3 – Verwenden Sie eine for-of-Schleife, um jedes Objekt des Arrays „employees“ zu durchlaufen.

  • Schritt 4 – Verwenden Sie für die Karte emp_id als Schlüssel und das gesamte Objekt als Wert. Verwenden Sie innerhalb einer for-of-Schleife die set()-Methode des Map-Objekts, um das Objekt auf den Wert des emp_id-Schlüssels zu setzen.

  • Schritt 5 – Die Karte ist ein Iterator. Um alle Werte des Iterators zu erhalten, wenden Sie die Methode „values()“ an.

  • Schritt 6 – Kopieren Sie alle Objekte aus iteratorValues ​​​​mit dem Spread-Operator in das Array uniqueEmployees.

  • Schritt 7 – Das Array „uniqueEmployees“ enthält alle Objekte mit einer eindeutigen emp_id. Der Benutzer kann darüber iterieren, um Objektwerte zu erhalten.

Beispiel

Im folgenden Beispiel haben wir den Algorithmus zum Extrahieren eindeutiger Objekte nach Attributen mithilfe von Map und for-of-Schleife implementiert. Wir haben ein Array von Mitarbeitern erstellt, das vier verschiedene Objekte mit doppelten emp_id-Werten enthält, und verwenden den obigen Algorithmus, um alle eindeutigen Objekte zu extrahieren.

<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>
Nach dem Login kopieren

Verwenden Sie die Methode array.filter() und Map

Wir können die Methode filter() verwenden, um die Werte im Array zu filtern. Es verwendet eine Rückruffunktion als Parameter und filtert die Werte basierend auf dem von der Rückruffunktion zurückgegebenen booleschen Wert.

Ähnlich wie im obigen Beispiel verwenden wir eine Karte, um den Attributwert zu speichern und prüfen, ob die Karte den Wert bereits enthält. Wenn ja, machen wir weiter; andernfalls fügen wir die Werte zu den Karten- und Filterarrays hinzu.

Grammatik

Benutzer können alle Objekte mit eindeutigen Attributwerten filtern, indem sie der folgenden Syntax folgen.

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;
});
Nach dem Login kopieren

Algorithmus

  • Schritt 1 – Erstellen Sie eine Karte mit einem Map()-Objekt.

  • Schritt 2 – Filtern Sie Werte aus dem Array mit der Methode filter().

  • Schritt 3 – Übergeben Sie die Callback-Funktion als Argument an die Filtermethode, die das Netzwerk als Parameter verwendet. Das Netzwerk ist ein Objekt im Referenzarray.

  • Schritt 4 – Überprüfen Sie, ob die Karte bereits website_name als Schlüssel enthält, und fahren Sie fort, indem Sie von der Callback-Funktion false zurückgeben.

  • Schritt 5 – Wenn die Karte Website-Name nicht enthält, fügen Sie Website-Name und das Objekt als Schlüssel-Wert-Paare zur Karte hinzu und geben „true“ zurück, um es im Array „uniqueObjects“ herauszufiltern.

Beispiel

In diesem Beispiel verwenden wir die Methode filter(), um alle Website-Objekte nach Website-Name aus dem Array zu filtern. In der Ausgabe kann der Benutzer beobachten, dass die Methode filter() nur zwei Objekte zurückgibt, die eindeutige Website-Namen enthalten.

<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>
Nach dem Login kopieren

Dieses Tutorial zeigt uns zwei Methoden zum Extrahieren eindeutiger Objekte anhand spezifischer Attributwerte. Wir verwenden in beiden Methoden eine Karte, verwenden jedoch unterschiedliche Iteratormethoden, um über das Array von Objekten zu iterieren. Benutzer können das Array mithilfe einer for-of-Schleife oder der filter()-Methode durchlaufen.

Das obige ist der detaillierte Inhalt vonExtrahieren Sie in JavaScript eindeutige Objekte aus einem Array von Objekten nach Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!