Фильтрация массивов в JavaScript через filter
Обзор метода filter
Метод filter() создает новый массив, включающий только те элементы исходного массива, для которых переданная функция-коллбэк возвращает true (или значение, которое приводится к true). Исходный массив не изменяется.
Синтаксис: arr.filter(callback(element[, index[, array]])[, thisArg])
Пример базового использования: отфильтровать числа больше 10.
const numbers = [5, 12, 8, 130, 44];
const filtered = numbers.filter(num => num > 10);
console.log(filtered);Js filter (метод filter в javascript)
[12, 130, 44]
Js foreach (метод foreach в javascript)
На каждом шаге коллбэк проверяет условие num > 10. Если условие истинно, элемент попадает в результат.
Как отфильтровать массив объектов по значению свойства?
Часто требуется выбрать объекты, у которых значение свойства удовлетворяет условию. Например, оставить только активных пользователей.
const users = [
{ name: 'Анна', active: true },
{ name: 'Иван', active: false },
{ name: 'Мария', active: true }
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);[
{ name: 'Анна', active: true },
{ name: 'Мария', active: true }
]Типичная ошибка: сравнение объектов по ссылке. Если свойство является объектом, фильтрация по === может не дать ожидаемого результата. Рекомендуется сравнивать примитивные значения или использовать глубокое сравнение.
Как получить элементы, находящиеся на четных позициях?
Коллбэк принимает индекс элемента. Можно использовать его для проверки четности индекса.
const items = ['a', 'b', 'c', 'd', 'e'];
const evenIndexed = items.filter((_, index) => index % 2 === 0);
console.log(evenIndexed);['a', 'c', 'e']
Ошибка: забыть вернуть результат из коллбэка. Если не указать return в стрелочной функции с фигурными скобками, коллбэк вернет undefined, что приводится к false.
Как передать внешний объект для сравнения через thisArg?
Второй аргумент filter() задает значение this внутри коллбэка. Удобно для повторного использования функции.
function isGreaterThan(threshold) {
return this.value > threshold;
}
const data = [{ value: 10 }, { value: 20 }, { value: 5 }];
const thresholdObj = { value: 15 };
const result = data.filter(isGreaterThan, thresholdObj);
console.log(result);[{ value: 20 }]Внимание: в стрелочных функциях this не привязывается, поэтому thisArg игнорируется. Следует использовать обычную функцию.
Как убрать из массива все ложные значения (false, 0, '', null, undefined, NaN)?
Метод filter(Boolean) - краткая запись для удаления falsy-значений.
const mixed = [0, 'текст', false, '', null, 42, undefined];
const truthy = mixed.filter(Boolean);
console.log(truthy);['текст', 42]
Недостаток: вместе с ложными удаляются все числа 0, пустые строки и т.д., что не всегда желательно. Для гибкого контроля следует писать свою проверку.
Как отфильтровать массив, оставив только элементы, присутствующие в другом массиве (пересечение)?
Используется метод includes() внутри коллбэка.
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 4, 6, 8];
const intersection = arr1.filter(item => arr2.includes(item));
console.log(intersection);[2, 4]
Производительность: при больших массивах includes() даёт O(n*m). Для оптимизации лучше использовать Set.
Расширенные примеры использования filter()
Пример 1: Фильтрация уникальных значений с помощью filter и indexOf.
const numbers = [1, 2, 2, 3, 4, 4, 5];
const unique = numbers.filter((value, index, arr) => arr.indexOf(value) === index);
console.log(unique);[1, 2, 3, 4, 5]
Пример 2: Фильтрация массива строк по длине с сохранением порядка.
const words = ['кот', 'собака', 'дом', 'автомобиль', 'лес'];
const longWords = words.filter(word => word.length > 4);
console.log(longWords);['собака', 'автомобиль']
Пример 3: Фильтрация вложенных массивов (например, оставить только подмассивы, сумма элементов которых больше 10).
const matrix = [[1, 2], [5, 6], [2, 2], [10, 0]];
const filteredMatrix = matrix.filter(subarr => {
const sum = subarr.reduce((acc, val) => acc + val, 0);
return sum > 10;
});
console.log(filteredMatrix);[[5, 6], [10, 0]]
Пример 4: Фильтрация с мультиусловием (несколько полей объекта).
const products = [
{ name: 'Ноутбук', price: 800, inStock: true },
{ name: 'Мышь', price: 25, inStock: false },
{ name: 'Клавиатура', price: 50, inStock: true }
];
const affordableAndAvailable = products.filter(p => p.price < 100 && p.inStock);
console.log(affordableAndAvailable);[
{ name: 'Мышь', price: 25, inStock: false },
{ name: 'Клавиатура', price: 50, inStock: true }
]Внимание: в примере с мышь свойство inStock равно false, поэтому она не попала в результат. Условие p.inStock требует строго true.
Пример 5: Цепочка filter() с map() - преобразование отфильтрованных данных.
const people = [
{ name: 'Олег', age: 17 },
{ name: 'Елена', age: 22 },
{ name: 'Игорь', age: 30 }
];
const adultNames = people
.filter(person => person.age >= 18)
.map(person => person.name);
console.log(adultNames);['Елена', 'Игорь']
Пример 6: Фильтрация с использованием внешнего набора (Set) для повышения производительности.
const bigArray = [/* большой массив */];
const excludeSet = new Set([2, 4, 6]);
const filteredBig = bigArray.filter(item => !excludeSet.has(item));Этот подход эффективнее filter + includes для больших наборов данных.