Detailed explanation of JavaScript higher order function

Brief introduction of higher order functions

The English name of high-order function is Higher-Order Function, which is a kind of functional programming. It is often expressed by passing a function as an argument to another function, or by returning the function as the return value of another function. In the actual development business, high-order functions can often abstract our code, and transform our imperative programming into more reusable functional programming, thus improving our code quality.

Here are three examples of high-order functions that are often asked in interviews. I hope that after reading them, we can improve our understanding of JS and improve our code quality. chat is cheap, show you my code ~

Array.map()

Function introduction

The map () method returns a new array whose elements are the values processed by the call function for the elements of the original array. The map () method processes the elements in the order of the original array elements.

tips

Note: map () does not detect empty arrays. Note: map () does not change the original array.

Practical significance and code examples

// If we need to put 1 In an array, each 1 Item element all *2 , 
  // The most basic way is to just learn JS When the loop traverses, and then every 1 Items *2 For example: 
  let arr1 = [0,1,2,3,4,5,6];
  let arr2 = [];
  for (let i = 0;i<arr1.length;i++){
    arr2.push(arr1[i]*2)
  }
  console.log(arr2) //[0, 2, 4, 6, 8, 10, 12]
  
  // This can really achieve results, but it is imperative programming; 
  // In exchange Map The method of higher-order function is realized only by 1 Row , It will be more reusable. 
  
  let arr1 = [0,1,2,3,4,5,6];
  let arr2 = arr1.map((item)=> item*2)
  console.log(arr2) //[0, 2, 4, 6, 8, 10, 12]

Summary:

The map method can be used for the operation of every 1 item in the array

Array.reduce()

Function introduction

The reduce () method takes a function as an accumulator, and each value in the array (from left to right) begins to shrink and eventually evaluates to a value.
reduce () can be used as a higher order function for the compose of the function.

tips:

Note: reduce () does not perform callback functions for empty arrays.

Practical significance and code examples

  // If there is 1 Requirements, which require us to set each of the arrays 1 Summation of terms 
  // Practical reduce, It can be realized gracefully and concisely: 
  let arr1 = [0,1,2,3,4,5,6];
  let arr2 = arr1.reduce((prev,cur)=>{ //prev Represents the final result of all previous items, cur Represents the value of the current item 
    return prev+cur
  },0) // Here's 0 Is the value passed in by the initial item, which is written here as 0
  console.log(arr2) //21  Complete summation 
  
  
  //reduce It can also be used to de-duplicate arrays 
  let arr1 = [0,1,2,3,4,5,6,5,6,7,6];
  let arr2 = arr1.reduce((prev,cur)=>{
    // When all previous items do not contain the current item element, push Otherwise, all previous de-duplicates are directly returned. 
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev
  },[]) // Pass in an empty array as the initial value 
  console.log(arr2) //[0, 1, 2, 3, 4, 5, 6, 7]

Summary:

For the operation of cumulative calculation of all items in the array, the final input is 1 value, and reduce method can be used

Array.filter()

Function introduction

The filter () method creates a new array of elements by checking all the elements in the specified array that match the criteria.

tips

Note: filter () does not detect empty arrays.
Note: filter () does not change the original array.

Examples of practical codes

  // For example, the requirement is to get all in the array that are greater than or equal to 4 Elements of, and make them up 1 Array of numbers 
  let arr1 = [0,1,2,3,4,5,6,5,6,7,6];
  let arr2 = arr1.filter((item)=>{
    return item >= 4
  },[])
  console.log(arr2) //[4, 5, 6, 5, 6, 7, 6]

Summary:

For the filtering function of every 1 item in the array, you can use filter method

Array.flat()

Function introduction

The flat () method can reduce the dimension of nested arrays (mostly arrays) to low-dimensional arrays or 1-dimensional arrays. (Array spread flat)

tips

Note: There are certain compatibility problems, such as IE incompatibility

Examples of practical codes

  
  let arr1 = [0,1,2,3,4,5,[1,2,3],[1,2,[1,2,3,4]],6,7,6];
  let arr2 = arr1.flat(1) //flat The number of layers to be reduced is passed in, and the default is 1 If there is a 3 Dimension array, which will be downgraded to 2 Bit group, 
  let arr3 = arr1.flat(Infinity) //[0, 1, 2, 3, 4, 5, 1, 2, 3, 1, 2, 1, 2, 3, 4, 6, 7, 6] // If it is a multidimensional array, you need to get 1 Dimension array, you can use it directly Infinity 
  console.log(arr2) //[0, 1, 2, 3, 4, 5, 1, 2, 3, 1, 2, [1,2,3,4], 6, 7, 6]

The above is the detailed explanation of JavaScript higher-order function details, more information about JavaScript higher-order function please pay attention to other related articles on this site!