5 мощных техник фильтрации массивов в JavaScript: метод filter

Для кого эта статья:

• Для разработчиков, изучающих JavaScript, и желающих улучшить навыки работы с массивами.
• Для студентов и начинающих веб-программистов, интересующихся практическими техниками фильтрации данных.

• Для профессионалов, стремящихся оптимизировать свой код и повысить его читаемость и производительность.

  Когда дело касается массивов в JavaScript, умение быстро найти нужные элементы становится поистине суперспособностью разработчика. Забудьте о громоздких циклах и условных конструкциях — метод filter() элегантно решает эту задачу одной строкой кода. Освоив пять мощных техник фильтрации данных, вы не только сократите количество строк в своем коде, но и сделаете его более читаемым, производительным и поддерживаемым. 🚀 Готовы превратить работу с массивами из головной боли в удовольствие?

Хотите быстро освоить не только метод filter(), но и другие мощные инструменты современного JavaScript? Обучение веб-разработке от Skypro предлагает интенсивный курс с практическими заданиями, где вы работаете с реальными проектами. В отличие от теоретических курсов, здесь вы получите опыт, который можно сразу применить в работе. Наши студенты находят первую работу уже во время обучения!

Синтаксис и принцип работы метода filter в JavaScript

Метод filter() создает новый массив, содержащий только те элементы исходного массива, которые проходят проверку, заданную в функции-колбэке. Это позволяет избежать мутации оригинального массива — принцип, соответствующий функциональному программированию. 🧐

Базовый синтаксис метода выглядит так:

const newArray = array.filter(function(item, index, array) {
// условие возврата элемента
return condition;
});

С использованием стрелочной функции код становится еще лаконичнее:

const newArray = array.filter((item, index, array) => condition);

Параметры функции-колбэка:

• item — текущий обрабатываемый элемент массива
• index — индекс текущего обрабатываемого элемента (опционально)
• array — исходный массив, к которому применяется метод filter (опционально)

Колбэк-функция должна возвращать логическое значение:

• true — элемент будет добавлен в новый массив
• false — элемент будет проигнорирован

Артём Викторов, старший frontend-разработчик

Однажды я столкнулся с задачей отфильтровать массив из 10 000 пользовательских записей по нескольким критериям. Первое решение включало множественные вложенные циклы и условия, что привело к заметным задержкам в интерфейсе. Применение метода filter() не только сократило код с 50 строк до 10, но и ускорило обработку данных в три раза. Чтобы добиться такого результата, нужно понимать, как работает filter() под капотом — он перебирает каждый элемент массива только один раз, оценивая его по заданному условию в функции обратного вызова. Это означает, что сложность алгоритма составляет O(n), где n — количество элементов в массиве.

Рассмотрим простой пример: отфильтруем числа больше 5 из массива:

const numbers = [1, 4, 7, 2, 9, 3, 8];
const largeNumbers = numbers.filter(num => num > 5);
console.log(largeNumbers); // [7, 9, 8]

Ключевые особенности метода filter для поиска в массиве:

Важно понимать, что метод filter() всегда возвращает новый массив, даже если ни один элемент не соответствует условию (в этом случае результат — пустой массив). Это гарантирует, что с результатом всегда можно работать как с массивом, применяя другие методы массивов.

Поиск элементов по точному совпадению значений

Поиск по точному совпадению — самый базовый и часто используемый способ фильтрации. Эта техника идеально подходит, когда необходимо найти элементы, соответствующие конкретному значению или набору значений. ✅

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

const fruits = ['apple', 'banana', 'apple', 'orange', 'kiwi'];
const apples = fruits.filter(fruit => fruit === 'apple');
console.log(apples); // ['apple', 'apple']

Для фильтрации по нескольким значениям удобно использовать метод includes() в сочетании с массивом искомых значений:

const fruits = ['apple', 'banana', 'grape', 'orange', 'kiwi'];
const targetFruits = ['apple', 'orange'];
const filteredFruits = fruits.filter(fruit => targetFruits.includes(fruit));
console.log(filteredFruits); // ['apple', 'orange']

Метод filter для поиска в массиве особенно полезен при работе с различными типами данных. Важно помнить о строгом (=) и нестрогом () сравнении:

const mixedArray = [1, '1', 2, '2', 3];

// Строгое сравнение (учитывает тип данных)
const strictlyOne = mixedArray.filter(item => item === 1);
console.log(strictlyOne); // [1]

// Нестрогое сравнение (приводит типы)
const looselyOne = mixedArray.filter(item => item == 1);
console.log(looselyOne); // [1, '1']

