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