This is the first day of my participation in Gwen Challenge. Before we get to reduce, let’s look at an example we encountered in real development

Suc is a two-dimensional loop array that we take from the back end

example

suc.list.reduce((pre, cur) => {

​ idlis.push(cur.status)

if (cur.status == 10 || cur.status == 20) {
Copy the code

​ idlist.push(cur)

​ } else if (cur.status == 30 || cur.status == 40) {

​ idlists.push(cur)

​ } else if (cur.status == 50 || cur.status == 60) {

​ idslists.push(cur)

​ }

​ }, [])

Obviously, the top has the same effect as the bottom

 for (let i = 0; i < suc.list.length; i++) {
Copy the code

​ if (suc.list[i].status == 10 || suc.list[i].status == 20) {

​         this.listUndoData.push(suc.list[i])
Copy the code

​ } else if (suc.list[i].status == 30 || suc.list[i].status == 40) {

​         this.listDoingData.push(suc.list[i])
Copy the code

​ } else if (suc.list[i].status == 50 ||suc.list[i].status == 60) {

​         this.listDoneData.push(suc.list[i])
Copy the code

​ }

​}
Copy the code

We compare the values of status in the suc.list and push them into different arrays.

It is clear that using reduce is better than the for loop

The definition of the reduce

The reduce () method executes a self-provided Reducer function (ascending) on each element in the array and summarizes its results into a single return value.Copy the code

Grammar:

​arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
Copy the code

The function takes four arguments:

Accumulator (ACC)

Current Value (CUR)

Current Index (IDX)

Source Array (SRC)

Parameters:

callback`

The function that executes each value in the array (except the first value if no initialValue is provided), with four arguments:

** Accumulator ** Accumulator callback return value; It is the cumulative value, or initialValue, returned when the callback was last invoked (see below). The element being processed in the currentValue array. Index Indicates the index of the current element being processed in the optional array. If initialValue is provided, the starting index is 0, otherwise it starts from index 1. Array Array of optional calls to reduce()

The initialValue ` optional

As the value of the first argument when the callback function is first called. If no initial value is provided, the first element in the array is used. Calling reduce on an empty array with no initial value will report an error.

Note: The reduce() method takes a function as an accumulator, and each value in the array (from left to right) starts to shrink, eventually evaluates to a value and returns.

Reduce () can be used as a higher-order function for compose of functions.

And: ** reduce() does not perform callbacks on empty arrays. **

From the above example, we can’t help thinking that since the functions realized by Reduce can be realized by the for loop, why do we use Reduce?

First, we can see that reduce is written more succintly and more advanced than the for loop.

At the same time, reduce can be summed, de-weighted, and transformed from multidimensional to one-dimensional