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

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

Под функциями более высокого порядка Guido Schmitz может помочь вам выдержать игру JavaScript, сделав свой код более объявленным. То есть короткий, простой и читаемый. Функция более высокого порядка – это любая функция, которая возвращает функцию при выполнении, принимает функцию в виде одного или нескольких его аргументов,

Гвидо Шмице

Функции более высокого порядка могут помочь вам активизировать игру JavaScript, сделав свой код более объявленным. То есть короткий, простой и читаемый.

Функция более высокого порядка – это любая функция, которая возвращает функцию при выполнении, принимает функцию в виде одного или нескольких его аргументов или обоих. Если вы использовали какой-либо из Массив Методы, как карта или Фильтр или передал функцию обратного вызова в jQuery’s $ .get , вы уже работали с функциями более высокого порядка.

Когда вы используете Array.map , вы предоставляете функцию в качестве единственного аргумента, который он применяется к каждому элементу, содержащемуся в массиве.

var arr = [ 1, 2, 3 ];

var arrDoubled = arr.map(function(num) {
  return num * 2;
});

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

Функции более высокого порядка могут также вернуть функцию. Например, вы можете сделать функцию под названием Умножая Это принимает номер и возвращает функцию, которая умножает другое число, которое вы предоставляете по первому номеру. Вы можете использовать этот подход для создания Multipybytwo Функция, чтобы перейти к Array.map Отказ Это даст вам тот же результат, который вы видели выше.

function multiplyBy(num1) {
  return function(num2) {
    return num1 * num2;
  }
}

var multiplyByTwo = multiplyBy(2);

var arr = [ 1, 2, 3 ];

var arrDoubled = arr.map(multiplyByTwo);

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

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

Фильтр

Представьте себе запись куска кода, который принимает список людей, где вы хотите отфильтровать людей, которые равны или старше 18 лет.

Наш список выглядит как один ниже:

const people = [ { name: 'John Doe', age: 16 }, { name: 'Thomas Calls', age: 19 }, { name: 'Liam Smith', age: 20 }, { name: 'Jessy Pinkman', age: 18 },];

Давайте посмотрим на пример функции первого порядка, которая выбирает людей, которые находятся выше 18 лет. Я использую Функция стрелки Это часть стандарта Ecmascript или ES6 для коротких. Это просто более короткий способ определить функцию и позволяет пропустить функцию печати и возврата, а также в скобках, брекетах и точку с запятой.

const peopleAbove18 = (collection) => {  const results = [];   for (let i = 0; i < collection.length; i++) {    const person = collection[i];     if (person.age >= 18) {      results.push(person);    }  }
  return results;};

Теперь, что, если мы хотим выбрать всех людей, которые находятся в возрасте от 18 до 20 лет? Мы могли бы создать другую функцию.

const peopleBetween18And20 = (collection) => {  const results = [];   for (let i = 0; i < collection.length; i++) {    const person = collection[i];     if (person.age >= 18 && person.age <= 20) {      results.push(person);    }  }
  return results;};

Вы уже можете распознать много повторяющегося кода здесь. Это может быть абстрагировано в более обобщенное решение. Эти две функции имеют что-то общее. Они оба повторяют список и фильтруют его в данном состоянии.

Мы можем улучшить нашу предыдущую функцию, используя более декларативный подход, .Filter () Отказ

const peopleAbove18 = (collection) => {  return collection    .filter((person) => person.age >= 18);}

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

карта

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

const coffeeLovers = ['John Doe', 'Liam Smith', 'Jessy Pinkman'];

Императивный способ будет похоже на:

const addCoffeeLoverValue = (collection) => {  const results = [];   for (let i = 0; i < collection.length; i++) {    const person = collection[i];
    if (coffeeLovers.includes(person.name)) {      person.coffeeLover = true;    } else {      person.coffeeLover = false;    }     results.push(person);  }   return results;};

Мы могли бы использовать .карта () сделать это более декларативным.

const incrementAge = (collection) => {  return collection.map((person) => {    person.coffeeLover = coffeeLovers.includes(person.name);     return person;  });};

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

Уменьшать

Могу поспорить, вам понравится эта функция, когда вы знаете, когда и как его использовать. Прохладная вещь о .уменьшать () Состоят ли большинство функций выше могут быть сделаны с ним.

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

const sumAge = (collection) => {  let num = 0;   collection.forEach((person) => {    num += person.age;  });   return num;}

И декларативный подход, использующий .уменьшать () .

const sumAge = (collection) => collection.reduce((sum, person) => { return sum + person.age;}, 0);

Мы можем даже использовать .уменьшать () создать нашу собственную реализацию .карта () и .Filter () Отказ

const map = (collection, fn) => {  return collection.reduce((acc, item) => {    return acc.concat(fn(item));  }, []);}
const filter = (collection, fn) => {  return collection.reduce((acc, item) => {    if (fn(item)) {      return acc.concat(item);    }     return acc;  }, []);}

Это может быть трудно понять сначала. Но что .уменьшать () В основном начинается с коллекции и переменной с исходным значением. Затем вы повторяете наличие коллекции и добавления (или добавляете) значения в переменной.

Объединяя карту, фильтр и уменьшить

Отлично, что эти функции существуют. Но хорошая часть заключается в том, что они существуют на прототипе массива в JavaScript. Это означает, что эти функции могут быть использованы вместе! Это позволяет легко создавать многоразовые функции и уменьшить объем кода, который требуется для записи определенных функций.

Поэтому мы говорили об использовании .фильтр () отфильтровывать людей, которые равны или в возрасте до 18 лет. .карта () Чтобы добавить Coffeelurver Собственность и . воздать () Чтобы наконец создать сумму возраста каждого объединенного. Давайте напишите какой-нибудь код, который фактически сочетает в себе эти три шага.

const people = [ { name: 'John Doe', age: 16 }, { name: 'Thomas Calls', age: 19 }, { name: 'Liam Smith', age: 20 }, { name: 'Jessy Pinkman', age: 18 },];
const coffeeLovers = ['John Doe', 'Liam Smith', 'Jessy Pinkman'];
const ageAbove18 = (person) => person.age >= 18;const addCoffeeLoverProperty = (person) => { person.coffeeLover = coffeeLovers.includes(person.name);  return person;}
const ageReducer = (sum, person) => { return sum + person.age;}, 0);
const coffeeLoversAbove18 = people .filter(ageAbove18) .map(addCoffeeLoverProperty);
const totalAgeOfCoffeeLoversAbove18 = coffeeLoversAbove18 .reduce(ageReducer);
const totalAge = people .reduce(ageReducer);

Если вы сделаете это императивным способом, вы окажетесь, написав много повторяющихся кода.

Мышление создания функций с .map () , . воздать () и .Filter () улучшит качество кода, который вы напишете. Но это также добавляет много читаемости. Вам не нужно думать о том, что происходит внутри функции. Это легко понять.

Спасибо за прочтение!:)

Скажи привет Твиттер

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

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