Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie berechnet man die Vereinigung von JavaScript-Arrays?

王林
Freigeben: 2023-09-10 18:49:09
nach vorne
1131 Leute haben es durchsucht

如何计算 JavaScript 数组的并集?

Wir können die Vereinigung zweier Arrays erhalten, indem wir die beiden Arrays zusammenführen und doppelte Elemente entfernen. Die Vereinigung ergibt die eindeutigen Elemente in beiden Arrays.

In diesem Tutorial lernen wir, die Vereinigung von JavaScript-Arrays mit verschiedenen Methoden zu berechnen.

Verwenden Sie die Datenstruktur set()

Die erste Methode besteht darin, die Datenstruktur set() zu verwenden. Sammlungsdatenstrukturen können nur eindeutige Elemente enthalten. Wir können alle Elemente beider Arrays zur Menge hinzufügen und aus den Elementen der Menge ein neues Array erstellen, um die Vereinigung zu erstellen.

Grammatik

Benutzer können die festgelegte Datenstruktur verwenden, um die Vereinigung von JavaScript-Arrays gemäß der folgenden Syntax zu berechnen.

let union = [...new Set([...array1, ...array2])];
Nach dem Login kopieren

In der obigen Syntax verwenden wir den Spread-Operator, um zwei Arrays zu verketten und aus dem resultierenden Array eine neue Sammlung zu erstellen. Danach verwenden wir erneut den Spread-Operator, um die Elemente der Sammlung zum Array hinzuzufügen.

Beispiel 1

Im folgenden Beispiel enthalten Array1 und Array2 einige gemeinsame Zahlen. Zuerst verbinden wir Array1 und Array2 mithilfe des Spread-Operators. Danach erstellen wir mit dem neuen Set()-Konstruktor eine Menge aus dem resultierenden Array. Das Set kann nur eindeutige Elemente enthalten. Daher enthält es alle Elemente in der Vereinigung der beiden Arrays.

Danach verwenden wir den Spread-Operator, um alle Elemente der Sammlung zum assoziativen Array hinzuzufügen. In der Ausgabe kann der Benutzer die Vereinigung der beiden Arrays beobachten.

<html>
<body>
   <h3> Using the <i> set() </i> data structure to compute the union of two arrays in JavaScript </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      
      // using the set() to compute union
      let array1 = [1, 2, 3, 4, 5];
      let array2 = [4, 5, 6, 7, 8];
      let union = [...new Set([...array1, ...array2])];
      output.innerHTML = "The first array is " + array1 + "<br>";
      output.innerHTML += "The second array is " + array2 + "<br>";
      output.innerHTML += "The union of the two arrays is " + union + "<br>";
   </script>
</body>
</html>
Nach dem Login kopieren

Berechnen Sie die Vereinigung von JavaScript-Arrays mithilfe von Objekten

In dieser Methode können wir Array-Werte als Objekteigenschaften hinzufügen. Das Objekt enthält immer eindeutige Schlüssel. Wir können also das Array-Element als Schlüssel des Objekts und einen beliebigen Wert für diesen bestimmten Schlüssel verwenden. Danach können wir alle Objektschlüssel abrufen, um die Vereinigung der Arrays zu erhalten.

Grammatik

Benutzer können Objekte verwenden, um die Vereinigung von Arrays gemäß der folgenden Syntax zu berechnen.

for () {
   union[names1[i]] = 1;
}
for (let key in the union) {
   finalArray.push(key);
}
Nach dem Login kopieren

In der obigen Syntax übertragen wir zunächst alle Array-Elemente als Schlüssel des Objekts. Danach holen wir uns die Schlüssel vom Objekt und fügen sie dem Array hinzu.

Beispiel 2

Im folgenden Beispiel haben wir zwei Arrays mit den Namen Namen1 und Namen2. Wir fügen das erste Array-Element als Schlüssel des Objekts hinzu. Danach fügen wir die Elemente des zweiten Arrays als Schlüssel zum Objekt hinzu.

