Функция высшего порядка - это функция, которая либо * принимает функцию в качестве одного из своих параметров, либо * возвращает другую функцию. Почему вы захотите это сделать, станет более ясным, когда вы изучите логику функции высшего порядка. Итак, давайте посмотрим.
Вот список моих лучших руководств по веб-разработке.
Полное руководство по CSS-гибкости на Hashnode.
Ultimate CSS grid tutorial на Hashnode.
Функции высшего порядка .map, .filter и .reduce на Hashnode.
Подписывайтесь на меня в @ Twitter, Instagram и fb, чтобы никогда не пропустить премиальные статьи.
Когда я впервые услышал о функциях высшего порядка, я не мог понять, что это на самом деле означает и почему они так называются.
Вы, вероятно, уже знакомы с обычными функциями в JavaScript. Обычно они называются функциями первого порядка. Но обычно они никогда не принимают функцию в качестве одного из своих параметров и не возвращают другую функцию.
Но зачем нам вообще передавать или возвращать функцию из другой функции? На самом деле это может быть весьма полезно для написания компактного кода.
Функции высшего порядка часто используются в контексте стиля Функционального программирования. Стиль FP уходит корнями в математический анализ. (Или, точнее, лямбда-исчисление.)
Функциональный в F P относится не к функциям JavaScript, а к математическим.
Функции высшего порядка могут сократить ваш код, сделав его более похожим на математическую функцию. У этого есть несколько преимуществ: чистый код и просто потрясающее представление о вашем коде как о математическом уравнении.
Особенно тип кода, который вы бы написали, используя вместо этого циклы for.
Большинство циклов for, которые вы можете написать, выполняют относительно одни и те же задачи, с небольшими отличиями. Сопоставление значения с другим значением может пересекаться с логикой фильтрации значений на основе некоторого условия.
Разработчики языка JavaScript добавили несколько вспомогательных функций, которые охватывают большинство этих случаев. Если вы научитесь их использовать, вам, вероятно, никогда в жизни не придется писать еще один цикл for.
Array.map
Метод Array.map - одна из наиболее распространенных функций высшего порядка. Мы будем использовать это здесь в качестве примера. Но есть несколько других функций высшего порядка:. фильтр,. уменьшить и т. Д.
Метод Array.map принимает функцию для запуска для каждого элемента в массиве. Затем он возвращает измененную копию исходного массива.
Здесь я создал функцию add_one для перехода в функцию map:
Чтобы увидеть, как все это работает, сначала давайте определим начальный набор значений:
Теперь давайте создадим функцию, которая будет изменять значения.
Тело функции зависит от того, какие модификации вы хотите применить к каждому элементу массива.
В этом примере мы создадим функцию под названием add_one, которая просто добавляет 1 к значению. Это не функция высшего порядка, а просто помощник.
JavaScript уже предоставляет набор функций высокого порядка. Но почему бы не написать наши собственные, чтобы понять, как они работают?
Написание нашей собственной функции высшего порядка
Чтобы функция считалась функцией высшего порядка, ей необходимо либо принять функцию в качестве одного из своих параметров, либо вернуть функцию. Пока выполняется одно из этих условий, мы создаем функцию более высокого порядка.
Функция map будет работать с массивом. Он вернет копию этого массива с каждым элементом, измененным функцией add_one, которую мы написали ранее, которая будет передана как второй параметр.
Давайте напишем нашу собственную версию map, которая делает то же самое, что и Array.map.
Объяснение map() функции
Функция map принимает два параметра: произвольный массив значений и функцию, которую мы хотим применить к каждому элементу в массиве.
Сначала был создан массив copy, которому был присвоен литерал пустого массива: []. В этом массиве будет храниться измененная копия исходного массива, переданного в функцию.
Затем цикл for выполняет итерацию по массиву, который мы получили в качестве первого параметра.
После того, как все элементы будут скопированы и обработаны функцией add_one, они будут сохранены в массиве copy, который затем будет использоваться в качестве возвращаемого значения функции.
В качестве примечания: аккумулятор в другой функции высшего порядка Array.reduce служит той же цели, что и массив copy в этом примере.
Давайте попробуем в действии нашу функцию карты:
Вызов нашей пользовательской функции карты
Как видите, он делает то же самое, что и Array.map за кулисами. Давайте снова увеличим значения в возвращаемом массиве, на этот раз используя встроенный метод map:
Вызов функции Array.map
Эта операция настолько распространена, что была добавлена как собственный метод к объекту Array. Вместо того, чтобы писать свой собственный код, всегда пытайтесь выяснить, существует ли уже существующая функция.
Скорее всего, он имеет более чистую и более эффективную реализацию, чем то, что вы написали бы сами с помощью циклов for.
