Функции высокого порядка в Javascript — это функции, обладающие одним или обоими из следующих признаков:
- Принимает другую функцию в качестве аргумента
- Возвращает другую функцию
К счастью для нас, Javascript поставляется со многими функциями высокого порядка, встроенными в язык. Ниже представлены некоторые из наиболее удобных и часто используемых функций высокого порядка.
для каждого()
Этот встроенный в язык метод будет перебирать массив элементов и выполнять функцию для каждого из этих элементов. Эта функция будет передана forEach() в качестве аргумента.
В этом примере мы создали массив фруктов и сохранили его в константе arrayFruits. Что важно в этом методе, так это то, что он работает только с массивами. Затем мы вызвали метод forEach() для массива и передали функцию обратного вызова в качестве аргумента. Работа функции обратного вызова состоит в том, чтобы взять каждый элемент массива и записать его в консоль Chrome. Это то, что вы видите в последних трех строках кода.
Ниже приведен еще один пример, но на этот раз с использованием чисел и умножением каждого отдельного числа на 3.
карта()
Этот метод очень похож на forEach() тем, что он перебирает массив, содержащий разные элементы, и принимает функцию в качестве аргумента. Затем функция будет выполняться для каждого элемента массива. Единственная разница между ними заключается в том, что map() создает совершенно новый массив. Это может показаться не очень важным, но если вы когда-нибудь начнете использовать React (библиотеку Javascript для создания пользовательского интерфейса), метод map() преобладает в React.
Еще раз создаем новый массив с числами. Поскольку map() возвращает новый массив, мы создали новую переменную для хранения этого нового массива. Затем мы зарегистрировали две переменные. В первом журнале мы видим исходный массив, а во втором журнале — новый массив, созданный методом map().
найти()
Что ж, название этого метода очень хорошо объясняет, в чем заключается его работа. Но если вы не можете догадаться, что она делает, она в основном находит первый элемент в массиве, который удовлетворяет условию, указанному в функции (также известной как функция обратного вызова). это будет считаться аргументом. Метод find() вернет этот элемент.
В приведенном выше коде мы используем ту же переменную, что и раньше, но на этот раз мы используем метод find() для перебора массива. В блоке кода функции обратного вызова мы указали условие. Условие состоит в том, чтобы вернуть первое число, для которого условие оценивается как истинное, другими словами, если число больше 20, верните его мне.
Этот метод может быть полезен, если вы ищете определенный элемент в массиве.
фильтр()
Затем у нас есть метод filter(), и его цель — вернуть новый массив с всеми элементами, которые передают условие внутри функции, которая передается в качестве аргумента. Этот метод имеет некоторое сходство с методом find().
И снова у нас есть наш старый, но надежный массив чисел. Мы использовали для него filter(), это вернет совершенно новый массив с элементами, для которых условие оценено как true. Сначала мы зарегистрировали исходный массив и вернули его неповрежденным. Затем мы записали нашу новую константу filteredArray, и результатом стал совершенно новый массив, но только с элементами, которые прошли наше условие. Подсказка: этот метод часто используется и в React.
уменьшать()
Этот метод используется не так часто, как предыдущие, но я думаю, что в некоторых ситуациях он может быть очень полезен. Вы можете использовать его, чтобы сложить все элементы вместе, если элементы имеют type number. Я думаю, что пример может сделать лучше, чем я объясняю это.
Как всегда, мы начинаем с объявления переменной, которая оценивается как массив. Затем мы вызываем метод reduce() для этого массива и передаем ему функцию обратного вызова. В отличие от предыдущих методов, которые ожидают по крайней мере один аргумент в функции обратного вызова, reduce() ожидает по крайней мере два. Первый аргумент — это accumulator, и его цель — служить контейнером для хранения накопленного значения каждой итерации. Если не указано, accumulator начинается со значения 0.
Второй аргумент в функции обратного вызова представляет каждое отдельное число в массиве. Внутри блока кода мы добавляем каждый элемент в аккумулятор. Позвольте мне рассказать вам, как reduce() творит чудеса.
В первой итерации аккумулятор имеет значение 12 (0 +12).
- 0 представляет начальное значение аккумулятора
- 12 представляет первый элемент массива, который затем добавляется в аккумулятор.
- теперь аккумулятор имеет значение 12
На второй итерации аккумулятор имеет значение 44 (12 + 32).
- 12 представляет текущее значение аккумулятора, полученное на первой итерации.
- 32 — второй элемент массива.
- аккумулятор теперь имеет значение 44
Этот процесс продолжается до тех пор, пока в массиве не останется элементов для итерации. Затем reduce() возвращает последнее значение аккумулятора.
Есть много других функций высокого порядка, которые поставляются из коробки в Javascript, если вы хотите узнать больше, вы можете нажать здесь.
Спасибо за чтение.