Als nächstes durchlaufen wir das Objekt, holen uns den Schlüssel des Objekts und schieben ihn in das FinalArray. FinalArray enthält die Vereinigung der Arrays Name1 und Name2.

<html>
<body>
   <h3> Using the <i> object </i> to compute the union of two arrays in JavaScript </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      
      // using the object to compute the union of two arrays
      let names1 = ["John", "Peter", "Sally", "Jane", "Mark"];
      let names2 = ["Peter", "Sally", "Greg"];
      let union = {};
      
      //Add all the elements of the first array to the object
      for (let i = 0; i < names1.length; i++) {
         union[names1[i]] = 1;
      }
      for (let i = 0; i < names2.length; i++) {
         union[names2[i]] = 1;
      }
      
      //Convert the object to an array
      let finalArray = [];
      for (let key in union) {
         finalArray.push(key);
      }
      output.innerHTML = "First array: " + JSON.stringify(names1) + "<br>";
      output.innerHTML += "Second array: " + JSON.stringify(names2) + "<br>";
      output.innerHTML += "The union of the two arrays: " + JSON.stringify(finalArray) + "<br>";
   </script>
</body>
</html>
Nach dem Login kopieren

Verwenden Sie die Methoden Filter() und Concat()

Die Methode

concat() wird verwendet, um zwei oder mehr Arrays zusammenzuführen. Mit der Methode filter() können wir zwei Arrays zusammenführen und die eindeutigen Elemente filtern. Auf diese Weise können wir die Methoden concat() und filter() verwenden, um die Vereinigung von Arrays zu berechnen.

Grammatik

Benutzer können die Methoden filter() und concat() verwenden, um die Vereinigung von Arrays gemäß der folgenden Syntax zu berechnen.

let cities = cities1.concat(cities2);
cities.sort();
let unionCities = cities.filter((value, index) => cities.indexOf(value) === index);
Nach dem Login kopieren

In der obigen Syntax führen wir zunächst die beiden Arrays zusammen, sortieren sie und filtern dann die eindeutigen Elemente mithilfe der Methode filter().

Beispiel 3

Im folgenden Beispiel enthalten die Arrays city1 und citites2 einige Städtenamen, von denen einige häufig vorkommen. Das Städte-Array enthält die Array-Elemente beider Arrays.

Danach verwenden wir die Methode sort(), um das Städte-Array zu sortieren. Als Nächstes verwenden wir die Methode filter(), um eindeutige Werte aus dem Cities-Array zu filtern. In der Methode filter() übergeben wir die Callback-Funktion als Parameter, die prüft, ob der Index der aktuellen Stadt mit dem aktuellen Index übereinstimmt, um doppelte Elemente zu entfernen.

<html>
<body>
   <h3> Using the <i> filter() and concat() methods </i> to compute the union of two arrays in JavaScript </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let cities1 = ["Surat", "Ahmedabad", "Rajkot", "Vadodara", "Pune"];
      let cities2 = ["Mumbai", "Pune", "Nagpur", "Nashik", "Rajkot"];
      let cities = cities1.concat(cities2);
      cities.sort();
      
      // filter unique values in the array
      let unionCities = cities.filter((value, index) => cities.indexOf(value) === index);
      output.innerHTML = "First array: " + JSON.stringify(cities1) + "<br>";
      output.innerHTML += "Second array: " + JSON.stringify(cities2) + "<br>";
      output.innerHTML += "The union of the two arrays: " + JSON.stringify(unionCities) + "<br>";
   </script>
</body>
</html>
Nach dem Login kopieren

Fazit

Der Benutzer hat drei verschiedene Methoden zur Berechnung der Vereinigung von Arrays in JavaScript kennengelernt. Der erste Ansatz erfordert linearen Code unter Verwendung einer Sammlungsdatenstruktur. Die zweite Methode verwendet Objekte und die dritte Methode verwendet die Methoden filter() und concat().

Das obige ist der detaillierte Inhalt vonWie berechnet man die Vereinigung von JavaScript-Arrays?. 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!