Find the common elements of more than two JavaScript arrays ?

0 0 2 minutes read

Given an HTML document having multiple arrays with some elements and the task is to get the common elements from arrays with the help of JavaScript. There are two approaches that are discussed below.

Approach 1: First get the arrays in 2-dimensional format then take the first array by shift() method and then filter out the elements from the first array which are common in all by using filter() method. The elements which are common in all arrays can be checked by every() method and if the element of first array matches with all elements then that element is returned.

Example:

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        Finding matches between more than 
        2 JavaScript arrays 
    </title> 
    <style> 
        body { 
            text-align:center; 
        } 
        h1 { 
            color: green; 
        } 
        #zambiatek { 
            font-size: 16px;  
            font-weight: bold; 
        } 
          
        #gfg { 
            color: green;  
            font-size: 18px;  
            font-weight: bold; 
        } 
    </style> 
</head> 
  
<body style=""> 
    <h1 >  
            zambiatek  
        </h1> 
    <p id="zambiatek"> 
    </p> 
    <button onClick="GFG_Fun()"> 
        click here 
    </button> 
    <p id="gfg" > 
    </p> 
    <script> 
        var up = document.getElementById('zambiatek'); 
        var down = document.getElementById('gfg'); 
        var arr1 = [1, 3, 5, 7, 9]; 
        var arr2 = [1, 2, 4, 5, 7]; 
        var arr3 = [1, 2, 5, 7, 8]; 
        var arr = [arr1, arr2, arr3]; 
        up.innerHTML = 
            "Click on button to get the common elements from these"+ 
            " array<br>Array1 - [" + arr1 + "]<br>Array2 -"+ 
            " [" + arr2 + "]<br>Array3 - [" + arr3 + "]"; 
  
        function GFG_Fun() { 
            arr4 = arr.slice(); 
            down.innerHTML = arr4.shift().filter(function(v) { 
                return arr4.every(function(a) { 
                    return a.indexOf(v) !== -1; 
                }); 
            }); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Approach 2: First get the arrays in 2-dimensional format then use the reduce() method to get the access to all arrays one by one. variable(p) contains each array one by one and returns only elements of the array which are in variable(c) array by using filter() method. At the end variable(c) contains the array of common elements.

Example:

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        Finding matches between more than 
        2 JavaScript arrays 
    </title> 
    <style> 
        body { 
            text-align:center; 
        } 
        h1 { 
            color: green; 
        } 
        #zambiatek { 
            font-size: 16px;  
            font-weight: bold; 
        } 
          
        #gfg { 
            color: green;  
            font-size: 18px;  
            font-weight: bold; 
        } 
    </style> 
</head> 
  
<body style=""> 
    <h1 >  
     zambiatek  
    </h1> 
    <p id="zambiatek"> 
    </p> 
    <button onClick="GFG_Fun()"> 
        click here 
    </button> 
    <p id="gfg" > 
    </p> 
    <script> 
        var up = document.getElementById('zambiatek'); 
        var down = document.getElementById('gfg'); 
        var arr1 = [1, 3, 5, 7, 9]; 
        var arr2 = [1, 2, 4, 5, 7]; 
        var arr3 = [1, 2, 5, 7, 8]; 
        var arr = [arr1, arr2, arr3]; 
        up.innerHTML = 
            "Click on button to get the common elements from these"+ 
            " array<br>Array1 - [" + arr1 + "]<br>Array2 -"+ 
            " [" + arr2 + "]<br>Array3 - [" + arr3 + "]"; 
  
        function GFG_Fun() { 
            down.innerHTML = arr.reduce((p, c) => 
            p.filter(e => c.includes(e))); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!