数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在 JavaScript 中查找两个或多个数组的公共元素？
数组是 JavaScript 中的 typeof 运算符。可以使用从 0 开始的索引号访问数组元素。
Let array = [“India”, “Australia”, “USA”];
有很多方法可以获取数组中的公共元素。在本例中，我们使用for 循环来查找公共数组。
在本文中，我们将讨论如何在 JavaScript 中查找两个或多个数组的公共元素。
使用 for 循环
查找两个或多个数组的公共元素的一种方法是使用简单的 for 循环。以下是需要遵循的步骤：
步骤 1 - 创建一个空数组。
步骤 2 - 使用 for 循环遍历其中一个数组的所有项目。
步骤 3 - 在此 for 循环中迭代另一个数组的项目。
步骤 4 - 如果项目在两个数组中都匹配，则将其推入公共数组。
步骤 5 - 否则，继续处理下一个项目。
示例 1
考虑到上述步骤，我们将通过创建一个函数来执行返回公共项目的动作。
<!DOCTYPE html> <html> <title>Common elements between two arrays in JavaScript</title> <head> <script> function CommonItemsArray(array_1, array_2) { var commonArray = []; // Create an array for common items in another two arrays. for (var i = 0; i < array_1.length; i++) { for (var j = 0; j < array_2.length; j++) { if (array_1[i] == array_2[j]) { // If the item is common in both arrays commonArray.push(array_1[i]); // Push common items to the array } } } return commonArray; // Return the common items } var array_1 = [10,20,30,40,50]; var array_2 = [20,30,60,70,90]; // Get common items of both array_1, array_2 var commonItem= CommonItemsArray(array_1, array_2); document.write("The common elements present in both arrays are:"); document.write(commonItem); </script> </head> <body> </body> </html>
示例 2
让我们考虑另一种情况，数组包含字符串值和整数值作为项目。
<!DOCTYPE html> <html> <title> Common elements between two arrays in JavaScript</title> <head> <script> function CommonItemsArray(array_1, array_2) { var commonArray = []; // Create an array for common items in another two arrays. for (var i = 0; i < array_1.length; i++) { for (var j = 0; j < array_2.length; j++) { if (array_1[i] == array_2[j]) { // If the item is common in both arrays commonArray.push(array_1[i]); // Push common items to the array } } } return commonArray; // Return the common items } var array_1 = ["Vikram", 20, "Amar", 40, 50]; var array_2 = [10, "Vikram", 60, 40, "Shiva"]; // Get common items of both array_1, array_2 var commonItem = CommonItemsArray(array_1, array_2); document.write("The common elements present in both arrays are:"); document.write(commonItem); </script> </head> <body> </body> </html>
使用 forEach() 方法
forEach() 是 JavaScript 中的一种方法，它会为数组中的每个元素调用一个函数。如果存在空元素，则此方法不会执行。以下是 JavaScript forEach() 方法的语法：
array.forEach(function(currentValue, index, arr), thisValue)
示例 1
在下面的示例中，我们使用 forEach() 方法执行了数组的公共元素。
<!DOCTYPE html> <html> <title>Common elements between two arrays in JavaScript using forEach() method.</title> <head> <script> const array_1 = [11, "Virat", 33, "Pant", 55, 77]; // Creating Array1 const array_2 = [33, 66, "99", "Virat", 88, 77]; // Creating Array2 //Creating an empty array for pushing common elements const uniqueArray = []; // Finding the common elements in both arrays array_1.forEach(ele1 => { array_2.forEach(ele2 => ele1 === ele2 && uniqueArray.push(ele1)); }); //Printing the common arrays document.write("The common elements in both the arrays are: "); document.write(uniqueArray); </script> </head> <body> </body> </html>
使用 _.intersection() 方法
_.intersection() 方法用于查找一个或多个数组的交集。此方法属于 Lodash，这是一个在 underscore.js 之上运行的 JavaScript 库。
示例
在下面的示例中，我们使用_.intersection() 方法查找数组之间的公共元素：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Find common elements between two or more arrays</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <div id="intersection"></div> </head> <body> <script> let arr1 = [10, 20, 40, 80]; let arr2 = [30, 40, 20, 80]; let arr3 = [40, 80, 60]; let arr4 = [40, 80, "Alice", 70, 90]; document.getElementById("intersection").innerHTML = "Common elements between arrays are : " + _.intersection(arr1, arr2, arr3, arr4); </script> </body> </html>
使用 filter() 方法
filter 方法接受一个函数作为参数，并根据给定的函数过滤当前数组的元素。
示例 1
在下面的示例中，我们尝试使用 filter() 方法查找两个数组之间的公共元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Find common elements between two or more arrays</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <div id="common"></div> </head> <body> <script> let arr = [ [10, 20, 40, 80], [30, 40, 20, 80], [40, 80, 60], [40, 80, "Alice", 70, 90], ]; let newArr = arr.reduce((x, y) => x.filter((z) => y.includes(z))); document.getElementById("common").innerHTML = "Common elements between arrays are : " + newArr; </script> </body> </html>
使用 reduce() 方法
reduce() 方法类似于 filter() 方法，它接受一个 reducer 函数作为参数，并根据给定的函数减少当前数组的元素。
示例
在下面的示例中，我们尝试使用 reduce() 方法查找两个数组之间的公共元素：
<!DOCTYPE html> <html lang="en"> <head> <title>Find common elements between two or more arrays</title> <h4>Common elements between arrays are :</h4> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <div id="common"></div> <input type="button" onclick="myFunction()" value="click here" /> </head> <body> <script> let arr1 = [10, 20, 40, 80]; let arr2 = [30, 40, 20, 80]; let arr3 = [40, 80, 60]; let arr = [arr1, arr2, arr3]; let content = document.getElementById("common"); let myFunction = function (x, y) { content.innerHTML = arr.reduce((x, y) => x.filter((z) => y.includes(z)) ); }; </script> </body> </html>
更新于：2022年9月19日
9K+ 次查看
广告