Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie erstelle ich in JavaScript ein Array aus der Schnittmenge zweier Arrays?

WBOY
Freigeben: 2023-09-11 17:05:02
nach vorne
897 Leute haben es durchsucht

如何在 JavaScript 中使用两个数组的交集创建数组?

Der Schnittpunkt zweier Arrays in JavaScript kann auf unterschiedliche Weise erfolgen, z. B. mithilfe von Set, Spread-Operator, filter()-Methode oder include()-Methode. Jede Methode hat ihre eigenen Vor- und Nachteile und es ist wichtig zu überlegen, welche Methode für eine bestimmte Aufgabe am besten geeignet ist. Die Schnittmenge zweier Arrays kann hilfreich sein, wenn Sie ein neues Array erstellen möchten, das nur die in beiden Arrays gefundenen Elemente enthält.

Nehmen wir ein Beispiel -

arr1 = [ 2, 5, 7, 9, 11, 13, 15, 17 ]
arr2 = [ 1, 3, 5, 7, 11, 13, 16, 17 ]

intersecArr = [ 5, 6, 11, 13, 17 ]
Nach dem Login kopieren

Oben haben wir zwei Arrays arr1 und arr2 definiert, einschließlich einiger der gleichen Werte, die in den beiden Arrays vorhanden sind. Der Schnittpunkt der beiden Arrays ist antersecArr.

Lassen Sie uns besprechen, wie Sie in JavaScript ein Array aus der Schnittmenge zweier Arrays erstellen.

Methode 1: Verwenden Sie die Methoden filter() und include()

Mit den Methoden filter() und include() können wir eine Schnittmenge für zwei Arrays durchführen. Die Methode filter() akzeptiert eine Funktion als Argument und wendet sie auf jedes Element im Array an. Die Funktion sollte einen booleschen Wert von „true“ oder „false“ zurückgeben, der angibt, ob das Element in das neue Array aufgenommen werden soll. In unserem Fall möchten wir, dass das Element in beiden Eingabearrays vorhanden ist. Daher verwenden wir die Methode Includes(), um zu prüfen, ob das Element im anderen Array vorhanden ist.

Grammatik

Hier ist die Syntax zum Erstellen eines neuen Arrays aus der Schnittmenge zweier Arrays mithilfe der Methoden filter() und include() -

let intersection = arr1.filter(x => arr2.includes(x));
Nach dem Login kopieren
Die Methode

filter() akzeptiert eine Callback-Funktion als Parameter. Diese Rückruffunktion wird auf jedes Element des ersten Arrays (arr1) angewendet und verwendet die Methode Includes(), um zu prüfen, ob das aktuelle Element (x) im zweiten Array (arr2) vorhanden ist. Wenn das aktuelle Element (x) im zweiten Array (arr2) vorhanden ist, wird es in das neue Array (Schnittpunkt) aufgenommen.

Wenn das aktuelle Element (x) im zweiten Array (arr2) nicht vorhanden ist, schließen Sie es aus dem neuen Array (Schnittpunkt) aus. Das Endergebnis ist ein neues Array (die Schnittmenge), das nur die in arr1 und arr2 vorhandenen Elemente enthält.

Beispiel

Im folgenden Beispiel erstellen wir zwei Arrays arr1 und arr2 mit jeweils fünf Elementen, von denen drei gleich sind. Verwenden Sie dann die Filter- und Contain-Methoden, um aus beiden Arrays ein neues Array gemeinsamer Elemente zu erstellen.

<html>
<head>
   <title>Creating an Array using Intersection of two Arrays using Filter() and Includes() methods</title>
</head>
<body>
   <p id="arr1"></p>
   <p id="arr2"></p>
   <p id="result"></p>
   <script>
      let arr1 = [5, 6, 8, 11, 15];
      let arr2 = [3, 5, 8, 11, 17];
            
      document.getElementById("arr1").innerHTML = "Array 1: " + JSON.stringify(arr1);
      document.getElementById("arr2").innerHTML = "Array 1: " + JSON.stringify(arr2);
            
      const intersection = arr1.filter(x => arr2.includes(x));

      document.getElementById("result").innerHTML = "Intersection of Array1 & Array 2: " + JSON.stringify(intersection);
   </script>
