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

JavaScript — это мощный язык, поддерживаемый большинством современных браузеров, и это отличный выбор для начинающих.

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

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

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

Рассмотрим следующий пример:

функциятрансформировать(фн) 





instagram viewer

{
позволять массив результатов = [];
возвращатьсяфункция (множество) {
для (позволять я = 0; я  resultArray.push (fn (массив [i]))
 }
возвращаться массив результатов
 }
}

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

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

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

константа функция1 = преобразование ((Икс) => Икс * 2)
консоль.log (функция1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

В приведенном выше блоке кода назначается анонимная функция, возвращаемая трансформировать функция постоянной переменной функция1. фн возвращает продукт из Икс который является заменой массив [я].

Код также передает массив в качестве параметра для функция1 а затем записывает результат в консоль. Более короткий способ написания:

консоль.log (преобразовать((Икс) => Икс * 2)([ 2, 3, 4, 5, 6 ]))

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

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

функцияфильтр и преобразование(fn, arrayToBeFiltered, условие) {
позволять отфильтрованный массив = [];
для (позволять я = 0; я < arrayToBeFiltered.length; я++) {
если (условие (arrayToBeFiltered[i])) {
позволять y = преобразование (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push(y)
 } еще {
 filteredArray.push(arrayToBeFiltered[i])
 }
 }
возвращаться фильтрованный массив
}

Этот блок кода определяет функцию, которая делает то, что вы могли подозревать — она проверяет элементы в массиве, которые удовлетворяют определенному условию, и преобразует их с помощью трансформировать() функция. Чтобы использовать эту функцию, вы делаете что-то вроде этого:

фильтр и преобразование ((Икс) => Икс * 2, [ 1, 2, 3, 4, 5 ], (х) => х % 20)

в отличие от трансформировать функция, фильтр и преобразование function принимает в качестве параметров две функции: фн и состояние. состояние Функция проверяет, является ли переданный параметр четным числом, и возвращает значение true. В противном случае возвращается ложь.

Если состояние принимает значение true (условие выполнено), только тогда трансформировать вызывается функция. Эта логика может пригодиться, если вы работаете с массивом и хотите преобразовать определенные элементы. Если вы запустите этот код в консоли браузера, вы должны получить следующий ответ:

[ 1, 4, 3, 8, 5 ]

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

Функция высшего порядка Array.map() в JavaScript

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

позволять массив = [ 1, 2, 3, 4, 5 ];
позволять преобразованный массив = массив. карта ((Икс) => Икс * 2);

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

[ 2, 4, 6, 8, 10 ]

массив.карта() принимает два параметра, первый параметр относится к самому элементу, а второй параметр относится к индексу элемента (позиции в массиве). Только с массив.карта() можно добиться тех же результатов, что и фильтр и преобразование функция. Вот как это сделать:

позволять массив = [ 1, 2, 3, 4, 5 ];
позволять преобразованный массив = массив. карта ((Икс) => Икс % 20? Икс * 2: Икс);

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

Со встроенным карта функции, вам удалось устранить необходимость в нескольких строках кода, что привело к более чистому коду и уменьшению вероятности появления ошибок.

Функция Array.filter() в JavaScript

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

функцияcheckFirstLetter(слово) {
позволять гласные = "эйоу"
если (гласные.включает(слово[0].toLowerCase())) {
возвращаться слово;
 } еще {
возвращаться;
 }
}
позволять слова = [ "Привет", "от", "тот", "дети", "из", "планета", "Земля" ];
позволять результат = слова.фильтр((Икс) => проверитьПервоеПисьмо (x))

Блок кода выше пересекает слова array и фильтрует все слова, первая буква которых является гласной. Когда вы запускаете код и регистрируете результат переменная, вы должны получить следующие результаты:

[ 'из', 'Земля' ];

Функция Array.reduce() в JavaScript

уменьшать() функция высшего порядка принимает два параметра. Первый параметр — функция редукции. Эта функция сокращения отвечает за объединение двух значений и возврат этого значения. Второй параметр является необязательным.

Он определяет начальное значение для передачи в функцию. Если вы хотите вернуть сумму всех элементов массива, вы можете сделать следующее:

позволять а = [ 1, 2, 3, 4, 5];
позволять сумма = 0;
для (позволять я = 0; я  сумма = сумма + а[я];
}
консоль.log(сумма);

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

позволять а = [ 1, 2, 3, 4, 5 ];
сумма = a.уменьшить ((в, н) => с + п);
консоль.log(сумма);

Блок кода выше намного чище по сравнению с предыдущим примером. В этом примере функция редукции принимает два параметра: с и н. с относится к текущему элементу, а н относится к следующему элементу массива.

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

Сила функций высшего порядка

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

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