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

Preface

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. But what is certain is that the reduce method must also traverse the array. 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 the 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 passed in Initial value, this initial value is used for 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 simplest sum implementation.

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 can complete multi-dimensional data overlay. 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 callback, the first parameter 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);

Summary

The above are the built-in functions in Javascript All the content of reduce application. I hope the content of this article can be helpful to everyone's study or work. If you have any questions, you can leave a message to communicate.

For more detailed explanations of the application of the built-in function reduce in Javascript, please pay attention to the PHP Chinese website!