introduce

The reduce() method executes a reducer function (that you provide) on each element of the array, Resulting in Single output value (MDN)

At first glance, it may seem confusing, and so did I

The basic use

[1.2.3.4].reduce((pre, cur) = > {
  return pre + cur;
})
Copy the code

And this is one of the things that you learn when you get started is that the summation induction function summarizes each item in the array at a time (cur), and then returns the result to the accumulator (Pre), and then iterates over and over again, and returns the final result (Pre), and that’s what array summing is all about.

One more parameter

[1.2.3.4].reduce((pre, cur) = > {
  return pre + cur;
}, 5)

Copy the code

The initial pre value is initialized according to the second reduce parameter after an additional parameter is added

So let me draw a picture of that

Pre is initialized by the second parameter and then cur moves around and assigns it to pre until you get to the end and then returns, and if you don’t pass in an initialized function pre will initialize the first element of the array, and then cur points to the next one

Better to understand than to write

It’s my own shorthand

Array.prototype.myReduce = function (callback /*, initialValue */) {
  var arr = this,
    len = arr.length,
    value = arguments[1] || arr[0];

  var init = arguments[1]?0 : 1;
  for (var i = init; i < len; i++) {
    value = callback(value, arr[i], i, arr);
  }
  return value;
};
Copy the code

The MDN Polyfill

if (!Array.prototype.reduce) {
  Object.defineProperty(Array.prototype, "reduce", {
    value: function (callback, initialValue) {
      if (this= = =null) {
        throw new TypeError(
          "Array.prototype.reduce called on null or undefined"
        );
      }
      if (typeofcallback ! = ="function") {
        throw new TypeError(callback + "is not a function");
      }
      var o = Object(this);
      var len = o.length >>> 0;
      var k = 0;
      var value;

      if (arguments.length >= 2) {
        value = arguments[1];
      } else {
        while(k < len && ! (kin o)) {
          k++;
        }
        if (k >= len) {
          throw new TypeError("reduce of empty array with no initial value");
        }
        value = o[k++];
      }

      while (k < len) {
        if (k in o) {
          value = callback(value, o[k], k, o);
        }
        k++;
      }
      returnvalue; }}); }Copy the code

MD is more rigorous, you can read my understanding and then directly read the official so that you can better understand

Simple application

Flattening an array

var arr = [1.2.3.4.5["zhangsna"."lisi"["ss"."ss"["ss"."ss"]]]];

function arrFlat(arr) {
  return arr.reduce(function (pre, cur) {
    // return pre.concat(Object.prototype.toString.call(cur) === '[object Array]'? arrFlat(cur):cur)

    if (Object.prototype.toString.call(cur) === '[object Array]') {
      return [...pre, ...arrFlat(cur)]
    } else {
      return [...pre, cur]
    }

  }, [])
}

console.log(arrFlat(arr))
Copy the code

Combination function

function toUpper(s) {
  return s.toUpperCase();
}

function exclaim(str) {
  return str + "!";
}

function exclaim1(str) {
  return str + "?";
}

// compose compose function

// reduce
function compose(. args) {
  if (args.length === 0) return a= > a;
  if (args.length === 1) return args[0];
  return args.reduce((pre, cur) = > x= > pre(cur(x)));
}

// reduceRight
function compose(. args) {
  if (args.length === 0) return a= > a;
  if (args.length === 1) return args[0];
  return x= > args.reduceRight((res, cb) = > cb(res), x);
}
// Everyone can experience the differences between reduce and reduceRight in the combination of functions
Copy the code

reudx

Redux is also implemented using Reduce. I will give you a simple source code implementation of Reudx during my learning process, and you can see the source code analysis written by more powerful people

createStore.js

function createStore(reducer, enhancer) {
  if (enhancer) {
    return enhancer(createStore)(reducer);
  }
  let currentState = undefined;
  let currentListeners = [];
  function getState() {
    return currentState;
  }
  function dispatch(action) {
    currentState = reducer(currentState, action);
    currentListeners.forEach((item) = > {
      item();
    });
  }
  function subscribe(callback) {
    currentListeners.push(callback);
  }

  dispatch({ type: '@INIT' });
  return {
    getState,
    dispatch,
    subscribe,
  };
}
Copy the code

applyMiddleware.js

function applyMiddleware(. middlewares) {
  return (createStore) = > (. args) = > {
    varstore = createStore(... args);let dispatch = store.dispatch;
    var middleApi = {
      getState: store.getState,
      dispatch: (action) = > dispatch(action),
    };
    var middlewaresChain = middlewares.map((middleware) = >middleware(middleApi) ); dispatch = compose(... middlewaresChain)(store.dispatch);return {
      ...store,
      dispatch,
    };
  };
}
Copy the code

compose.js

function compose(. funcs) {
  if (funcs.length === 0) {
    return (arg) = > arg;
  }
  if (funcs.length === 1) {
    return funcs[0];
  }
  return funcs.reduce((a, b) = > (. args) = >a(b(... args))); }Copy the code

The above is the reduce knowledge I have learned in the learning process. I have sorted it out and hope you will gain from it!!