</body>
</html>
Nach dem Login kopieren

Der obige Code erstellt ein neues Array namens „intersectionArray“, das nur Elemente enthält, die in beiden Eingabearrays vorhanden sind.

Methode 2

Bei dieser Methode erstellen wir zunächst ein neues Sammlungsobjekt aus den Elementen von arr1. Es entfernt alle doppelten Elemente. Verwenden Sie dann den Spread-Operator, um das Sammlungsobjekt in ein Array umzuwandeln. Das Array enthält keine doppelten Elemente. Jetzt verwenden wir die Methoden filter() und include(), um eine Schnittmenge durchzuführen. Der weitere Ablauf ist derselbe wie bei der ersten Methode.

let intersection = [...new Set(arr1)].filter(x => arr2.includes(x));
Nach dem Login kopieren

Die obige Syntax erstellt ein neues Array „Schnittpunkt“. Nachdem alle Duplikate aus arr1 entfernt wurden, enthält es Elemente, die in arr1 und arr2 vorhanden sind.

Beispiel



   Creating an Array using Intersection of two Arrays using Spread Operator and Filter() method


   

<script> let arr1 = [4, 8, 12, 16, 20, 28]; let arr2 = [8, 16, 20, 24, 28, 30]; document.getElementById("arr1").innerHTML = "Array 1: " + JSON.stringify(arr1); document.getElementById("arr2").innerHTML = "Array 1: " + JSON.stringify(arr2); let intersection = [...new Set(arr1)].filter(x =&gt; arr2.includes(x)); document.getElementById("result").innerHTML = "Intersection of Array1 & Array 2: " + JSON.stringify(intersection); </script>
Nach dem Login kopieren

Methode 3: Set verwenden

Bei dieser Methode konvertieren wir zunächst das Array mit dem neuen Set()-Konstruktor in eine Menge. Verwenden Sie dann eine for...of-Schleife, um die Elemente des zweiten Satzes zu durchlaufen. Verwenden Sie dann die Methode has(), um zu überprüfen, ob sich das Element im ersten Set befindet. Wenn das Element im ersten Set vorhanden ist, verwenden Sie die Methode push(), um das Element zum Schnittpunktarray hinzuzufügen.

Beispiel

<html>
<head>
   <title>Creating an Array using Intersection of two Arrays using Set</title>
</head>
<body>
   <p id="arr1"></p>
   <p id="arr2"></p>
   <p id="result"></p>
   <script>
      function doIntersection(arr1, arr2) {
         const setFirst = new Set(arr1);
         const setSecond = new Set(arr2);
         let intersection = [];
         for (let i of setSecond) {
            if (setFirst.has(i)) {
               intersection.push(i);
            }
         }
         return intersection;
      }

      const arrFirst = [4, 6, 8, 10, 12];
      const arrSecond = [4, 5, 8, 12, 15];

      document.getElementById("arr1").innerHTML = "Array 1: " + JSON.stringify(arrFirst);
      document.getElementById("arr2").innerHTML = "Array 1: " + JSON.stringify(arrSecond);

      const interResult = doIntersection(arrFirst, arrSecond);

      document.getElementById("result").innerHTML = "Intersection of Array1 & Array 2: " + JSON.stringify(interResult);
   </script>
</body>
</html>
Nach dem Login kopieren

In diesem Tutorial haben wir anhand von Beispielen drei Möglichkeiten zum Erstellen eines Arrays anhand der Schnittmenge zweier Arrays besprochen. In der ersten Methode verwenden wir die Methoden filter() und include(), während wir in der zweiten Methode zusätzlich zu filter und include auch den Spread-Operator und Set verwenden. Im dritten Ansatz erstellen wir eine benutzerdefinierte Funktion, um diese Aufgabe auszuführen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in JavaScript ein Array aus der Schnittmenge zweier 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!