Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Фильтрация (filter)

Понятие "фильтрация" интуитивно понятно каждому человеку. Мы пьём фильтрованную воду и фильтруем то, что говорим. В программировании практически то же самое. Операция "фильтрация" по отношению к коллекции означает, что мы отбираем из неё только те элементы, которые удовлетворяют нужному условию. Типичная задача может выглядеть так — выбрать пользователей старше 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 },
// ]

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

  1. Метод filter

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, даст возможность обращаться за помощью к менторам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».