Detailed explanation of the application of built-in function reduce in Javascript

Foreword

Generally speaking, the logic that can be implemented through the reduce method can be implemented in disguise through the forEach method. Although it is not clear how the browser's js engine implements these two methods at the C++ level, it is certain that reduce The method must also include array traversal. It is unknown whether any optimization has been done for the operation and storage of array items in terms of specific implementation details.

Application of the reduce method of array

The reduce method has two parameters. The first parameter is a callback, which is used to operate on the array items; the second parameter is the initial value passed in, which is used to Operations on individual array items. It should be noted that the return value of the reduce method is not an array, but an operation after superposition processing in the shape of the initial value.

The most common scenario for the reduce method is superposition.

var items = [10, 120, 1000];
 
// our reducer function
var reducer = function add(sumSoFar, item) { return sumSoFar + item; };
 
// do the job
var total = items.reduce(reducer, 0);
 
console.log(total); // 1130

It can be seen that the reduce function continuously superposes based on the initial value 0 to complete the implementation of the simplest sum.

As mentioned in the previous article, the return result type of the reduce function is the same as the initial value passed in. In the previous example, the initial value was of type number. Similarly, the initial value can also be of type object.

var items = [10, 120, 1000];
 
// our reducer function
var reducer = function add(sumSoFar, item) {
 sumSoFar.sum = sumSoFar.sum + item;
 return sumSoFar;
};
 
// do the job
var total = items.reduce(reducer, {sum: 0});
 
console.log(total); // {sum:1130}

Multiple overlay

Using the reduce method, multi-dimensional data overlay can be completed. As shown in the above example, the initial value {sum: 0} is only a one-dimensional operation. If it involves the superposition of multiple attributes, such as {sum: 0, totalInEuros: 0, totalInYen: 0}, corresponding logic is required. deal with.

In the following method, the divide and conquer method is adopted, that is, the first parameter callback of the reduce function is encapsulated into an array, and each function in the array is independently superimposed and completes the reduce operation. Everything is managed through a manager function and initial parameters are passed.

var manageReducers = function(reducers) {
 return function(state, item) {
 return Object.keys(reducers).reduce(
  function(nextState, key) {
  reducers[key](state, item);
  return state;
  },
  {}
 );
 }
};

The above is the implementation of the manager function. It requires reducers objects as parameters and returns a callback type function as the first parameter of reduce. Within this function, multi-dimensional superposition work is performed (Object.keys()).

Through this divide and conquer idea, the simultaneous superposition of multiple attributes of the target object can be completed. The complete code is as follows:

var reducers = {
 totalInEuros : function(state, item) {
 return state.euros += item.price * 0.897424392;
 },
 totalInYen : function(state, item) {
 return state.yens += item.price * 113.852;
 }
};
 
var manageReducers = function(reducers) {
 return function(state, item) {
 return Object.keys(reducers).reduce(
  function(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, initialState);
 
console.log(totals);