Рубрики
Без рубрики

Быстрый введение в функции высшего порядка в JavaScript

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

Функции высшего порядка

Функция, которая принимает и/или возвращает другую функцию, называется Функция высшего порядка Отказ

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

С функциями в JavaScript, вы можете

  • Хранить их как переменные
  • Использовать их в массивах
  • Назначьте их как свойства объекта (методы)
  • Пройти их как аргументы
  • Вернуть их из других функций

Как и любой другой кусок данных Отказ Это ключ здесь.

Функции действуют на данные

Строки – данные

sayHi = (name) => `Hi, ${name}!`;
result = sayHi('User');

console.log(result); // 'Hi, User!'

Числа – данные

double = (x) => x * 2;
result = double(4);

console.log(result); // 8

Логины – это данные

getClearance = (allowed) => (allowed ? 'Access granted' : 'Access denied');

result1 = getClearance(true);
result2 = getClearance(false);

console.log(result1); // 'Access granted'
console.log(result2); // 'Access denied'

Объекты являются данными

getFirstName = (obj) => obj.firstName;

result = getFirstName({
  firstName: 'Yazeed'
});

console.log(result); // 'Yazeed'

Массивы – это данные

len = (array) => array.length;
result = len([1, 2, 3]);

console.log(result); // 3

Эти 5 типов есть Первоклассные граждане на каждом основном языке.

Что делает их первоклассным? Вы можете передавать их, хранить их в переменных и массивах, используйте их в качестве входных данных для расчетов. Вы можете использовать их как Любой часть данных Отказ

Функции могут быть данными тоже

Функционирует как аргументы

isEven = (num) => num % 2 === 0;
result = [1, 2, 3, 4].filter(isEven);

console.log(result); // [2, 4]

Посмотрите, как Фильтр использует Iseven решить, какие номера сохраняют? даже , Функция был параметр к другой функции Отказ

Это называется Фильтр Для каждого номера и использует возвращенное значение правда или ложь определить, следует ли удерживать номер или отбрасывать.

Возвращая функции

add = (x) => (y) => x + y;

Добавить требует двух параметров, но не все сразу. Это функция, спрашивая только х , это возвращает функцию, спрашиваемую только y Отказ

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

Вы все еще можете поставлять х и y немедленно, если хотите, с двойным вызовом

result = add(10)(20);

console.log(result); // 30

Или х Теперь и y потом:

add10 = add(10);
result = add10(20);

console.log(result); // 30

Давайте перемотать этот последний пример. Add10 является результатом звонка Добавить с одним параметром. Попробуйте войти в систему в консоли.

Add10 это функция, которая занимает y и возвращает x + y Отказ После того, как вы поставляете y Это спешит рассчитать и вернуть ваш конечный результат.

Большая повторное использование

Вероятно, наибольшее преимущество HOFS является большая повторное использование. Без них методы премьера JavaScript – карта , Фильтр и Уменьшить – не будет существовать!

Вот список пользователей. Мы собираемся сделать некоторые расчеты с их информацией.

users = [
  {
    name: 'Yazeed',
    age: 25
  },
  {
    name: 'Sam',
    age: 30
  },
  {
    name: 'Bill',
    age: 20
  }
];

карта

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

getName = (user) => user.name;
usernames = [];

for (let i = 0; i < users.length; i++) {
  const name = getName(users[i]);

  usernames.push(name);
}

console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Или мы могли бы сделать это!

usernames = users.map(getName);

console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Фильтр

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

startsWithB = (string) => string.toLowerCase().startsWith('b');

namesStartingWithB = [];

for (let i = 0; i < users.length; i++) {
  if (startsWithB(users[i].name)) {
    namesStartingWithB.push(users[i]);
  }
}

console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

Или мы могли бы сделать это!

namesStartingWithB = users.filter((user) => startsWithB(user.name));

console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

Уменьшать

Да, уменьшите тоже … Не могу сделать много прохладных вещей без функций высшего порядка !! ?

total = 0;

for (let i = 0; i < users.length; i++) {
  total += users[i].age;
}

console.log(total);
// 75

Как это?

totalAge = users.reduce((total, user) => user.age + total, 0);

console.log(totalAge);
// 75

Резюме

  • Строки, номера, лолки, массивы и объекты могут храниться в виде переменных, массивов и свойств или методов.
  • JavaScript обрабатывает функции так же.
  • Это позволяет функциям, которые работают на других функциях: Функции высшего порядка Отказ
  • Карта, фильтр и уменьшение представляют собой простые примеры – и сделать общие шаблоны, такие как преобразование, поиск, и суммирование списков намного проще!

Я в Twitter Если вы хотите поговорить. До скорого!

Береги себя, Yazeed bzadough yazeedb.com

Оригинал: “https://www.freecodecamp.org/news/a-quick-intro-to-higher-order-functions-in-javascript-1a014f89c6b/”

Читайте ещё по теме: