Функции более высокого порядка в JavaScript – достичь новых высот в вашем коде JS

Автор оригинала: Dave Gray.

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

Давайте посмотрим на имя и рассмотрим, как мы говорим о вещах.

Мы копаем вниз в детали, но иногда мы хотим Высокий Уровень обзора вещей.

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

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

Так как мы можем определить функцию более высокого порядка?

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

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

Давайте посмотрим на пример функции более высокого порядка

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

const numbers = [1, 2, 3, 4, 5];

function addOne(array) {
  for (let i = 0; i < array.length; i++) {
    console.log(array[i] + 1);
  }
}

addOne(numbers);

Функция Addone () Принимает массив, добавляет один к каждому номеру в массиве и отображает его в консоли. Исходные значения остаются неизменными в массиве, но функция делает что-то для каждого значения.

Однако, используя то, что может быть наиболее распространенным функциями более высокого порядка, foreach () , мы можем упростить этот процесс:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => console.log(number + 1));

WHOA.

Мы абстрагировали определение функции и вызовите в исходном коде выше на одну строку!

Мы применяем foreach () на массив с именем «Числа. ” В начале есть анонимная функция foreach ()

С массивом по имени номера имеет смысл назвать каждый элемент массива «номер», хотя мы могли назвать его «элементом» или «эль» или даже «все, что».

Анонимная функция стрелки регистрирует значение номера + 1 на консоль.

Функция высшего порядка foreach () применяет функцию для каждого элемента массива.

Еще один пример функции высшего порядка

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

const numbers = [1, 2, 3, 4, 5];

function isOdd(array, oddArr = []) {
  for (let i = 0; i < array.length; i++) {
    if (array[i] % 2 !== 0) {
      oddArr.push(array[i]);
    }
  }
  return oddArr;
}

const oddArray = isOdd(numbers);
console.log(oddArray);

Функция Isodd () Принимает массив и имеет второй дополнительный параметр для массива. Если не предусмотрено, массив имеет значение по умолчанию пустой массив.

Функция проверяет каждое число в массиве, чтобы увидеть, если это нечетное число. Если число нечетное, он добавляет его в массив со второго параметра. После проверки всех номеров установлен массив со второго параметра.

Так Ага, Это много, чтобы отслеживать.

Если мы используем функцию высшего порядка, Фильтр () мы можем так сильно абстрагироваться:

const numbers = [1, 2, 3, 4, 5];

const oddArray = numbers.filter((number) => number % 2 !== 0);
console.log(oddArray);

ДА!

Простите меня за взволнованность, но это большое улучшение.

Мы начинаем с определения нового массива rasharyay Потому что применение Фильтр () создаст новый массив. Функция более высокого порядка вернет каждый элемент, который соответствует условиям, установленным в анонимной функции, который он получает. Анонимная функция снова применяется к каждому элементу в массиве чисел.

Так как мы на рулоне – еще один пример функции высшего порядка

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

Давайте посмотрим на другой пример …

Вернуться в нашу foreach () Пример, мы добавили один к каждому номеру в массиве и регистрируем каждое значение на консоль. Но как насчет создания нового массива с этими новыми значениями? Без функции более высокого порядка я мог сделать следующее:

const numbers = [1, 2, 3, 4, 5];

function addOneMore(array, newArr = []) {
  for (let i = 0; i < array.length; i++) {
    newArr.push(array[i] + 1);
  }
  return newArr;
}

const newArray = addOneMore(numbers);
console.log(newArray);

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

Мы это абстрагируем это с функцией высшего порядка, карта () :

const numbers = [1, 2, 3, 4, 5];

const newArray = numbers.map((number) => number + 1);
console.log(numbers);

Мы начинаем с определения NewArray, потому что карта () создает новый массив. Как foreach () , карта () Применяет анонимную функцию для каждого элемента массива чисел. Тем не менее, карта () Создает новый массив в процессе.

Только еще один пример

Что если мы хотели найти все значения в массиве номеров?

Без функции более высокого порядка я мог бы сделать это:

const numbers = [1, 2, 3, 4, 5];

function getTotalValue(array) {
  let total = 0;
  for (let i = 0; i < array.length; i++) {
    total += array[i];
  }
  return total;
}

const totalValue = getTotalValue(numbers);
console.log(totalValue);

Функция GetTotalValue. () Принимает массив, определяет общую переменную как равную нулю, и петля через массив при добавлении каждого элемента в общей переменной. Наконец, он возвращает общее количество.

С функцией высшего порядка Уменьшить () Этот процесс еще раз больше не может быть расстраивается:

const numbers = [1, 2, 3, 4, 5];

const totalValue = numbers.reduce((sum, number) => sum + number);
console.log(totalValue);

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

Первый параметр – это аккумулятор, а второй параметр – это элемент из массива чисел.

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

Заключение

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

У них есть возможность взять свой код JavaScript на новые высоты!

Я оставлю вас с учебником из моего канала YouTube, который применяет функции более высокого порядка для данных JSON.

Оригинал: “https://www.freecodecamp.org/news/higher-order-functions-in-javascript-examples/”