Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to filter an array from all elements of another array – JavaScript?
The task we are going to perform in this article is how to filter an array from all elements of another array JavaScript. Before we dive into the article, let’s have a quick view on the array in JavaScript.
When storing multiple values in a single variable, arrays are used. When compared to a variable, which can hold only one value, this Each element of an array has a number associated with it called a numeric index that enables access to it. Arrays in JavaScript begin at index zero and can be modified using a number of different techniques.
In order to filter array from all elements of another array, use filter(). Let’s dive into the article to learn more about the how to filter an array from all elements of another array
filter() in JavaScript
A new array of elements that pass a test supplied by a function is created by the filter() method. For empty elements, the filter() method does not run the function. The original array is unaltered by the filter() technique.
Syntax
Following is the syntax for filter()
array.filter(function(currentValue, index, arr), thisValue)
Let’s look into the following examples to understand more about how to filter an array from all elements of another array JavaScript.
Example
In the following example we are running the script to filter an array from all elements.
<!DOCTYPE html>
<html>
<body>
<script>
var array1 = [0,7,8,6],
array2 = [6,8],
result = array1.filter(item => !array2.includes(item));
document.write(result);
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of an array printed on the web-browser that was updated from the two arrays provided in the above script, which got filtered and displays the rest array elements on the web-browser.
Example
Considering the following example, where we are using filter and for filter we are using reduction
<!DOCTYPE html>
<html>
<body>
<script>
var a1 = [3, 0, 6, 8,9],
a2 = [8, 0,6];
var filtered = a1.filter(function(x) {
return !a2.reduce(function(y, z) {
return x == y || x == z || y == true;
})
});
document.write(filtered);
</script>
</body>
</html>
On running the above script, the web-browser displays the array of elements that occurred, when the event got triggered on running the script, which compares the provided two arrays and then gets filtered; for filtered, we used reduction and displayed the elements.
Example
Let’s look into the another example, where we are using the fill() method.
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
var array1= [1,2,3,4,5];
var array2=[2,4,5,4]
function fill(value){
return value !=array2[0] && value != array2[1]
}
document.getElementById("tutorial").innerHTML= array1.filter(fill)
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of an array printed that was flitted from the two arrays mentioned in the script on the web-browser by the event that got triggered on executing the script.
Example
Execute the following code, to observe what will happen
<!DOCTYPE html>
<html>
<body>
<script>
var result = [100,110,150,180,190,175].filter(
function(obj) {
return this.indexOf(obj) < 0;
},
[100,150,175]
);
document.write("After filter, the result is=");
document.write(result);
</script>
</body>
</html>
On running the above script, the event gets triggered and displays an array along with some text on the web-browser. The displayed array elements are obtained by filtering the two arrays mentioned in the above script.
467 Views
