如何在 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 => 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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...
神秘的JavaScript：它的作用以及为什么重要
Apr 09, 2025 am 12:07 AM
JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。
console.log输出结果差异：两次调用为何不同？
Apr 04, 2025 pm 05:12 PM
深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...
如何实现视差滚动和元素动画效果，像资生堂官网那样？
或者：
怎样才能像资生堂官网一样，实现页面滚动伴随的动画效果？
Apr 04, 2025 pm 05:36 PM
实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网（https://www.shiseido.co.jp/sb/wonderland/）中�...
初学者的打字稿，第2部分：基本数据类型
Mar 19, 2025 am 09:10 AM
掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型 与JavaScript一样，TypeScript中的null
PowerPoint可以运行JavaScript吗？
Apr 01, 2025 pm 05:17 PM
在PowerPoint中可以运行JavaScript，通过VBA调用外部JavaScript文件或嵌入HTML文件来实现。1.使用VBA调用JavaScript文件，需启用宏并具备VBA编程知识。2.嵌入包含JavaScript的HTML文件，简单易行但受安全限制。优点包括扩展功能和灵活性，劣势涉及安全性、兼容性和复杂性，实际应用需注意安全性、兼容性、性能和用户体验。
