run-dev

filter в JavaScript: как фильтровать массивы в JS

filter — это метод массивов в JavaScript, который создает новый массив, содержащий только те элементы, которые удовлетворяют условию, заданному в переданной функции. Этот метод не изменяет исходный массив и часто применяется для фильтрации данных по заданным критериям.

Синтаксис метода filter

array.filter(callback(element, index, array), thisArg)
  • callback — функция-предикат, которая вызывается для каждого элемента массива.
  • element — текущий элемент массива.
  • index — индекс текущего элемента.
  • array — исходный массив.
  • thisArg — необязательный параметр, который задает значение this внутри callback.

Функция callback должна возвращать true, если элемент проходит фильтрацию, и false, если он должен быть исключен из нового массива.

Пример фильтрации чисел

Фильтрация массива чисел для получения только четных чисел:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(n => n % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

Фильтрация объектов по свойству

Фильтрация массива объектов для получения только активных пользователей:

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 }]

Фильтрация строк по подстроке

Фильтрация массива строк по наличию подстроки:

const fruits = ['apple', 'banana', 'cherry', 'apricot'];
const filteredFruits = fruits.filter(fruit => fruit.includes('ap'));
console.log(filteredFruits); // ['apple', 'apricot']

Фильтрация с использованием индекса

В некоторых случаях при фильтрации может понадобиться индекс элемента:

const numbers = [10, 20, 30, 40, 50];
const evenIndexNumbers = numbers.filter((_, index) => index % 2 === 0);
console.log(evenIndexNumbers); // [10, 30, 50]

Фильтрация с переданным контекстом

При необходимости в filter можно передать второй аргумент thisArg, который будет использоваться как контекст внутри callback:

const threshold = { value: 15 };
const numbers = [10, 20, 30, 5];

const filteredNumbers = numbers.filter(function(n) {
    return n > this.value;
}, threshold);

console.log(filteredNumbers); // [20, 30]

Особенности filter

  • Исходный массив не изменяется.
  • Если ни один элемент не соответствует условию, возвращается пустой массив.
  • filter возвращает новый массив даже в случае полной фильтрации (когда все элементы проходят условие).

filter в JavaScript — это мощный инструмент для работы с массивами, который позволяет гибко выбирать элементы по любым условиям. Он широко используется при обработке данных, создании списков на основе пользовательских фильтров и работе с коллекциями в функциональном стиле программирования.

Больше записей