Array.prototype.reduce has not been used much in the past. I asked this question in the byteDance interview, and then I went to see MDN to understand it a little bit
usage
The reduce method passes each element of the array from left to right in turn to the callback function
are some of the common places
Counts the number of occurrences of each character in a string
Method 1 (this is the most common method I use without array.prototype.reduce):
const str = '9kFZTQLbUWOjurz9IKRdeg28rYxULHWDUrIHxCY6tnHleoJ'
const obj = {}
str.split(' ').forEach(item= > {
obj[item] ? obj[item]++ : obj[item] = 1
})
Copy the codeMethod 2 (this is a little fun 
):
const str = '9kFZTQLbUWOjurz9IKRdeg28rYxULHWDUrIHxCY6tnHleoJ'
const obj = {}
Array.from(str).reduce((accumulator, current) = > {
current in accumulator ? accumulator[current]++ : accumulator[current] = 1
return accumulator
}, obj)
Copy the codeWell, method 2 although the steps are more complicated than method 1 (actually not complicated roar), but is it more fun 
?
Filters data in an array that meets multiple criteria at once
Method 1 (Common):
const arr = [
{
"name": "a1111"."age": 25
},
{
"name": "a1"."age": 26
},
{
"name": "a11"."age": 27
},
{
"name": "a"."age": 29
},
{
"name": "a11"."age": 29
},
{
"name": "a11"."age": 26
},
{
"name": "a111"."age": 25
},
{
"name": "a11"."age": 26
},
{
"name": "a1"."age": 26
},
{
"name": "a"."age": 26
}
]
arr.filter(item= > item.name.length === 3)
.filter(item= > item.age > 26)
/* [ { "name": "a11", "age": 27 }, { "name": "a11", "age": 29 } ] */
Copy the codeMethod 2 Reduce method (thanks for @Zhanggenming’s proof, modified):
const arr = [
{
"name": "a1111"."age": 25
},
{
"name": "a1"."age": 26
},
{
"name": "a11"."age": 27
},
{
"name": "a"."age": 29
},
{
"name": "a11"."age": 29
},
{
"name": "a11"."age": 26
},
{
"name": "a111"."age": 25
},
{
"name": "a11"."age": 26
},
{
"name": "a1"."age": 26
},
{
"name": "a"."age": 26}]const filter1 = (arr) = > arr.filter(item= > item.name.length === 3)
const filter2 = (arr) = > arr.filter(item= > item.age > 26)
const fnArr = [filter1, filter2]
fnArr.reduce((accumulator, fn) = > {
accumulator = fn(accumulator)
return accumulator
}, arr)
/* [ { "name": "a11", "age": 27 }, { "name": "a11", "age": 29 } ] */
Copy the codeWith this approach, let’s try implementing array.prortotype.reduce with a for loop
Let’s look at the parameters that Reduce receives:
arr.reduce(callback[, initialValue])
Copy the codeThe reduce method takes a callback function as its first argument, along with an optional initialValue. The callback function also takes up to four arguments
- The return value of an accumulator callback; It is the cumulative value returned when the callback was last called. If initialValue is provided, its default value is initialValue, otherwise it is the first value of the array
- CurrentValue Specifies the element currently participating in the calculation
- CurrentIndex Array index of the current evaluated element
- Array Array of the current operation
With this in mind, implementing the Reduce approach is straightforward
Array.prototype.selfReduce = function() {
const ary = this
const { length } = ary
if (arguments.length === 0) {
throw new TypeError('undefined is not a function')}if (typeof arguments[0]! = ='function') {
throw new TypeError(arguments[0] + 'is not a function')}if (ary.length === 0 && arguments.length === 1) {
throw new TypeError('Reduce of empty array with no initial value')}const callback = arguments[0]
const startIndex = arguments.length >= 2 ? 0 : 1
let value = startIndex === 0 ? arguments[1] : ary[0]
for (let i = startIndex; i < length; i++) {
value = callback(value, ary[i], i, ary)
}
return value
}
Copy the codeAt the same time,reduce also has its brother 
reduceRight, which, as its name suggests, passes each element of an array from right to left into a callback function. That realization reduceRight realization is also simple.
Array.prototype.selfReduceRight = function () {
const ary = this
const { length } = ary
if (arguments.length === 0) {
throw new TypeError('undefined is not a function')}if (typeof arguments[0]! = ='function') {
throw new TypeError(arguments[0] + 'is not a function')}if (ary.length === 0 && arguments.length === 1) {
throw new TypeError('Reduce of empty array with no initial value')}const startIndex = arguments.length >= 2 ? length - 1 : length - 2
const callback = arguments[0]
let value = startIndex === 0 ? arguments[1] : ary[length - 1]
for (let i = startIndex; i >= 0; i--) {
value = callback(value, ary[i], i, ary)
}
return value
}
Copy the codeWrite in the last
A little bit of functional programming (FP)
- Compose (combination)
- Pipe (pipe)
compose
Compose executes from right to left
Here is the implementation of compose (unhandled exceptions)
const compose = function(. fns) {
return (val) = > {
return fns.reduceRight((acc, fn) = > {
return fn(acc);
}, val)
}
};
const add1 = x= > x + 1;
const mult2 = y= > y * 2;
const composeFn = compose(add1, mult2);
composeFn(5); // 11 = 5 * 2 + 1
Copy the codepipe
Like the inside of the Unix “|”, execution of the pipe from left to right. The following is a very simple command to view the nginx process (written a little bit 
).
ps -ef | grep nginx
Copy the codeHere is the implementation of PIPE (unhandled exception case)
const pipe = function(. fns) {
return (val) = > {
return fns.reduce((acc, fn) = > {
return fn(acc);
}, val)
}
};
const add1 = x= > x + 1;
const mult2 = y= > y * 2;
const pipeFn = pipe(add1, mult2);
pipeFn(5); // 12 = (5 + 1) * 2
Copy the code
.