Использование метода массива JavaScript в React.js
В нашей нынешней культуре, где доминирует Instagram/TikTok, мы думаем о фотографических возможностях фильтров.
О, подожди, ты тоже так не думаешь? Вы думаете об аналоговых фотографических фильтрах? Мм, хм, ну, вот куда пошел мой мозг Gen-Z, когда я впервые узнал, как использовать метод массива .filter. Я помню, когда у меня был Tumblr, я использовал фильтр для удаления нежелательных цветов в .jpeg, чтобы соответствовать эстетике моего блога. И когда я перешел на использование Snapchat, я использовал фильтр для лица, чтобы удалить нежелательные прыщи на моем лице. Теперь я изо всех сил стараюсь использовать фильтр, когда впервые встречаю кого-то, потому что у меня сухое чувство юмора.
Поэтому, когда мы хотим использовать .filter для получения определенного значения из массива элементов в нашем коде, мы можем использовать аналогичный концептуальный подход.
Возьмите следующий массив:
const девиз = ["ты", "только", "жить", "однажды"];
Нас просят написать функцию, которая возвращает только слова длиной 4 буквы. Встроенный метод JavaScript, который мы можем использовать, — это Array.prototype.filter! Из MDN: Метод filter() создает «поверхностную копию части данного массива, отфильтрованную до тех элементов из данного массива, которые проходят тест, реализованный предоставленной функцией». Сам бы не сказал лучше.
Теперь напишем нашу функцию:
Const девиз = ["ты", "только", "жить", "однажды"];
Const notTheMotto = девиз.filter(word =› word.length ›= 4);
// ожидаемый результат; ["только", "вживую", "один раз"]
В приведенном выше примере мы возвращаем строки длиной 4 или более букв. Мы делаем это, пропуская параметр (слово) через проверку с помощью логического оператора (›=, больше или равно). Если параметр проходит проверку — значение функции обратного вызова в методе истинно — тогда эти значения будут выходными данными метода фильтрации.
Теперь рассмотрим более сложный пример. Недавно я научился использовать React, библиотеку JavaScript, для фронтенд-разработки. Есть действительно хорошие статьи о состоянии и бурении с опорой (по крайней мере, моим одноклассникам Крису и Анжеле), поэтому я буду использовать эти термины, не объясняя их полностью для краткости в этом блоге.
В любом случае, мы хотим создать кнопку удаления, которая нацелена на один элемент в списке, возвращая один и тот же список элементов в массиве:
Сначала мы должны установить состояние наших задач. Скорее всего, это уже объявлено и мы можем просто повторно использовать состояние для этой конкретной функции (ах, красота простоты в React):
*Важно отметить: TASKS, массив объектов, был импортирован из другого JS-файла.
Исходное состояние задач — это данные, переданные из TASKS. Мы хотим удалить конкретную задачу, так что это будет означать, что мы также хотим сохранить остальную часть массива задач. как нам это сделать? Во-первых, нам нужно написать код для события onClick, которое происходит там, где находится кнопка удаления.
В компоненте Task.js, который является дочерним компонентом App.js, я написал обработчик события onClick, в котором находится кнопка. Это событие запускает функцию обратного вызова deleteButton, которую я передал в качестве реквизита из App.js:
Здесь живет наш метод .filter! Мы хотим использовать setTasks, функцию установки, чтобы использовать метод .filter для массива задач.
- Объявите функцию. Я назвал его handleDelete.
- Передайте параметр через функцию. Мы делаем это так, что когда он передается в событие клика, цель передается через функцию. Для ясности я назвал свой параметр deleteTaskTest.
- Используйте setTasks, функцию установки. Это функция обратного вызова, которая устанавливает состояние переменной в состояние, отличное от исходного значения (TASKS).
- Примените метод .filter(). Мы добавляем .filter к переменной tasks, которая представляет собой массив.
- Мы передаем параметр task (единственное число для ясности) в функцию обратного вызова filter().
- Мы пишем операцию, которая проверяет значение ‘text’ (ключ с парным значением в массиве TASKS) со значением параметра deleteTaskTest. Мы используем оператор строгого неравенства, который проверяет, что два операнда не равны, и возвращает логический результат true. Это самая важная часть для понимания метода filter(); переданное значение (значение параметра из события клика), которое не равно парам ключ-значение в исходном массиве, не будет возвращено в копии массива, таким образом, исходный список задач отличается от того, который мы щелчок будет выводом в нашей консоли.
Знание метода filter() довольно изящно, верно?
