Home >Web Front-end >JS Tutorial >How to use filter function in js
JavaScript filter function is used to filter elements in an array that meet specific conditions and return a new array composed of elements that meet the conditions. Usage includes: filtering elements that meet simple or complex conditions, and creating filter chains. The filter function does not modify the original array. The callback function must return a Boolean value. If a Boolean value is not returned, an error will be thrown.
Usage of filter function in JavaScript
filter The function is a built-in method of JavaScript array. Used to filter elements in an array that meet specific conditions and return a new array consisting of elements that meet the conditions.
Syntax:
<code class="javascript">filter(callback(element, index, array))</code>
Parameters:
##callback(element, index, array): A callback function that must return a Boolean value.
Return value:
A new array containing all elements that meet the conditions of the callback function.Usage:
1. Filter elements that meet simple conditions:
<code class="javascript">const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = numbers.filter((num) => num % 2 === 0);</code>
2. Filter elements that meet complex conditions Elements of the condition:
<code class="javascript">const users = [ { name: 'John', age: 25 }, { name: 'Mary', age: 30 }, { name: 'Bob', age: 18 } ]; const adults = users.filter((user) => user.age >= 18);</code>
3. Filter chain:
<code class="javascript">const evenAndGreaterThan3 = numbers.filter((num) => num % 2 === 0).filter((num) => num > 3);</code>
Example:
The following example demonstrates Here's how to use the filter function to filter an array containing student scores to get the list of failed students:<code class="javascript">const scores = [90, 85, 77, 65, 52, 45]; const failingScores = scores.filter((score) => score < 60);</code>
failingScores The variable will contain the following elements:
Note:
The above is the detailed content of How to use filter function in js. For more information, please follow other related articles on the PHP Chinese website!