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 中存在的元素。
示例
<html>
<head>
<title>Creating an Array using Intersection of two Arrays using Spread Operator and Filter() method</title>
</head>
<body>
<p id="arr1"></p>
<p id="arr2"></p>
<p id="result"></p>
<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 => arr2.includes(x));
document.getElementById("result").innerHTML = "Intersection of Array1 & Array 2: " + JSON.stringify(intersection);
</script>
</body>
</html>
登錄后復制
方法 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 中使用兩個數組的交集創建數組？的詳細內容，更多請關注www.92cms.cn其它相關文章！
