資料結構
網路
關係資料庫管理系統 (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+ 次檢視
廣告