Следующая операция называется "фильтрация" и выполняется она в 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;
}

Дополнительные материалы

  1. Метод filter
Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Node, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →