preface

Reduce, this advanced function, you probably started with summation. So do I, only in summation. As arrays became more complex, I found more use of this killer while looking for simple solutions. Now, it’s my favorite higher-order function, not one of them. Reduce parameter description I will not introduce more, the following are some practical tips.

 [1.2.3].reduce((c,n) = >c+n);
Copy the code

Replace some of the other array higher-order functions

  1. Reduce to replace the map
    const arr = [{name:'Amy'}, {name:'Bob'}];
    arr.map(it= >it.name); // map
    arr.reduce((c,n) = >[...c,n.name],[]); // reduce
Copy the code
  1. Reduce to replace the filter
    const arr = [{name:'Amy'.age:18}, {name:'Bob'.age:20}];
    arr.filter(it= >it.age>18); // filter
    arr.reduce((c,n) = >n.age>18? [...c,n]:c,[]); // reduce
Copy the code
  1. Reduce replaces Map + Filter.
    const arr = [{name:'Amy'.age:18}, {name:'Bob'.age:20}];
    arr.filter(it= >it.age>18).map(it= >it.name); // Multiple cycles are inefficient and wasteful
    arr.reduce((c,n) = >n.age>18? [...c,n.name]:c,[]); // reduce Bob
Copy the code
  1. Reduce instead of some or every
    const arr = [{name:'Amy'.age:18}, {name:'Bob'.age:20}];
    arr.reduce((c,n) = >c||n.age>18 , false); // some
     arr.reduce((c,n) = >c&&n.age>18 , true); // every
Copy the code

So much for the moment, please find the rest yourself.

Serial execution of promises

The most typical is large file fragmentation upload. Serial uploading of fragments can ensure the number of uploaded fragments and simulate the upload progress. The normal process is to use recursion, which is fast, but not elegant enough. Reduce takes this operation to a whole new level of elegance. The usage is as follows:

    // Define or find chunks to represent an array of file fragments
   chunks.reduce((c,n) = >c.then(res= >{
       // Process a fragment after it is successfully uploaded
    return axios.post(...)
   }),Promise.resolve())
Copy the code

It works wonders

In front groups, or in nuggets boiling points, there are more or less strange array problems. I basically use reduce for processing to help answer the question. Such as:

  1. [1,2,3] => [1,1,2,2,3,3] the normal practice would be to create a new empty array, and then loop through the old array to assign to the original empty array. Reduce is one line.
   [1.2.3].reduce((c,n) = >[...c,n,n],[]);
   / / or
   [1.2.3].reduce((c,n) = >[...c,...new Array(num).fill(n)],[]);// use num to control the number
Copy the code
  1. [1,2,3,4] => [[1,2],[3,4]] the normal way to create a new array, and then loop. Reduce is still a line
    [1.2.3.4].reduce((c,n) = >{c[c.length- 1].length>=2? c.push([n]):c[c.length- 1].push(n);return c},[[]])
Copy the code

conclusion

In fact, there are some people in the front-end industry who are API call engineers, know vUE/React, and then they don’t care whether some of their algorithms are good or not, whether they can continue to improve. Often the result is inefficiency and redundancy in the code. Don’t indulge, don’t underestimate yourself, learn the basics, and you’ll be the gold, just like Reduce.

The original connection tech.gtxlab.com/reduce.html

About author: Zhang Shuan,And in the futureBig data front-end engineer, focusing on HTML/CSS/JS learning and development.