Метод filter() в JavaScript - полезный метод, который просматривает массив и захватывает все элементы, которые являются истинными, в зависимости от предоставленного условия. filter() не изменяет исходный массив, для которого он вызывается. Будет создан новый массив, который будет заполнен содержимым исходного массива, истинным на основе функции обратного вызова. Я рассмотрю примеры того, как фильтровать информацию в JavaScript и React.
Написание функции фильтра против использования метода filter ()
Мы можем фильтровать массив без использования метода filter(), но нам придется написать гораздо больше кода. У нас есть такой набор фруктов:
let fruits = ['strawberry', 'banana', 'apple', 'blueberry', 'orange', 'grape']
Мы хотим, чтобы все фрукты длиннее пяти букв, и поместили их в новый массив. Без использования метода filter() мы можем создать функцию, которая принимает массив. Эта функция будет перебирать каждый элемент массива, используя цикл for, и проверять, длиннее ли этот элемент пяти букв. Если элемент длиннее пяти букв, он будет помещен в новый массив.
Эта функция вернула: ['strawberry', 'banana', 'blueberry', 'orange']
Метод filter() может сжать весь этот код в одну строку. Этот код намного чище и легче читается.
let filteredFruits = fruits.filter(fruit => fruit.length > 5)Использование filter () в приложении React
Метод filter() - лучший друг программистов для визуализации или получения определенных данных. Мы будем использовать filter(), чтобы захватить объект, удалить его из одного массива и добавить его в другой. У нас есть фрукты сверху, и когда вы нажимаете на фрукт в разделе фруктов, вы успешно съели фрукт. Мы хотим, чтобы фрукт, по которому щелкнули, был удален из массива фруктов и добавлен в массив съеденных фруктов.
Чтобы увидеть, как каждый компонент взаимодействует друг с другом, вы можете найти этот проект в репозитории GitHub здесь. Массив фруктов повторяется методом map() и создает компонент Fruit для каждого фрукта. При щелчке по фрукту этот фрукт удаляется из массива фруктов и добавляется в массив съеденных фруктов. Когда мы нажимаем на фрукт, он захватывает этот фруктовый объект и запускает функцию handleClick.
Эта handleClick функция принимает предыдущее состояние (prevState) и фильтрует его по объекту-фрукту, переданному в качестве аргумента (фрукту, на котором щелкнули). Если объект-фрукт не соответствует объекту-фрукту, который в настоящее время перебирается, фрукт помещается в новый фильтрованный массив. Массив фруктов в нашем состоянии теперь является этим новым фильтрованным массивом. Другими словами, фрукты, которые не были нажаты, остаются в массиве фруктов. Если объект Fruit в итерации действительно совпадает с фруктом, на который нажимают, он добавляется к массиву съеденных фруктов и отображается в разделе съеденных фруктов. …prevState.fruitsEaten представляет объекты в массиве съеденных фруктов до этого фрукта, по которому щелкнули в прошлом. fruit представляет этот последний фрукт, на который щелкнули, и добавляет его в конец массива съеденных фруктов.
