Filter Out the Fear: фильтрация массивов в JavaScript


filter()

Будучи начинающим разработчиком, я испытывал страх перед методом filter. Хотя метод filter может оказаться пугающим итератором массивов, после освоения метода filter я понял, насколько это мощный и полезный инструмент. Если вы тоже боитесь метода filter, читайте дальше, и позвольте мне помочь вам избавиться от страха!

Проще говоря

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

Давайте начнем с примера метода filter на примере простого массива чисел:

Для примера давайте удалим число 3 из этого массива с помощью метода filter.

В приведенном выше примере мы вызываем метод filter на нашем массиве чисел. Затем мы указываем, что для каждого числа в нашем массиве нужно вернуть все числа, которые не равны 3. Эта строка кода вернет следующий массив:

Upping the Ante Marge

Простой пример отлично помогает нам увидеть, как работает метод filter, но теперь давайте используем filter с большим набором данных.

Здесь у нас есть массив объектов. Точнее, это массив романов о Гарри Поттере. Каждый объект книги включает название, автора, общее количество страниц и номер серии.

Представим, что мы хотим прочитать 4-ю книгу из серии (которая также является моей любимой!), но не можем вспомнить название книги. Давайте воспользуемся методом filter, чтобы помочь нам:

Мы вызываем .filter на нашем массиве объектов книг о Гарри Поттере. Filter просмотрит каждый объект книги, проверит, не равен ли номер его серии 4. Если номер серии не равен 4, filter говорит: «See Ya!» и переходит к следующему объекту книги. Если номер серии равен 4, filter говорит: «Come aboard!» и сохраняет этот объект в массиве.

Это и есть отфильтрованный массив, который будет возвращен нам приведенным выше кодом:

У нас есть наш отфильтрованный массив с единственным объектом книги, номер серии которой равен 4, и так получилось, что это… «Кубок огня»!

Обычно мы присваиваем этому новому отфильтрованному массиву имя переменной, например, так:
Это позволяет нам получить доступ к отфильтрованному массиву там, где он может нам понадобиться. Мы увидим, как эта идея используется в нашем следующем примере.

Пойти по-крупному или пойти по магазинам

Предыдущие примеры были познавательными, но настало время посмотреть, как работает метод фильтрации на примере того, с чем мы все хорошо знакомы: фильтрация предметов одежды по категориям. Мы с моим партнером по проекту bootcamp недавно разработали приложение «Шкаф» с использованием React, которое позволяет пользователю фильтровать свой шкаф на основе категории одежды, т.е. верх, низ, обувь и т.д.

Здесь вы можете увидеть пример нашего элемента одежды на странице, а также объект элемента:

Используя выпадающее меню, пользователь может изменить, какие предметы будут показаны на странице в зависимости от выбранной категории одежды.

Когда пользователь выбирает определенную категорию из выпадающего меню, используется метод фильтрации, чтобы отобразить только предметы одежды этой выбранной категории.

Вот код, который делает эту закулисную магию:

  • Во-первых, мы устанавливаем наш новый отфильтрованный массив в переменную с именем «clothesToDisplay». Это позволяет нам использовать наш отфильтрованный массив для отображения на странице только одежды выбранной категории.

  • Далее мы вызываем filter на нашем исходном массиве одежды, который включает в себя все созданные нами объекты одежды.

  • Затем для каждого элемента в этом массиве одежды, если выбранная нами категория — «Все», мы хотим вернуть true. Это означает, что если не выбрана конкретная категория, мы вернем все элементы исходного массива.

  • Наконец, мы вернем только те элементы из нашего массива, категория которых совпадает с выбранной категорией.

*Важно использовать метод toLowerCase(), потому что мы используем оператор строгого равенства для сравнения категорий. Значение ключа категории нашего объекта одежды начинается со строчной буквы, но наши выпадающие опции категории начинаются с заглавной буквы. Мы должны вызвать метод toLowerCase, чтобы убедиться, что они абсолютно равны при сравнении.

Заключение:

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

Оцените статью
devanswers.ru
Добавить комментарий