Если нужно отфильтровать элементы, которые НЕ соответствуют определенному значению, используйте оператор отрицания (!):

const numbers = [1, 2, 3, 4, 5];
const notThree = numbers.filter(num => num !== 3);
console.log(notThree); // [1, 2, 4, 5]

Полезные практики при поиске по точному совпадению:

• При работе со строками учитывайте регистр (используйте toLowerCase() или toUpperCase() для регистронезависимого сравнения)
• Для фильтрации объектов по значениям свойств проверяйте эти свойства внутри колбэк-функции
• При фильтрации строк по шаблону используйте регулярные выражения для более гибкого поиска
• Для фильтрации по нескольким значениям используйте метод includes() с массивом или объект Set для более эффективного поиска

Пример использования регулярных выражений для фильтрации строк:

const words = ['apple', 'application', 'banana', 'book', 'apartment'];
const applePattern = /^app/i;
const appWords = words.filter(word => applePattern.test(word));
console.log(appWords); // ['apple', 'application', 'apartment']

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

Фильтрация по диапазону чисел — неотъемлемая часть работы с числовыми данными. Метод filter для поиска в массиве идеально подходит для выборки значений, попадающих в определенные числовые интервалы. 📊

Простейший пример фильтрации по диапазону:

const scores = [15, 47, 88, 92, 30, 64, 55, 75];

// Числа в диапазоне от 50 до 80 включительно
const mediumScores = scores.filter(score => score >= 50 && score <= 80);
console.log(mediumScores); // [64, 55, 75]

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

const scores = [15, 47, 88, 92, 30, 64, 55, 75];

// Числа меньше 20 ИЛИ больше 80
const extremeScores = scores.filter(score => score < 20 || score > 80);
console.log(extremeScores); // [15, 88, 92]

Сергей Павлов, руководитель отдела разработки

Работая над проектом аналитической платформы, мы столкнулись с необходимостью фильтровать большие объемы финансовых данных в реальном времени. Изначально применяли цикл for и множество условий для фильтрации по различным диапазонам, что приводило к проблемам с производительностью. После рефакторинга с использованием метода filter() и составных условий, время обработки 100 000 записей сократилось с 300мс до 80мс. Ключевой урок: для оптимизации важно объединять все условия в одном вызове filter() вместо цепочки последовательных фильтраций. При этом сложные условия лучше выносить в отдельные функции для улучшения читаемости и тестирования.

Можно создавать функции для определения условий фильтрации, что повышает читаемость кода:

const temperatures = [12, 15, 22, 28, 30, 36, 18, 24];

// Функция для проверки, является ли температура комфортной
function isComfortable(temp) {
return temp >= 20 && temp <= 26;
}

const comfortableTemps = temperatures.filter(isComfortable);
console.log(comfortableTemps); // [22, 24]

Для фильтрации по множеству диапазонов удобно использовать функции с параметрами:

const ages = [5, 12, 18, 24, 32, 45, 60, 75, 88];

function inAgeRange(min, max) {
return function(age) {
return age >= min && age <= max;
}
}

const children = ages.filter(inAgeRange(0, 12)); // [5, 12]
const teenagers = ages.filter(inAgeRange(13, 19)); // [18]
const adults = ages.filter(inAgeRange(20, 65)); // [24, 32, 45, 60]
const seniors = ages.filter(inAgeRange(66, 100)); // [75, 88]

Особые случаи при фильтрации по числовым диапазонам:

Для диапазонов дат эффективно использовать сравнение временных меток:

const dates = [
new Date('2022-01-05'),
new Date('2022-02-10'),
new Date('2022-03-15'),
new Date('2022-04-20')
];

// Даты между 1 февраля и 1 апреля 2022
const filterStart = new Date('2022-02-01').getTime();
const filterEnd = new Date('2022-04-01').getTime();

const filteredDates = dates.filter(date => {
const timestamp = date.getTime();
return timestamp >= filterStart && timestamp <= filterEnd;
});

console.log(filteredDates); // [Date('2022-02-10'), Date('2022-03-15')]

Метод filter для поиска в массивах объектов

Массивы объектов — основа большинства приложений, а метод filter — идеальный инструмент для извлечения нужных объектов по их свойствам. При работе с массивами объектов фильтрация становится более мощной и гибкой. 🔍

Простой пример фильтрации объектов по одному свойству:

const users = [
{ id: 1, name: 'Alice', age: 25, active: true },
{ id: 2, name: 'Bob', age: 30, active: false },
{ id: 3, name: 'Charlie', age: 35, active: true },
{ id: 4, name: 'Dave', age: 40, active: false }
];

