Оригинальный автор: Сухджиндер Арора
Переводчик: UC International R&D Джоти
Спереди написано: Добро пожаловать в официальный аккаунт «UC International Technology», мы предоставим вам качественные технические статьи, связанные с клиентом, сервером, алгоритмом, тестированием, данными, интерфейсом и т. д., не ограничиваясь оригинальностью и перевод.
Эта статья даст вам представление о том, что такое функции высшего порядка и как их использовать в JavaScript.
Если вы изучаете JavaScript, вы, вероятно, встречали термин функции высшего порядка. Хотя это звучит сложно, на самом деле это не сложно.
Что делает JavaScript подходящим для функционального программирования, так это то, что он принимает функции более высокого порядка.
Функции высшего порядка широко используются в JavaScript. Если вы какое-то время программировали на JavaScript, вы, вероятно, использовали их по незнанию.
Чтобы полностью понять эту концепцию, нужно сначала понять функциональное программирование и концепцию функций первого класса.
Проще говоря, функционал — это форма программирования, в которой вы передаете функции в качестве аргументов другим функциям и возвращаете их как значения. В функциональном программировании мы думаем и программируем с точки зрения функций.
JavaScript, Haskell, Clojure, Scala и Erlang — это языки, которые частично реализуют функциональное программирование.
Если вы изучаете JavaScript, вы, вероятно, слышали, что JavaScript относится к функциям как к гражданам первого класса. Это потому, что в JavaScript и других языках функционального программирования функции являются объектами.
В JavaScript функции — это особый тип объекта. Они являются функциональными объектами. Например:
Чтобы доказать, что функции являются объектами в JavaScript, мы можем сделать это:
Примечание. Хотя это совершенно верно для JavaScript, это считается вредной практикой. Вы не должны добавлять случайные свойства к объектам функций, если вам нужно, используйте объекты.
В JavaScript все, что вы можете делать с другими типами (такими как объекты, строки или числа), можно делать с помощью функций. Вы можете передавать их в качестве аргументов другим функциям (функции обратного вызова), назначать их переменным и передавать их и т. д. Вот почему функции в JavaScript называются функциями первого класса.
Мы можем назначать функции переменным в JavaScript. Например:
Мы также можем передать их. Например:
Мы можем передавать функции в качестве параметров другим функциям. Например:
Теперь, когда мы знаем, что такое функция первого класса, давайте начнем изучать функции высшего порядка в JavaScript~
Функции высшего порядка — это функции, которые работают с другими функциями, либо принимая их в качестве аргументов, либо возвращая их. Проще говоря, функция высшего порядка — это функция, которая получает функцию в качестве аргумента или возвращает функцию в качестве вывода.
Например, Array.prototype.map, Array.prototype.filter и Array.prototype.reduce — это некоторые из функций высшего порядка, встроенных в язык.
Давайте рассмотрим несколько примеров встроенных функций высшего порядка и посмотрим, как они сравниваются с решениями, не использующими функции высшего порядка.
Array.prototype.map
Метод map() создает новый массив, вызывая функцию обратного вызова для каждого элемента входного массива.
Метод map() будет принимать каждое возвращаемое значение из функции обратного вызова и создавать новый массив с этими значениями.
Функция обратного вызова, переданная методу map(), принимает 3 параметра: элемент, индекс и массив.
Давайте рассмотрим несколько примеров:
пример 1:
Предположим, у нас есть массив чисел, и мы хотим создать новый массив, содержащий удвоенное значение каждого значения в первом массиве. Давайте посмотрим, как можно решить проблему с функциями высшего порядка и без них.
Не используйте функции высшего порядка
Используйте карту функции высшего порядка
Использование синтаксиса стрелочной функции будет короче:
Пример 2:
Предположим, у нас есть массив, содержащий годы рождения разных людей, и мы хотим создать массив, содержащий их возраст. Например:
Не используйте функции высшего порядка
Используйте функции высшего порядка
Array.prototype.filter
Метод filter() создает новый массив, содержащий все элементы, проверенные функцией обратного вызова. Функция обратного вызова, переданная методу filter(), принимает 3 параметра: элемент, индекс и массив.
Давайте посмотрим несколько примеров:
пример 1:
Предположим, у нас есть массив объектов, содержащих свойства name и age. Мы хотим создать массив, содержащий только взрослых (возраст больше или равен 18).
Не используйте функции высшего порядка
Используйте функции высшего порядка
Array.prototype.reduce
Метод сокращения выполняет функцию обратного вызова для каждого элемента вызывающего массива, в конечном итоге создавая одно значение и возвращая его. Метод редукции принимает два параметра: 1) функцию редуктора (обратный вызов), 2) необязательное начальное значение.
Функция редуктора (обратный вызов) принимает четыре параметра: аккумулятор, текущее значение, текущий индекс, исходный массив.
Если предоставлено значение initialValue, аккумулятор будет равен initialValue, а currentValue будет равен первому элементу в массиве.
Если начальное значение не указано, аккумулятор будет равен первому элементу массива, а текущее значение будет равно второму элементу массива.
пример 1:
Предположим, мы хотим суммировать массив чисел:
Используйте функцию высшего порядка уменьшить
Каждый раз, когда функция редуктора вызывается для значения в массиве, аккумулятор сохраняет результат, возвращенный предыдущей операцией функции редуктора, и устанавливает currentValue в текущее значение массива. Наконец, сохраните результат в переменной суммы.
Мы также можем предоставить ему начальное значение:
Не используйте функции высшего порядка
可以看到使用高阶函数使我们的代码更清晰简洁。До сих пор мы видели различные функции более высокого порядка, встроенные в язык. Теперь давайте создадим нашу собственную функцию высшего порядка.
Предположим, что в JavaScript нет собственного метода карты. Мы можем построить его сами, создав свои собственные функции более высокого порядка.
Предположим, у нас есть массив строк, и мы хотим преобразовать его в массив целых чисел, где каждый элемент представляет длину строк в исходном массиве.
В приведенном выше примере мы создали функцию более высокого порядка mapForEach, которая принимает массив и функцию обратного вызова fn. Он перебирает входящий массив и вызывает функцию обратного вызова fn в методе newArray.push на каждой итерации.
Функция обратного вызова fn получает текущий элемент массива и возвращает длину этого элемента, которая хранится в newArray. После завершения цикла for возвращается newArray и присваивается lenArray.
Мы познакомились с функциями высшего порядка и некоторыми встроенными функциями высшего порядка, а также научились создавать собственные функции высшего порядка.
Короче говоря, функция высшего порядка — это функция, которая может принимать функцию в качестве аргумента и даже возвращать функцию. Это как обычная функция, но с дополнительной возможностью получать и возвращать другие функции, а именно параметры и выходные данные.
выше. Если вы нашли эту статью полезной, пожалуйста, поставьте мне лайк~👏
Английский оригинал:
https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad
Хорошая рекомендация статьи:HTTP/3 уже здесь, чего вы ждете? Узнайте сейчас(https://tickets.WeChat.QQ.com/Yes/zh5GJ B_LJ MM madgo6_TY HJ's A)
———————————————————————————————————
«UC International Technology» стремится делиться с вами высококачественными техническими статьями.
Добро пожаловать в WeChat search UC International Technology Подпишитесь на нашу публичную учетную запись
Или поделитесь статьей с друзьями