Эффективная композиция функций в JavaScript

JavaScriptJavaScriptBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28546{{"Эффективная композиция функций в JavaScript"}} javascript/data_types -.-> lab-28546{{"Эффективная композиция функций в JavaScript"}} javascript/arith_ops -.-> lab-28546{{"Эффективная композиция функций в JavaScript"}} javascript/comp_ops -.-> lab-28546{{"Эффективная композиция функций в JavaScript"}} javascript/higher_funcs -.-> lab-28546{{"Эффективная композиция функций в JavaScript"}} javascript/spread_rest -.-> lab-28546{{"Эффективная композиция функций в JavaScript"}} end

Композиция функций с использованием пайпов

Для начала практики программирования с использованием пайпов откройте Терминал/SSH и введите node.

Функция pipeFunctions выполняет композицию функций слева направо с использованием Array.prototype.reduce() и оператора расширения (...). Первая (самая левая) функция может принимать один или несколько аргументов, в то время как оставшиеся функции должны быть унарными.

const pipeFunctions = (...fns) =>
  fns.reduce(
    (f, g) =>
      (...args) =>
        g(f(...args))
  );

Вот пример того, как использовать pipeFunctions для создания новой функции multiplyAndAdd5, которая умножает два числа и затем прибавляет 5 к результату:

const add5 = (x) => x + 5;
const multiply = (x, y) => x * y;
const multiplyAndAdd5 = pipeFunctions(multiply, add5);
multiplyAndAdd5(5, 2); // 15

В этом примере multiplyAndAdd5 - это новая функция, которая принимает два аргумента, 5 и 2, и сначала применяет к ним функцию multiply, получая 10, а затем применяет к результату функцию add5, получая 15.

Резюме

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