JS built-in function reduce

The reduce function is an array method that appears in the ECMASCRIPT5 specification. In peacetime work, believe that you use the scene is not many, in general, can be achieved through the reduce method of logic can be implemented in disguise through the Foreach method, although it is not clear how the browser JS engine is implemented in the C + + level of these two methods, It is certain, however, that the reduce method must also have an array traversal, and it is not known whether the specific implementation details are optimized for the operation and storage of array items.

the application of the reduce method of array

The reduce method has two parameters, the first parameter is a callback for the operation of the array item, and the second parameter is the incoming initial value, which is used for the operation of a single array item. It is important to note that the reduce method return value is not an array, but is an overlay of the initial value of the action.

The most common scenario for the reduce method is overlay.

var items= [10,120,1000];Our reducer functionvar reducer=function add (sumsofar, Item) {return Sumsofar + item}; //do the Jobvar Total Span class= "OP" >= items. Reduce (Reducer0) ; console. log (total) //1130            

As can be seen, the reduce function according to the initial value of 0, continuous superposition, complete the simplest sum of the implementation.

As mentioned earlier, the return result type of the reduce function is the same as the initial value passed in, and the initial value in the last instance is the number type, so the initial value can also be an object type.

var items= [10,120,1000];Our reducer functionvar reducer=function Add(Sumsofar,Item{sumsofar. Sum = sumsofar. Sum + itemreturn sumsofar;}; //do the Jobvar Total Span class= "OP" >= items. Reduce (Reducer{sum: 0< Span class= "OP" >}) ; console. log (total) //{sum:1130}           

 Multiple Overlays

Use the reduce method to complete multi-dimensional data overlays. As in the above example, the initial value {sum:0}, this is only a dimension of the operation, if it involves the overlay of multiple properties, such as {sum:0,totalineuros:0,totalinyen:0}, you need the appropriate logic to handle.

In the following method, a divide-and-conquer method is used to encapsulate the first parameter of the reduce function callback as an array, which is superimposed by each function in the array and the reduce operation is done separately. Everything is managed by a manager function to manage the process and pass the initial parameters.

var managereducers=function(reducers){Returnfunction(state, Item) Span class= "OP" >{return  object. keys (reducers). reduce (function (nextstate, key) {Reducers[key] (state, item)  return state}, {}) }};              

This is the implementation of the manager function, which requires the Reducers object as an argument and returns a function of type callback as the first parameter of reduce. Inside the function, a multidimensional overlay work (Object.keys ()) is performed.

Through this idea of division, we can complete the simultaneous superposition of multiple properties of the target object, the complete code is as follows:

var reducers={Totalineuros:function(State,Item{ReturnState.Euros+=Item.Price*0.897424392;},Totalinyen:function(State,Item{ReturnState.Yens+=Item.Price*113.852;}};var managereducers=function(reducers){Returnfunction(State,Item{ReturnObject.Keys (reducers).Reducefunction(Nextstate,Key{Reducers[key] (state, item);return state;},{} );}};var bigtotalpricereducer=Managereducers (reducers);var initialstate={Euros:0,yens: 0}; var items = [{price : 10}, {price : 120}, {price : 1000}]; var totals = items. Reduce (Bigtotalpricereducer; console. log (totals) ;            

JS built-in function reduce