Article Categories

Selected Reading

How to find elements of JavaScript array by multiple values?

Javascript Web Development Object Oriented Programming

In JavaScript, you can find elements of an array by multiple values using various methods. The most common approaches are using filter() with includes() or checking if an array contains all elements from another array.

Method 1: Using filter() with includes()

This method filters an array to find elements that match any of the specified values:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Find Elements by Multiple Values</title>
</head>
<body>
    <h2>Find Array Elements by Multiple Values</h2>
    <div id="result"></div>
    <button onclick="findElements()">Find Elements</button>
    
    <script>
        function findElements() {
            const mainArray = [11, 44, 22, 16, 25, 91, 58, 33];
            const searchValues = [22, 91, 11, 99];
            
            // Find elements that exist in both arrays
            const foundElements = mainArray.filter(item => searchValues.includes(item));
            
            document.getElementById("result").innerHTML = 
                `Found elements: [${foundElements.join(', ')}]<br>` +
                `Search values: [${searchValues.join(', ')}]<br>` +
                `Main array: [${mainArray.join(', ')}]`;
        }
    </script>
</body>
</html>

Method 2: Check if Array Contains All Values

This method checks whether an array contains all elements from another array using every() and includes():

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check All Elements Exist</title>
</head>
<body>
    <h2>Check if Array Contains All Elements</h2>
    <div id="result"></div>
    <button onclick="checkAllElements()">Check Elements</button>
    
    <script>
        function checkAllElements() {
            const arr = [11, 44, 22, 16, 25, 91, 58];
            const searchArray = [22, 91, 11];
            
            const containsAll = searchArray.every(item => arr.includes(item));
            
            document.getElementById("result").innerHTML = 
                containsAll ? 
                "The array contains all search elements" : 
                "The array doesn't contain all search elements";
        }
    </script>
</body>
</html>

Method 3: Find Elements with Their Positions

This method returns both the found elements and their positions in the original array:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Find Elements with Positions</title>
</head>
<body>
    <h2>Find Elements with Their Positions</h2>
    <div id="result"></div>
    <button onclick="findWithPositions()">Find with Positions</button>
    
    <script>
        function findWithPositions() {
            const arr = [11, 44, 22, 16, 25, 91, 58];
            const searchValues = [22, 91, 11];
            const results = [];
            
            searchValues.forEach(value => {
                const index = arr.indexOf(value);
                if (index !== -1) {
                    results.push({value: value, index: index});
                }
            });
            
            let output = "Found elements with positions:<br>";
            results.forEach(item => {
                output += `Value ${item.value} at index ${item.index}<br>`;
            });
            
            document.getElementById("result").innerHTML = output;
        }
    </script>
</body>
</html>

Comparison of Methods

Method	Use Case	Returns	Performance
`filter() + includes()`	Find matching elements	Array of found elements	Good for small arrays
`every() + includes()`	Check if all exist	Boolean (true/false)	Stops on first false
`indexOf() loop`	Get positions too	Array with values and indices	Most detailed info

Key Points

includes() checks if an array contains a specific element
every() tests whether all elements pass a condition
filter() creates a new array with elements that pass a test
Choose the method based on whether you need the actual elements, boolean result, or positional information

Conclusion

Use filter() with includes() to find matching elements, every() with includes() to check if all values exist, or combine with indexOf() when you need positional information. Each method serves different use cases for finding array elements by multiple values.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

362 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next