What is a higher-order function? What is a function Coriolization? What is the compose function? Concept:

  1. A function that takes one or more functions as arguments, as in jsmap some every filter reduc
  2. Function execution returns a function, such asbind

All of the above are called higher-order functions. Coriolization function, combination function collectively referred to as the higher-order function next look at some JS built-in higher-order function:

// Map receives each item in an array of functions and executes this method
// Returns the value of each element of a new array processed by the receiving function of the original array
const arr = [1.5.6.44.99.36.77];
const res = arr.map(item= > item + 1);
// The new array returned after each item is processed by the calling function
console.log(res) // [2, 6, 7, 45, 100, 37, 78]

// Implement it manually (the basic function is not perfect)
Array.prototype.myMap = function(fn){
    const len = this.length;
    const newArr = [];
    for(let i = 0; i < len; i++){// Each item in the array is pushed to the new array by fn
        newArr.push(fn(this[i]))
    }
    return newArr
}
const res = arr.myMap(item= > item + 1)
console.log(res);  //[2, 6, 7, 45, 100, 37, 78]

// filter returns the qualified elements of the original array and returns, or returns an empty array if no qualified elements exist
const res = arr.filter(item= > item > 20) // [44, 99, 36, 77]

// Implement it manually (the basic function is not perfect)
Array.prototype.myFilter = function(fn){
    const len = this.length;
    let newArr = [];
    for(let i = 0; i < len; i++){// The current item that returns true after the fn function is executed is pushed into the new array
        fn(this[i]) && newArr.push(this[i])
    }
    return newArr
}

const r = arr.myFilter(item= > item > 20)
console.log(r);  // [44, 99, 36, 77]
Copy the code

Currization function

Directly on the code:

// Look at a simple chestnut
const res = add(1.2) (3);
console.log(res) / / 6

// Parse: The add function returns a function that takes arguments and executes them again and then sums them up

/ / implementation
const add = (. params) = >{
    The add function returns a new function
    // A temporary closure context is created because the small function returned by the large function execution is executed once more
    // Use temporary closures to pre-store params parameters
    return (. args) = > {
        // Add params args
        params = params.concat(args)
        return params.reduce((result,item) = > result + item)
    }
}
Copy the code

Conclusion: Using the function of closure preservation, some information is stored in advance, [preprocessing], for use in the lower context. We call this pre-storage/pre-processing mechanism —— function Currification

Higher order applications of Currization functions:

// Look at a complicated chestnut
let add = curring()
let res = add(1) (2) (3);
console.log(+res); / / 6

add = curring()
res = add(1.2.3) (4);
console.log(+res); / / 10

add = curring()
res = add(1) (2) (3) (4) (5);
console.log(+res); / / 15

// Resolution: Unlike the simple example above, where the add function is called twice, we are not sure how many times it will be called

/ / implementation:
const  curring = () = > {
    // Create a collection of params in the closure to pre-store the arguments received each time the add execution takes place
    let parmas = [];
    const add = (. args) = > {
        parmas = parmas.concat(args)
        // We return the add function because we are not sure how many times the add function will be called after execution. Each execution is followed by an add function for the next execution
        return add
    }
    // Convert an object to a string or numeric priority [symbol.toprimitive] > valueOf >toString > Number
    // Implement summation based on the process of refactoring to a string
    add[Symbol.toPrimitive] = () = > {
        // Sum the pre-stored params
        return parmas.reduce((result,item) = > result + item)
    }
    return add
}
Copy the code

Componse function

One of the most important concepts in functional programming is function composition, which connects functions like pipes through which data flows to the final result:

const fn1 = x= > x + 1;
const fn2 = x= > x * 2;
const fn3 = x= > x + 10;
console.log(fn3(fn1(fn2(1))));

Fn2 (1); fn2 (1); fn1 (2); fn2 (2); fn1 (3); fn1 (4);
// get the final result 13
// If we have fn 99999, we will need our combinator function

// Consider: we know that functions that take one or more functions as arguments are called higher-order functions. Can we pass fn1, fn2, and fn3 into a combinative function and then add up the result and return it?

/ / implementation:
const compose = function compose(. fns){
    // x is the initial parameter value for compose after the first execution of the small function
    return function operate(x){
        // list of the compose argument functions
        // result is the result of the last function execution
        // item is the function currently looped to
        // Reduce iterates reduceRight from right to right
        return fns.reduceRight((result,item) = >{
            Return the result of the current function execution to result
            return item(result)
        },x)
    }
}
const res = compose(fn3,fn1,fn2)(1);
The compose function executes once and then passes in the parameters for execution
The compose function needs to return a function
console.log(res);

Copy the code