Maison >interface Web >js tutoriel >Comment créer un tableau à partir de l'intersection de deux tableaux en JavaScript ?

Comment créer un tableau à partir de l'intersection de deux tableaux en JavaScript ?

WBOYavant: 2023-09-11 17:05:02950parcourir

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

L'intersection de deux tableaux en JavaScript peut être effectuée de différentes manières, par exemple en utilisant Set, l'opérateur spread, la méthode filter() ou la méthode include(). Chaque méthode a ses propres avantages et inconvénients, et il est important de déterminer quelle méthode est la meilleure pour une tâche donnée. L'intersection de deux tableaux peut être utile si vous souhaitez créer un nouveau tableau contenant uniquement les éléments trouvés dans les deux tableaux.

Prenons un exemple -

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

intersecArr = [ 5, 6, 11, 13, 17 ]

Ci-dessus, nous avons défini deux tableaux arr1 et arr2, comprenant certaines des mêmes valeurs qui existent dans les deux tableaux. L'intersection des deux tableaux est antersecArr.

Voyons comment créer un tableau à partir de l'intersection de deux tableaux en JavaScript.

Méthode 1 : utilisez les méthodes filter() et include()

Nous pouvons effectuer une intersection sur deux tableaux en utilisant les méthodes filter() et include(). La méthode filter() accepte une fonction comme argument et l'applique à chaque élément du tableau. La fonction doit renvoyer une valeur booléenne vraie ou fausse indiquant si l'élément doit être inclus dans le nouveau tableau. Dans notre cas, nous voulons que l'élément soit présent dans les deux tableaux d'entrée, nous utiliserons donc la méthode include() pour vérifier si l'élément est présent dans l'autre tableau.

Grammaire

Voici la syntaxe pour créer un nouveau tableau à partir de l'intersection de deux tableaux en utilisant les méthodes filter() et include() -

let intersection = arr1.filter(x => arr2.includes(x));

La méthode

filter() accepte une fonction de rappel comme paramètre. Cette fonction de rappel est appliquée à chaque élément du premier tableau (arr1) et utilise la méthode include() pour vérifier si l'élément actuel (x) est présent dans le deuxième tableau (arr2). Si l'élément actuel (x) existe dans le deuxième tableau (arr2), il est inclus dans le nouveau tableau (intersection).

Si l'élément actuel (x) n'existe pas dans le deuxième tableau (arr2), excluez-le du nouveau tableau (intersection). Le résultat final est un nouveau tableau (l'intersection) contenant uniquement les éléments présents dans arr1 et arr2.

Exemple

Dans l'exemple ci-dessous, nous créons deux tableaux arr1 et arr2, chacun avec cinq éléments, dont trois identiques. Utilisez ensuite les méthodes filter et contain pour créer un nouveau tableau d’éléments communs à partir des deux tableaux.

<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>

Le code ci-dessus créera un nouveau tableau, intersectionArray, qui contient uniquement les éléments présents dans les deux tableaux d'entrée.

Méthode 2

Dans cette méthode, nous créons d'abord un nouvel objet de collection à partir des éléments de arr1. Il supprime tous les éléments en double. Utilisez ensuite l'opérateur spread pour convertir l'objet de collection en tableau. Le tableau ne contient aucun élément en double. Nous utilisons maintenant les méthodes filter() et include() pour effectuer une intersection. La suite du processus est la même que la première méthode.

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

La syntaxe ci-dessus crée un nouveau tableau "intersection". Après avoir supprimé tous les doublons de arr1, il contient des éléments présents dans arr1 et arr2.

Exemple



   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>

Méthode 3 : Utiliser Set

Dans cette méthode, nous convertissons d'abord le tableau en un ensemble à l'aide du nouveau constructeur Set(). Utilisez ensuite une boucle for...of pour parcourir les éléments du deuxième ensemble. Utilisez ensuite la méthode has() pour vérifier si l’élément est dans le premier Set. Si l'élément existe dans le premier Set, utilisez la méthode push() pour ajouter l'élément au tableau d'intersection.

Exemple

<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>

Dans ce tutoriel, nous avons abordé trois façons de créer un tableau en utilisant l'intersection de deux tableaux à l'aide d'exemples. Dans la première méthode, nous utilisons les méthodes filter() et include(), tandis que dans la deuxième méthode, en plus de filter et include, nous utilisons également l'opérateur spread et Set. Dans la troisième approche, nous créons une fonction personnalisée pour effectuer cette tâche.

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 运算符 for 构造函数 include Filter 回调函数循环对象

Déclaration：

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

Article précédent：Comment centrer verticalement un objet Image sur la fenêtre actuelle du canevas à l'aide de FabricJS ?Article suivant：Comment centrer verticalement un objet Image sur la fenêtre actuelle du canevas à l'aide de FabricJS ?

Articles Liés

Voir plus