This is the fifth day of my participation in the First Challenge 2022.

1. Composition:

Before you look at composition concepts, let’s understand Unix concepts.

  • Each program does one thing, and in order to complete a new task,To rebuildIt’s better than adding something new to a complex programattribute
  • Per programThe outputIt’s supposed to be from another unknown programThe input.

🚀 Let’s take a look at the compose implementation:

Reduce here is the function encapsulated in the previous array functional programming, if not clear back to see: juejin.cn/post/706419…

Implementation of 1.1-Composen composite function:

  • The composeN function takes multiple functions as arguments and returns a function that takes an initial value of value as the initial value of the reduce function

  • Multiple functions are passed in right-to-left order (implemented by funcs.reverse()), and the result of the last function is continued as input to the next function…

/ / the reduce function
const reduce = (array,fn,initVal) = >{
  let accumlator;
  if(initVal ! = =undefined){
    accumlator = initVal;
  }else{
    accumlator = array[0];
  }
  if(initVal === undefined) {for(let i = 1; i<array.length; i++){ accumlator = fn(accumlator,array[i]); }}else{
    for (const value ofarray){ accumlator = fn(accumlator,value); }}return [accumlator]
};

//composeN
const composeN = (. funcs) = > (value) = > reduce(funcs.reverse(),(acc,func) = > func(acc),value);
Copy the code

1.2 –composeThe use of:

🚀 Example 1:

// Simple use of the compose combination
let number = compose(Math.round,parseFloat);
console.log("Number is ",number("3.56"));
// The console result is 4
Copy the code
  • In effect equivalent tonumber = (value) => Math.round(parseFloat(c));parseFloatThe result of execution is as followsMath.roundThe parameters of the

1.3 introductioncurrywithpartial:

Two functions can only be combined when a function takes one argument, but in real development, there are more than that.

For example, the map and filter functions, wrapped earlier in the functional programming of arrays, both take two arguments:

  • The array to be manipulated
  • Functions that manipulate arrays
let books = [
    {
        "id": 111."title": "css"."author": "Zhang Xinxu"."rating": [4.9]."reviews": [{good : 4 , excellent : 12}]}, {"id": 222."title": "JavaScript enlightenment."."author": "Douglas Crockford."."rating": [4.5]."reviews": []}, {"id": 333."title": "Vuejs Design and Implementation"."author": "Huo Chunyang"."rating": [4.9]."reviews": []}, {"id": 444."title": "Javascript Design Patterns and Development Practices"."author": "Once agent"."rating": [4.2]."reviews": [{good : 14 , excellent : 12}}]];// Filter the filter condition function
let filterOutStandingBooks = (book) = > book.rating[0= = =5;
let filterGoodBooks = (book) = >  book.rating[0] > 4.5;
let filterBadBooks = (book) = > book.rating[0] < 3.5;

// Get the content function
let projectTitleAndAuthor = (book) = > { return {title: book.title,author:book.author} }
let projectAuthor = (book) = > { return {author:book.author}  }
let projectTitle = (book) = > { return {title: book.title} }

// Process a multi-parameter function into a single-parameter function through partial application processing
let queryGoodBooks = partial(filter,undefined,filterGoodBooks);
let mapTitleAndAuthor = partial(map,undefined,projectTitleAndAuthor);

// Actual use
let titleAndAuthorForGoodBooks = compose(mapTitleAndAuthor,queryGoodBooks);
console.log("Front end recommends good book names and authors.",titleAndAuthorForGoodBooks(books));
Copy the code

🚀 results are as follows:

  • becauseMap, Filter, reduce, and partial functionsAnd so on are not reflected in the code.
  • The idea of composition is to combine small functions into one big function.
  • forpartialHere is throughpartialA function that encapsulates map and filter as an array that takes only one argument, respectivelyqueryGoodBooks,mapTitleAndAuthor.
  • All you need to feel is fightingPick up the LegosThe feeling of

2. Plumbing pipe:

From the compose wrapper above, you can see how the compose function’s data flow works: from right to left

Pipe is the opposite of compose – from left to right, pipe’s implementation is also slightly different from compose’s:

const composeN = (. funcs) = > (value) = > reduce(funcs,(acc,func) = > func(acc),value);
Copy the code

  • Remove reverse from the reduce parameter funcs and you have pipe

  • Compose and Pipe do essentially the same thing, but flow the data in opposite directions

I’m not going to talk about functors at the end, maybe I’ll add them later, but I’m going to stop there with functional programming.