// Найти всех активных пользователей
const activeUsers = users.filter(user => user.active);
console.log(activeUsers); // [{ id: 1, name: 'Alice', ... }, { id: 3, name: 'Charlie', ... }]

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

// Найти активных пользователей старше 30 лет
const seniorActiveUsers = users.filter(user => user.active && user.age > 30);
console.log(seniorActiveUsers); // [{ id: 3, name: 'Charlie', ... }]

Для фильтрации по свойствам, которые могут отсутствовать, рекомендуется использовать проверку существования свойства:

const products = [
{ id: 1, name: 'Laptop', price: 1200, inStock: true },
{ id: 2, name: 'Phone', price: 800 }, // Нет свойства inStock
{ id: 3, name: 'Tablet', price: 500, inStock: false }
];

// Безопасная фильтрация по необязательному свойству
const availableProducts = products.filter(product => product.inStock === true);
console.log(availableProducts); // [{ id: 1, name: 'Laptop', ... }]

При работе со строковыми свойствами часто требуется поиск по частичному совпадению:

// Найти пользователей, чьи имена содержат букву 'a' (регистронезависимый поиск)
const usersWithA = users.filter(user => 
user.name.toLowerCase().includes('a')
);
console.log(usersWithA); // [{ id: 1, name: 'Alice', ... }, { id: 4, name: 'Dave', ... }]

Для более сложных условий фильтрации удобно выносить логику в отдельные функции:

// Функция для проверки, является ли пользователь подходящим кандидатом
function isEligibleCandidate(user) {
return user.age >= 25 && user.age <= 40 && user.active && user.skills?.includes('JavaScript');
}

const users = [
{ id: 1, name: 'Alice', age: 25, active: true, skills: ['HTML', 'CSS', 'JavaScript'] },
{ id: 2, name: 'Bob', age: 30, active: false, skills: ['Python', 'Django'] },
{ id: 3, name: 'Charlie', age: 35, active: true, skills: ['JavaScript', 'React'] }
];

const candidates = users.filter(isEligibleCandidate);
console.log(candidates); // [{ id: 1, name: 'Alice', ... }, { id: 3, name: 'Charlie', ... }]

Практические советы по работе с фильтрацией объектов:

• Всегда проверяйте существование свойств объектов перед их использованием (или применяйте опциональную цепочку ?. в современных средах)
• Для фильтрации по вложенным свойствам используйте точечную нотацию или деструктуризацию
• При фильтрации по нескольким критериям разделяйте логику на отдельные функции для лучшей читаемости
• Используйте метод Object.keys() или Object.entries() для фильтрации по динамическим свойствам
• Для больших наборов данных рассмотрите возможность использования индексов или предварительной обработки данных для оптимизации

Пример фильтрации по вложенным свойствам:

const employees = [
{ id: 1, name: 'Alice', department: { id: 101, name: 'Engineering' } },
{ id: 2, name: 'Bob', department: { id: 102, name: 'Marketing' } },
{ id: 3, name: 'Charlie', department: { id: 101, name: 'Engineering' } }
];

// Найти всех сотрудников из инженерного отдела
const engineers = employees.filter(emp => emp.department?.name === 'Engineering');
console.log(engineers); // [{ id: 1, ... }, { id: 3, ... }]

Комбинированные способы фильтрации сложных структур данных

Реальные проекты часто требуют сложных стратегий фильтрации, объединяющих несколько техник. Метод filter для поиска в массиве можно комбинировать с другими методами массивов и функциями высшего порядка для создания мощных решений. 🧩

Рассмотрим комбинацию filter с map для трансформации отфильтрованных данных:

const transactions = [
{ id: 1, amount: 100, status: 'completed', user: { id: 10, name: 'Alice' } },
{ id: 2, amount: 200, status: 'pending', user: { id: 11, name: 'Bob' } },
{ id: 3, amount: 300, status: 'completed', user: { id: 10, name: 'Alice' } },
{ id: 4, amount: 400, status: 'failed', user: { id: 12, name: 'Charlie' } }
];

// Получить суммы всех успешных транзакций пользователя Alice
const aliceCompletedAmounts = transactions
.filter(tx => tx.status === 'completed' && tx.user.name === 'Alice')
.map(tx => tx.amount);

console.log(aliceCompletedAmounts); // [100, 300]

Для агрегации результатов фильтрации эффективно использовать метод reduce:

// Получить общую сумму успешных транзакций пользователя Alice
const aliceTotalAmount = transactions
.filter(tx => tx.status === 'completed' && tx.user.name === 'Alice')
.reduce((total, tx) => total + tx.amount, 0);

