如何在 JavaScript 中使用兩個陣列的交集來建立陣列？-js教程-PHP中文網

方法一：使用filter()和includes()方法

文法

範例

方法2

方法 3：使用 Set

首頁

web前端

js教程

如何在 JavaScript 中使用兩個陣列的交集來建立陣列？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 11, 2023 pm 05:05 PM

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

JavaScript 中兩個陣列的交集可以透過不同的方式完成，例如使用 Set、展開運算子、filter() 方法或includes() 方法。每種方法都有其自身的優點和缺點，重要的是要考慮哪種方法最適合給定的任務。如果您想要建立一個僅包含兩個數組中找到的元素的新數組，則兩個數組的交集會很有幫助。

讓我們舉個例子 -

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

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

登入後複製

上面我們定義了兩個陣列arr1和arr2，包括兩個陣列中存在的一些相同的值。兩個陣列的交集是 antersecArr。

讓我們討論一下在 JavaScript 中使用兩個陣列的交集來建立陣列的方法。

方法一：使用filter()和includes()方法

我們可以使用filter()和includes()方法對兩個陣列執行交集。 filter() 方法接受一個函數作為其參數，並將其應用於陣列中的每個元素。該函數應傳回布林值 true 或 false，指示該元素是否應包含在新數組中。在我們的範例中，我們希望元素都存在於兩個輸入陣列中，因此我們將使用includes()方法來檢查該元素是否存在於另一個陣列中。

文法

以下是使用 filter() 和 include() 方法透過兩個陣列的交集來建立新陣列的語法 -

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

登入後複製

filter() 方法接受回呼函數作為其參數。此回呼函數應用於第一個陣列 (arr1) 的每個元素，並使用includes() 方法檢查目前元素 (x) 是否存在於第二個陣列 (arr2) 中。如果目前元素 (x) 存在於第二個陣列 (arr2) 中，則它會包含在新陣列（交集）中。

如果目前元素 (x) 不存在於第二個陣列 (arr2) 中，則將其從新陣列（交集）中排除。最終結果是一個新數組（交集），僅包含 arr1 和 arr2 中存在的元素。

範例

在下面的範例中，我們建立兩個陣列 arr1 和 arr2，每個陣列都有五個元素，其中三個元素相同。然後使用篩選器和包含方法建立兩個陣列中公共元素的新陣列。

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

登入後複製

上面的程式碼將建立一個新數組，intersectionArray，它只包含兩個輸入數組中都存在的元素。

方法2

在這個方法中，我們首先從 arr1 的元素建立一個新的集合物件。它刪除任何重複的元素。然後使用擴充運算子將集合物件轉換為陣列。該數組沒有重複元素。現在我們使用filter()和include()方法來執行交集。進一步的過程與第一種方法相同。

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

登入後複製

上面的語法建立了一個新的陣列「intersection」。從 arr1 中刪除所有重複項後，它包含 arr1 和 arr2 中存在的元素。

範例



   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>

登入後複製

方法 3：使用 Set

在這個方法中，首先，我們使用 new Set() 建構子將陣列轉換為集合。然後使用 for...of 迴圈迭代第二組的元素。然後使用 has() 方法檢查該元素是否在第一個 Set 中。如果該元素存在於第一個 Set 中，則使用 push() 方法將該元素新增至交集數組。

範例

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

登入後複製

在本教學中，我們藉助範例討論了使用兩個陣列的交集來建立陣列的三種方法。在第一種方法中，我們使用filter()和include()方法，而在第二種方法中，除了filter和include之外，我們也使用展開運算子和Set。在第三種方法中，我們建立了一個自訂函數來執行此任務。

以上是如何在 JavaScript 中使用兩個陣列的交集來建立陣列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7802

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1236

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。