Упростите программирование с помощью функционального программирования
Функции высшего порядка, пожалуй, одна из лучших вещей, которые когда-либо происходили в языке JavaScript. Они широко используются не зря.
Если вы не знаете, что такое функция высшего порядка, это просто функции, которые принимают другие функции в качестве аргументов, или функции, которые возвращают функцию в качестве своего результата.
Когда я был новичком в JavaScript, мне потребовалось некоторое время, чтобы понять, что они из себя представляют, поэтому, если вы находитесь в этом положении, то, надеюсь, после прохождения этого поста у вас будет более четкое представление о них.
С учетом сказанного, вот пять примеров функций высшего порядка в JavaScript для лучшего понимания.
1. .map, .forEach и т. Д.
Если вы использовали JavaScript хотя бы день, скорее всего, вы уже работали с функциями высшего порядка с помощью собственных методов массива JavaScript, таких как .map.
Приведенный ниже фрагмент проходит по массиву и вызывает функцию для каждого элемента, пока не будет достигнут последний элемент. Возможность принимать функцию, которую он может вызывать, делает ее функцией высшего порядка:
2. Использование функций высшего порядка для поддержки нескольких вариантов операции.
Иногда мы решаем создать функцию более высокого порядка, чтобы мы могли использовать ее для создания большего количества вариантов желаемой операции.
В приведенном ниже примере базовая функция utilizePrefixer - это функция высшего порядка, которая возвращает функцию, которая принимает word в качестве аргумента и применяет префикс к возвращаемому значению.
3. Смена контроля
Всякий раз, когда вы находитесь в ситуации, когда вам нужно реорганизовать кучу кода, который указывает на одну функцию, вы можете создать расширенную функцию, которая может изменить направление, в котором проходит ваш код.
Я собираюсь скопировать и вставить пример из более ранней публикации, потому что это хороший пример, чтобы донести эту мысль:
На моей предыдущей работе мы использовали react-toastify для отображения уведомлений. Мы использовали его везде. Кроме того, они также делают отличные аварийные выходы для быстрых решений UX в последнюю минуту: Как мы должны справиться с этой ошибкой? Просто покажите всплывающее уведомление! Выполнено.
Однако мы начали замечать, когда приложение стало больше, и уровень сложности подкрался к нам, наши тост-уведомления становились слишком частыми. Это нормально, но у нас не было способа предотвратить дублирование. Это означало, что некоторые всплывающие уведомления отображались на экране несколько раз, даже если они были точно такими же, как и тост над ним.
В итоге мы использовали API, который предоставляет библиотека для удаления активных всплывающих уведомлений по идентификатору с использованием toast.dismiss().
Чтобы объяснить предстоящие части, вероятно, будет хорошей идеей показать файл, из которого мы импортировали тосты, прежде чем продолжить:
А теперь потерпите, я знаю, что это может показаться не привлекательным, но обещаю, что через две минуты все станет лучше.
Это то, что у нас было в отдельном компоненте, чтобы проверить, был ли предыдущий тост уже на экране, и если он был, он попытается удалить этот тост и повторно отобразить новый тост.
Это работало нормально, однако в приложении были и другие тосты, которые нужно было изменить таким же образом. Нам пришлось просмотреть каждый файл, который отображает всплывающее уведомление, чтобы удалить дубликаты.
Когда мы подумали о просмотре каждого файла в 2019 году, мы сразу поняли, что это не решение. Поэтому мы просмотрели файл util/toast.js и изменили его, чтобы решить нашу проблему. Вот как это выглядело потом:
src/util/toast.js:
Вместо того, чтобы просматривать каждый файл, самым простым решением было создание функции высшего порядка. Это позволило нам поменять роли, поэтому вместо того, чтобы искать в файлах, тосты были направлены на нашу функцию более высокого порядка.
Таким образом, код в файлах не был изменен или изменен. Все по-прежнему функционировало как обычно, и мы получили возможность удалять повторяющиеся тосты, не отправляясь никуда писать ненужный код в конце. Это сэкономило время.
4. Составление
Функции высшего порядка начинают проявляться намного ярче, когда вы начинаете их составлять. Можно выбрать сочинение по многим причинам. В приведенном ниже примере мы составляем по той причине, что мы хотим предотвратить повторение цикла JavaScript над массивом лягушек для каждой .filter операции:
Это может избавить нас от необходимости писать такой повторяющийся код повсюду в нашем приложении:
5. Внутреннее состояние
Стоит упомянуть, что когда мы создаем функцию более высокого порядка, мы также можем создать некоторое локальное состояние внутри области видимости, и оно будет кэшироваться для будущих операций:
Заключение
На этом мы завершаем эту статью. Я надеюсь, что вы нашли это ценным и ждете большего в будущем!