console.log(aliceTotalAmount); // 400

Для фильтрации с группировкой можно использовать reduce:

// Сгруппировать транзакции по статусу
const transactionsByStatus = transactions.reduce((grouped, tx) => {
if (!grouped[tx.status]) {
grouped[tx.status] = [];
}
grouped[tx.status].push(tx);
return grouped;
}, {});

console.log(transactionsByStatus.completed); // [{ id: 1, ... }, { id: 3, ... }]
console.log(transactionsByStatus.pending); // [{ id: 2, ... }]
console.log(transactionsByStatus.failed); // [{ id: 4, ... }]

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

// Создаем фабрику фильтров
function createFilter(condition) {
return function(array) {
return array.filter(condition);
};
}

// Создаем отдельные фильтры
const isCompleted = tx => tx.status === 'completed';
const isLargeAmount = tx => tx.amount > 200;
const isAlice = tx => tx.user.name === 'Alice';

// Применяем фильтры по очереди
const completedFilter = createFilter(isCompleted);
const completedTransactions = completedFilter(transactions);

const largeAmountFilter = createFilter(isLargeAmount);
const largeCompletedTransactions = largeAmountFilter(completedTransactions);

console.log(largeCompletedTransactions); // [{ id: 3, amount: 300, ... }]

// Или комбинируем условия для одного прохода
const complexFilter = createFilter(tx => 
isCompleted(tx) && isLargeAmount(tx) && isAlice(tx)
);
const result = complexFilter(transactions);
console.log(result); // [{ id: 3, amount: 300, ... }]

Для фильтрации по динамическим критериям можно использовать объект с параметрами:

function filterProducts(products, filters) {
return products.filter(product => {
// Проверяем каждое условие фильтрации
return Object.entries(filters).every(([key, value]) => {
// Обрабатываем диапазоны цен
if (key === 'minPrice') return product.price >= value;
if (key === 'maxPrice') return product.price <= value;

// Обрабатываем массивы допустимых значений
if (Array.isArray(value)) {
return value.includes(product[key]);
}

// Обрабатываем точные совпадения
return product[key] === value;
});
});
}

const products = [
{ id: 1, name: 'Laptop', category: 'Electronics', price: 1200, inStock: true },
{ id: 2, name: 'Phone', category: 'Electronics', price: 800, inStock: true },
{ id: 3, name: 'Chair', category: 'Furniture', price: 100, inStock: false },
{ id: 4, name: 'Table', category: 'Furniture', price: 300, inStock: true }
];

// Применяем динамические фильтры
const filteredProducts = filterProducts(products, {
category: ['Electronics', 'Furniture'],
minPrice: 200,
maxPrice: 1000,
inStock: true
});

console.log(filteredProducts); // [{ id: 2, name: 'Phone', ... }, { id: 4, name: 'Table', ... }]

Продвинутые техники фильтрации сложных структур:

• Используйте метод some() и every() для проверки массивов внутри объектов
• Применяйте замыкания для создания фильтров с параметрами
• Комбинируйте filter() с sort() для получения отсортированных результатов
• Используйте мемоизацию для кэширования результатов частых фильтраций
• Рассмотрите возможность параллельной фильтрации для больших наборов данных (с помощью веб-воркеров)

При разработке сложных фильтров помните о производительности. Объединяйте условия в одном вызове filter() вместо цепочки нескольких вызовов. Это снижает количество итераций по массиву и улучшает читаемость кода.

Метод filter() — один из самых мощных инструментов JavaScript для работы с данными. Овладев пятью способами фильтрации, вы значительно упростите обработку массивов в своих проектах. Помните главное правило эффективной фильтрации: сначала определите точные критерии отбора, затем выберите подходящую технику реализации. Такой подход позволит вам писать более чистый, поддерживаемый код и экономить ценные ресурсы производительности. Экспериментируйте с комбинациями filter() и других методов массивов — это откроет новые возможности для элегантного решения сложных задач.

Читайте также

• Верстка сайта по макету: превращаем дизайн в рабочий код
• JavaScript: эффективный поиск в массивах с методом find()
• Семантический HTML: как превратить div-soup в структурированный код
• Создание выпадающих списков на CSS без JavaScript: пошаговая инструкция
• Топ-10 технологий веб-разработки: с чего начать путь в IT
• Как найти работу frontend junior без опыта
• Как создать прибыльный онлайн-курс: 7 шагов для экспертов
• Создание темы в Google: персонализация интерфейса для комфорта
• Full-stack разработка: путь от новичка до создателя веб-приложений
• HTML: основы создания веб-сайта для учебного проекта – пошаговое руководство