Если вы изучаете JavaScript, вы, вероятно, сталкивались с термином «Функции высшего порядка». Проще говоря, функции высшего порядка — это функции, которые оперируют другими функциями. Они могут принимать функции в качестве аргументов или возвращать их в качестве вывода.
Принятие в JavaScript функций высшего порядка делает его идеальным для функционального программирования. Функциональное программирование — это парадигма программирования, в которой вы можете передавать функции в качестве параметров другим функциям, а также возвращать их в виде значений. В функциональном программировании мы думаем и программируем с точки зрения функций. JavaScript, Haskell, Clojure, Scala и Erlang — это лишь некоторые из языков, реализующих функциональное программирование.
JavaScript рассматривает функции как граждан первого класса. Это потому, что функции являются объектами. Мы можем добавлять свойства к функциям так же, как мы делаем это с объектами. Например:
function greeting() {
console.log('Hello World');
}
// We can add properties to functions like we do with objects
greeting.lang = 'English';
// Prints 'English'
console.log(greeting.lang);
В JavaScript вы можете делать с функциями все, что вы можете делать с другими типами, такими как объекты, строки или числа. Вы можете передавать их в качестве параметров другим функциям (обратным вызовам), назначать их переменным и передавать их другим пользователям. Вот почему функции в JavaScript известны как функции первого класса.
Теперь, когда мы знаем, что такое функции первого класса, давайте углубимся в функции высшего порядка в JavaScript.
Некоторые примеры встроенных функций высшего порядка включают в себя Ниже перечислены некоторые из множества встроенных функций высшего порядка:
- Array.prototype.map()
- Array.prototype.filter()
- Array.prototype.reduce()
- Array.prototype.forEach()
- EventTarget.addEventListener()
Чтобы лучше понять, вот некоторые дополнительные сведения о каждом из них:
1- Array.prototype.map(): эта функция высшего порядка создает новый массив, вызывая предоставленную функцию для каждого элемента в исходном массиве. Предоставленная функция может каким-то образом преобразовывать каждый элемент. Например, если у вас есть массив чисел и вы хотите удвоить каждое число, вы можете использовать map следующим образом:
const originalArray = [1, 2, 3]; const doubledArray = originalArray.map(num => num * 2); // doubledArray is now [2, 4, 6]
2- Array.prototype.filter():Эта функция высшего порядка создает новый массив, отфильтровывая элементы исходного массива на основе предоставленной функции. Предоставленная функция должна возвращать логическое значение, указывающее, следует ли сохранять элемент или нет. Например, если у вас есть массив чисел и вы хотите сохранить только четные числа, вы можете использовать filter следующим образом:
const originalArray = [1, 2, 3, 4, 5, 6]; const evenArray = originalArray.filter(num => num % 2 === 0); // evenArray is now [2, 4, 6]
3- Array.prototype.reduce(): эта функция высшего порядка «сводит» массив к одному значению, вызывая предоставленную функцию для каждого элемента и накапливая результат. Предоставленная функция должна принимать два аргумента: аккумулятор и текущий элемент, а также возвращать новое значение для аккумулятора. Например, если у вас есть массив чисел и вы хотите найти сумму всех чисел, вы можете использовать reduce следующим образом:
const originalArray = [1, 2, 3, 4, 5]; const sum = originalArray.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum is now 15
4-Array.prototype.forEach(): эта функция более высокого порядка вызывает предоставленную функцию для каждого элемента в массиве, но не создает новый массив, как это делают map или filter. Предоставленная функция может выполнять некоторую операцию над каждым элементом, но ничего не возвращает. Например, если у вас есть массив имен и вы хотите вывести каждое имя в консоль, вы можете использовать forEach следующим образом:
const names = ['Alice', 'Bob', 'Charlie']; names.forEach(name => console.log(name)); // this will log "Alice", "Bob", and "Charlie" to the console
5-EventTarget.addEventListener(): эта функция высшего порядка позволяет добавить прослушиватель событий к элементу, например к кнопке или форме ввода. Предоставленная функция вызывается всякий раз, когда в элементе происходит указанное событие, например нажатие кнопки или отправка формы. Например, если у вас есть кнопка с идентификатором «myButton» и вы хотите показывать предупреждение при нажатии на нее, вы можете использовать addEventListener следующим образом:
const button = document.getElementById('myButton');
button.addEventListener('click', () => alert('Button clicked!'));
// this will show an alert when the button is clicked
Создание нашей собственной функции высшего порядка
До этого момента мы видели различные функции высшего порядка, встроенные в язык. Теперь давайте создадим нашу собственную функцию высшего порядка. Для простоты давайте создадим функцию более высокого порядка, которая принимает массив чисел и функцию обратного вызова в качестве аргументов и возвращает новый массив, где каждый элемент является результатом применения функции обратного вызова к соответствующему элементу в исходном массиве. .
function mapArray(arr, callback) {
const result = [];
for (let i = 0; i < arr.length; i++) {
result.push(callback(arr[i]));
}
return result;
}
В приведенном выше коде мы определяем функцию с именем mapArray, которая принимает два аргумента: массив (arr) и функцию обратного вызова (callback). Внутри функции мы создаем пустой массив с именем result. Затем мы перебираем исходный массив arr, используя цикл for, и применяем функцию обратного вызова к каждому элементу, используя функцию callback. Результат каждого вызова функции помещается в массив result. Наконец, мы возвращаем массив result.
Давайте посмотрим на пример того, как мы можем использовать эту функцию более высокого порядка:
const numbers = [1, 2, 3, 4, 5];
function multiplyByTwo(num) {
return num * 2;
}
const doubledNumbers = mapArray(numbers, multiplyByTwo);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
В приведенном выше коде мы сначала определяем массив чисел с именем numbers. Затем мы определяем функцию обратного вызова с именем multiplyByTwo, которая принимает число в качестве аргумента и возвращает число, умноженное на 2. Затем мы вызываем функцию mapArray, передавая массив numbers и функцию multiplyByTwo в качестве аргументов. Результат вызова этой функции сохраняется в переменной doubledNumbers, которую мы затем записываем в консоль.
Вот и все! Мы только что создали собственную функцию высшего порядка в JavaScript. Возможности функций высшего порядка безграничны, и их освоение может сделать нас лучшими программистами.
Заключение
Таким образом, мы изучили концепцию функций высшего порядка и различные доступные встроенные функции высшего порядка. Кроме того, мы научились создавать собственные функции высшего порядка. Эти функции обладают уникальной возможностью получать и возвращать другие функции в качестве аргументов и выходных данных, что делает их мощным инструментом программирования. Если вы нашли эту статью полезной, поставьте лайк 👏, подпишитесь на меня в Medium и не стесняйтесь оставлять комментарии, если у вас есть какие-либо вопросы или проблемы. Спасибо за чтение!
