The filter() method is used to create a new array containing elements that pass the specified condition without modifying the original array. 1. It executes the provided callback function on each element of the array; 2. If the callback returns true, the element is added to the new array; 3. The callback usually uses element parameters, and can also include index and array; 4. Common usages include filtering numbers and object properties (such as active users); 5. Always return the new array, and the original array remains unchanged; 6. It can be called chained with map(), sort() and other methods to process data. For example, users.filter(u => u.active).map(u => u.name) returns the array of names of active users ['Alice', 'Charlie'].

The filter() method in JavaScript is used to create a new array containing only the elements that pass a certain condition. It doesn't change the original array — instead, it returns a fresh one with the filtered results.

How filter() Works

The filter() method runs a test (a function you provide) on each element of the array. If the test returns true , that element is included in the new array. If it returns false , it's left out.

Here's the basic syntax:

 const newArray = array.filter(callback(element, index, array), thisArg);

• callback is a function that tests each element.
• element is the current item being processed.
• index (optional) is the index of the current element.
• array (optional) is the array filter() was called on.
• thisArg (optional) lets you set the value of this inside the callback.

In most cases, you'll just use the element parameter.

Example: Filtering Numbers

Say you have an array of numbers and want only the ones greater than 10:

 const numbers = [5, 10, 15, 20, 25];
const bigNumbers = numbers.filter(num => num > 10);

console.log(bigNumbers); // [15, 20, 25]
console.log(numbers); // [5, 10, 15, 20, 25] (unchanged)

The arrow function num => num > 10 is the test. For each number, it checks if it's greater than 10. Only those that pass are included.

Example: Filtering Objects

You can also filter arrays of objects. For instance, getting only active users:

 const users = [
  { name: 'Alice', active: true },
  { name: 'Bob', active: false },
  { name: 'Charlie', active: true }
];

const activeUsers = users.filter(user => user.active);

console.log(activeUsers);
// [{ name: 'Alice', active: true }, { name: 'Charlie', active: true }]

Key Points to Remember

• filter() always returns a new array .
• The original array is not modified .
• If no elements pass the test, you get an empty array .
• The callback should return a boolean ( true or false ).

When to Use filter()

You'll use filter() whenever you need to:

• Search through data (eg, find products in stock)
• Clean up arrays (eg, remove invalid entries)
• Extract specific items (eg, users over 18)

It's commonly chained with other methods like map() or sort() for more powerful data processing.

For example:

 const result = users
  .filter(u => u.active)
  .map(u => u.name);
// ['Alice', 'Charlie']

Basically, filter() is a clean, functional way to sift through data without loops or side effects.

The above is the detailed content of What is the filter method on arrays in JavaScript and how does it work?. For more information, please follow other related articles on the PHP Chinese website!