Быстрое введение в трубу () и составляющую () в JavaScript

Автор оригинала: FreeCodeCamp Community Member.

Функциональное программирование было довольно открытым в глаза. Этот пост, а посты, как это, – это попытка поделиться своими представлениями и перспективами, поскольку я потраченным новым функциональным программированием.

Рамда Был моей библиотекой FP FP из-за того, насколько легче она делает функциональное программирование в JavaScript. Я настоятельно рекомендую это.

Трубка

Концепция труба прост – это сочетает в себе N Функции. Это труба, протекающая влево-справа, вызывая каждую функцию с выходом последнего.

Давайте напишем функцию, которая возвращает чей-то Имя Отказ

getName = (person) => person.name;

getName({ name: 'Buckethead' });
// 'Buckethead'

Давайте напишем функцию, которая в верхних учебах строки.

uppercase = (string) => string.toUpperCase();

uppercase('Buckethead');
// 'BUCKETHEAD'

Так что если мы хотели получить и заглавить человек имя, мы могли бы сделать это:

name = getName({ name: 'Buckethead' });
uppercase(name);

// 'BUCKETHEAD'

Это нормально, но давайте устраним эту промежуточную переменную Имя Отказ

uppercase(getName({ name: 'Buckethead' }));

Лучше, но я не люблю это гнездование. Это может быть слишком многолюдно. Что, если мы хотим добавить функцию, которая получает первые 6 символов строки?

get6Characters = (string) => string.substring(0, 6);

get6Characters('Buckethead');
// 'Bucket'

В результате чего:

get6Characters(uppercase(getName({ name: 'Buckethead' })));

// 'BUCKET';

Давайте очень сумасшедшим и добавим функцию на обратную строку.

reverse = (string) =>
  string
    .split('')
    .reverse()
    .join('');

reverse('Buckethead');
// 'daehtekcuB'

Теперь у нас есть:

reverse(get6Characters(uppercase(getName({ name: 'Buckethead' }))));
// 'TEKCUB'

Это может получить немного … много.

Труба к спасению!

Вместо шутки функций внутри функций или создания куча промежуточных переменных, давайте труба все вещи!

pipe(
  getName,
  uppercase,
  get6Characters,
  reverse
)({ name: 'Buckethead' });
// 'TEKCUB'

Чистое искусство Это как список тодо!

Давайте пройдемся через это.

Для демонстрации, я буду использовать труба Реализация от одного из Эрик Эллиотт ‘s Функциональные программированные статьи Отказ

pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);

Я люблю этот маленький одноклассник.

Использование Отдых Параметры, Смотрите мою статью о том, что мы можем трубить N Функции. Каждая функция принимает выход предыдущего, и это все уменьшен ? до единого значения.

И вы можете использовать его так же, как мы сделали выше.

pipe(
  getName,
  uppercase,
  get6Characters,
  reverse
)({ name: 'Buckethead' });
// 'TEKCUB'

Я буду расширяться труба И добавьте некоторые операторы отладчика, и мы перейдем к линии по линии.

pipe = (...functions) => (value) => {
  debugger;

  return functions.reduce((currentValue, currentFunction) => {
    debugger;

    return currentFunction(currentValue);
  }, value);
};

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

Проверьте локальные переменные. Функции это массив 4 функций, а ценность это {Название: «Beashethead»} Отказ

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

На следующем отладчике мы внутри Уменьшить Отказ Это где CurrentValue передается на Текущая функция и вернулся.

Мы видим результат «Beashethead» потому что Текущая функция Возвращает .name Свойство любого объекта. Это будет возвращено в Уменьшить , что означает, что это становится новым CurrentValue в следующий раз. Давайте ударим следующий отладчик и посмотрите.

Сейчас CurrentValue это «Beashethead» Потому что это то, что вернулось в прошлый раз. Текущая функция это Прописные буквы Итак, «Beashethead» будет следующий CurrentValue Отказ

Та же идея, сброс «Beashethead» первые 6 символов и передайте их к следующей функции.

Обратный (‘. AEDI EMAS’)

И вы сделали!

Как насчет составляющих ()?

Это просто труба в другом направлении.

Так что, если вы хотели того же результата, что и наше труба Выше вы бы сделали обратное.

compose(
  reverse,
  get6Characters,
  uppercase,
  getName
)({ name: 'Buckethead' });

Обратите внимание, как getname последний в цепочке и Обратный сначала?

Вот быстрая реализация составить , опять вежливость волшебных Эрик Эллиотт , от Та же статья Отказ

compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x);

Я оставлю расширяю эту функцию с Отладчик S как упражнение для вас. Играйте с этим, используйте его, цените это. И самое главное, повеселиться!