On the JS reduce () usage

In the past for a long time, I have been hard to understand reduce () the specific use of this method, usually rarely used it. In fact, if you can really understand it, then, in fact, in many places we can apply, so today we have to simply talk about the JS reduce () usage.

First, grammar

arr.reduce(function(prev,cur,index,arr){
...
}, init);

Wherein,
ARR represents the original array;
PREV represents the return value of the last call callback, or the initial value init;
CUR showing array element currently being processed;
index represents the index of the array element being processed currently, if provided init value, the index 0, otherwise index. 1;
the init represents an initial value.

Appears to be not feeling very complicated? It does not matter, it just looks, in fact, only two commonly used parameters: prev and CUR . Next we look at the specific usage examples to follow it ~

Second, examples

To provide an original array:

was arr = [3,9,4,3,6,0,9];

 

There are many ways to achieve the following requirements, which will contain solving way using reduce (), it can be considered a relatively simple to implement it.

1. demand and an array of items

var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);

 

Since the initial value 0 passed, the value is 0, the CUR value of the first array 3, as the return value of the next cycle after adding 3 tone prev prev value at the beginning, and then continue with the next array adding the entry, and so on, and until the completion of the array and returns all entries.

2. seeking the maximum array items

var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

 

Since the initial value is not passed, so the start of the first array prev value 3, cur value of the second array 9, takes a maximum value of two tone continues into the next cycle.

3. Deduplication Array

var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

 

The basic principle to achieve the following:

① initialize an empty array
in item 1 array ② will need to re-processing of array initialization discoveries, if not found (certainly can not find an empty array), the item will be added to initialize the array in
③ will need array deduplication processing in the second term in the initialize an array lookup, if not, it will continue to add to the array initialization in
④ ......
n-item ⑤ will need to re-array processing in the array initialization look, if not, it will continue to add to the array initialization in
⑥ this will initialize the array returned

Third, other methods

1. reduceRight()

This method usage and reduce () are virtually the same, but the order of traversal contrary, it is from the last item of the array, traversing forward to the first item.

2. forEach()、map()、every()、some()和filter()

For details, please poke → briefly forEach (), map (), every (), some () and filter () usage

Key Summary:

reduce () is an array of merging methods , and forEach (), map (), filter () like iterative methods as an array will each traverse, but the result reduce () items can simultaneously traverse the front of the array generated by the current traverse operation items, and this is another iterative methods can not match

 

Author: Wang Rui front end of
the link: https: //www.jianshu.com/p/541b84c9df90
Source: Jane books