Понятие "фильтрация" интуитивно понятно каждому человеку. Мы пьём фильтрованную воду и фильтруем то, что говорим. В программировании практически то же самое. Операция "фильтрация" по отношению к коллекции означает, что мы отбираем из неё только те элементы, которые удовлетворяют нужному условию. Типичная задача может выглядеть так — выбрать пользователей старше 10 лет:
const users = [
{ name: 'Igor', age: 19 },
{ name: 'Danil', age: 1 },
{ name: 'Vovan', age: 4 },
{ name: 'Matvey', age: 16 },
]
const result = []
for (const user of users) {
if (user.age > 10) {
result.push(user)
}
}
console.log(result)
// => [ { name: 'Igor', age: 19 }, { name: 'Matvey', age: 16 } ]
Фильтрация встречается так же часто, как отображение. Общая схема кода при фильтрации практически один в один как и в отображении, кроме пары ключевых моментов:
- Фильтрация возвращает коллекцию либо того же размера (если ничего не было отфильтровано), либо меньшего. Она может вернуть даже пустую коллекцию, если ни один из элементов не подошёл.
- Фильтрация всегда возвращает исходные элементы. Она никогда не делает отображение. Если на вход фильтрации поступил список пользователей, то список пользователей будет и на выходе.
Теперь посмотрим, как выглядит фильтрация при использовании метода filter()
:
const filteredUsers = users.filter(user => user.age > 10)
Функция, передаваемая в метод filter()
, должна быть предикатом. То есть её задача вернуть либо true
, либо false
для каждого элемента коллекции. Значение, которое возвращается, никак не используется — оно всего лишь говорит о том, включать ли текущий элемент в итоговый массив или нет. Новички часто делают ошибку на этом этапе и начинают возвращать из фильтра то, что они бы хотели увидеть в результирующем массиве (для этого надо применять метод map()
).
Реализация
Напишем свою собственную функцию myFilter
, работающую аналогично методу массива filter
:
const myFilter = (collection, callback) => {
const result = []
for (const item of collection) {
// Предикат используется только для проверки
// Внутрь callback по очереди передается каждый элемент коллекции collection
if (callback(item)) {
// В результат всегда добавляется элемент исходной коллекции
result.push(item)
}
}
return result
}
const users = [
{ name: 'Igor', age: 19 },
{ name: 'Danil', age: 1 },
{ name: 'Vovan', age: 4 },
{ name: 'Matvey', age: 16 },
]
const filteredUsers = myFilter(users, user => user.age > 10)
console.log(filteredUsers)
// [
// { name: 'Igor', age: 19 },
// { name: 'Matvey', age: 16 },
// ]
Дополнительные материалы
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.