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!!