Понимание функций высшего порядка в JavaScript

Отличные особенности функций высшего порядка и проблемы с их производительностью по сравнению с простыми циклами for

В этой статье я расскажу о функциях высшего порядка в JavaScript. Статья будет разделена на следующие разделы.

Что такое функция высшего порядка
Сочетаемость
Функции высшего порядка с картой, фильтром, редуктором.
Проблемы с производительностью

Чтобы получить больше подобного контента, посетите https://betterfullstack.com

Что такое функция высшего порядка

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

Функции в JavaScript - это первоклассные граждане. Это означает, что они могут храниться в переменных или передаваться другим функциям в качестве аргументов. Их можно использовать как любое другое значение в JavaScript.

Функции высшего порядка на самом деле невероятно распространены в JavaScript - на самом деле, вы, вероятно, уже используете их, но можете не осознавать этого. Каждый раз, когда вы передаете функцию обратного вызова, это функция более высокого порядка в действии. Кроме того, использование замыкания также является шаблоном функции более высокого порядка, распространенным в JS. Замыкание всегда возвращает другую функцию, которая может быть выполнена позже.

Примеры

Функции, создающие новые функции:

Функции, изменяющие другие функции

Функции, обеспечивающие новые типы потока управления

Сочетаемость

Возможность компоновки - огромное преимущество, когда мы используем функции более высокого порядка. Мы можем разбить код на небольшую область, которую легко понять.

Давайте рассмотрим пример, чтобы найти пользователя мужского пола и взрослого.

Пример без функции высшего порядка:

Пример с функцией высшего порядка:

Вместо того, чтобы запутывать логику в большой цикл, она аккуратно скомпонована в концепции, которые нам интересны - определение пола, вычисление возраста. Мы можем применять их по очереди, чтобы получить желаемый результат.

Функции высшего порядка с картой, фильтром, редуктором.

Давайте рассмотрим несколько примеров встроенных функций высшего порядка в функциях JavaScript.

карта()

Метод map() создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

Синтаксис:

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

Пример:

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

фильтр()

Метод filter() создает новый массив со всеми элементами, которые проходят проверку, реализованную предоставленной функцией.

Синтаксис:

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

Пример:

Уменьшать()

Метод reduce() выполняет функцию редуктора (которую вы предоставляете) для каждого элемента массива, в результате чего получается одно выходное значение.

Синтаксис:

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

Примечание:

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

Пример:

Большинство разработчиков JavaScript, таких как я, путаются, когда пытаются использовать reduce().

Здесь я попытаюсь просто объяснить это о аккумуляторе, currentValue, currentIndex и массиве.

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
    return accumulator + currentValue;
});

Вот шаг:

Этот код будет выполнен 5 раз, поскольку длина массива равна пяти.

Поскольку начального значения нет, аккумулятор = 0 (первый элемент) и пропускаем первый элемент. currentValue = 1, currentIndex = 1, массив всегда [0,1,2,3,4]. Возвращаемое значение = 1.
аккумулятор = возвращаемое значение на шаге 1 = 1. currentValue = 2, currentIndex = 2, возвращаемое значение = аккумулятор на шаге 1 + currentValue = 3.
аккумулятор = возвращаемое значение на шаге 2 = 3. currentValue = 3, currentIndex = 3, возвращаемое значение = аккумулятор на шаге 2+ currentValue = 6.
аккумулятор = возвращаемое значение на шаге 3 = 6 . currentValue = 4, currentIndex = 4, возвращаемое значение = аккумулятор на шаге 3+ currentValue = 10.

Таким образом, окончательный результат будет 10.

Проблема с производительностью

Функции высшего порядка отлично подходят для написания понятного кода. К сожалению, за эту ясность приходится платить.

Давайте посмотрим на пример ниже.

Использование цикла for:

Используйте функцию высшего порядка:

В приведенном выше примере функция высшего порядка filter () перебирает наши значения и создает новый массив. Но создание нового массива несколько дорого.

Точно так же передача функции функциям более высокого порядка и разрешение этому методу обрабатывать итерацию массива для нас удобно и легко читается. Но вызовы функций в JavaScript обходятся дороже по сравнению с простыми телами цикла.

К счастью, большинство браузеров безумно быстрые. Неважно, написали ли вы красивое решение, которое занимает полмиллисекунды, или супероптимизированное решение, которое занимает десятую долю миллисекунды.

Резюме

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

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

Надеюсь, эта статья оказалась для вас полезной! Вы можете следить за мной на Medium. Я тоже в Твиттере. Не стесняйтесь оставлять любые вопросы в комментариях ниже. Буду рад помочь!