Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Filter array based on another array in JavaScript
In this article, we are going to learn how to filter an array based on another array in JavaScript.
An Array in JavaScript is used to store different elements. These elements are stored at contiguous memory locations. By using index numbers, we can access any or each data element present in the array. Index numbers start from 0.
Syntax
Following is the syntax of the array in JavaScript -
const array_name = [item1, item2, ...];
The following is a simple declaration of array in JavaScript:
const colors = ['Blue', 'Limegreen', 'Orange', 'Black'];
Example Scenarios
Let's assume a scenario where we have two arrays with some common elements, and we need to filter out the common elements:
// Input arr1 = [1, 3, 7, 10]; arr2 = [3, 7]; // Output: [1, 10] (elements from arr1 not in arr2)
Another scenario with string elements:
// Input arr1 = ['ravi', 'kunal', 'hari']; arr2 = ['ravi', 'sharma']; // Output arr1 = ['kunal', 'hari'] arr2 = ['sharma']
Using filter() with indexOf()
The filter() method creates a new array with elements that pass a test specified by a function. We can combine it with indexOf() to filter elements.
<!DOCTYPE html>
<html>
<head>
<title>Filtering array based on another array</title>
</head>
<body>
<script>
const array1 = [1, 3, 7, 10, 17, 18, 33, 45, 99];
const array2 = [10, 17, 33];
const filterArray = (array1, array2) => {
const filtered = array1.filter(el => {
return array2.indexOf(el) === -1;
});
return filtered;
};
document.write("Filtered result: " + filterArray(array1, array2));
</script>
</body>
</html>
Using filter() with Context Parameter
The The You can filter both arrays to remove common elements from each: The filter()
<!DOCTYPE html>
<html>
<head>
<title>Filtering with context parameter</title>
</head>
<body>
<script>
var arr = [6, 1, 9, 4, 7].filter(
function(e) {
return this.indexOf(e) < 0;
},
[1, 4, 7]
);
document.write("Filtered array: " + arr);
</script>
</body>
</html>
Using filter() with includes()
includes() method provides a cleaner way to check if an element exists in an array:
<!DOCTYPE html>
<html>
<head>
<title>Using filter with includes</title>
</head>
<body>
<script>
let arr1 = ['Govind', 'Alekhya', 'Sarika', 'Raviteja', 'Pooja'];
let arr2 = ['Alekhya', 'Pooja'];
arr1 = arr1.filter(function(item) {
return !arr2.includes(item);
});
document.write("Filtered names: " + arr1);
</script>
</body>
</html>
Filtering Both Arrays Simultaneously
<!DOCTYPE html>
<html>
<head>
<title>Filter both arrays</title>
</head>
<body>
<script>
function filter_array() {
let arr1 = ['s', 'r', 'a', 'k', 'i'];
let arr2 = ['n', 's', 'k'];
var tempArray = arr2.filter(function(item) {
return !arr1.includes(item);
});
arr1 = arr1.filter(function(item) {
return !arr2.includes(item);
});
arr2 = tempArray;
document.write("Array 1: " + arr1 + "<br>");
document.write("Array 2: " + arr2);
}
filter_array();
</script>
</body>
</html>
Comparison of Methods
Method
Performance
Readability
Browser Support
filter() + indexOf()Good
Good
All browsers
filter() + includes()Better
Excellent
ES6+ browsers
Conclusion
filter() method combined with includes() provides the most readable approach for filtering arrays based on another array. Use indexOf() if you need broader browser compatibility.
14K+ Views
