Location>code7788 >text

reduce Multiple Uses

Popularity：117 ℃/2024-08-16 15:58:37

The reduce() method is used to reduce an array to a single value by traversing the array and applying the provided function. It can be used for summing, multiplying, calculating the sum of object attributes, array de-duplication and converting array structures. The setting of the initial value affects the starting index of reduce. When no initial value is provided, execution starts at index 1; when an initial value is provided, it starts at index 0.

I. Definitions and usage
The reduce() method reduces an array to a single value.
The reduce() method executes the provided function for each value of the array (from left to right).
The return value of the function is stored in the accumulator (result/total).

Note: The reduce() method is not executed for array elements that do not have a value.
Note: The reduce() method does not change the original array.

II. Grammar

(function(total, currentValue, currentIndex, arr), initialValue)
III. Parameter values

Parameter Description
function(total, currentValue, index, arr)
Required. The function to run for each element in the array.
function parameters:

Parameter Description
total Mandatory. initialValue, or the value previously returned by the function.
currentValue Required. The value of the current element.
index Optional. The index of the array for the current element.
arr Optional. The array object to which the current element belongs
initialValue
Optional. The value passed to the function as the initial value.

IV. Examples are as follows

1. Summing attributes in an object

data(){
    return{
        result: [
            {
                subject: 'math',
                score: 10
            },
            {
                subject: 'chinese',
                score: 20
            },
            {
                subject: 'english',
                score: 30
            }
        ];
    };
},
computed:{
    totalResults(){
        return this.((sum,result) => {
            return sum + 
        }
    }
},0)

 

2. Example of parsing the initialValue parameter

var arr = [1, 2, 3, 4];
var sum = (function(prev, cur, index, arr) {
(prev, cur, index);
return prev + cur;
})
(arr, sum);


VM6252:3 1 2 1
VM6252:3 3 3 2
VM6252:3 6 4 3
VM6252:6 (4) [1, 2, 3, 4] 10

As you can see here, the above example index starts at 1, and the value of the first PREV is the first value of the array. The length of the array is 4, but the reduce function loops 3 times.

var arr = [1, 2, 3, 4];
var sum = (function(prev, cur, index, arr) {
(prev, cur, index);
return prev + cur;
},0);
(arr, sum);


VM282:3 0 1 0
VM282:3 1 2 1
VM282:3 3 3 2
VM282:3 6 4 3
VM282:6 (4) [1, 2, 3, 4] 10

Conclusion: If no initialValue is provided, reduce executes the callback method from index 1, skipping the first index. If initialValue is provided, it starts at index 0.

3、Simple usage of reduce

var arr = [1, 2, 3, 4];
var sum = ((x,y)=>x+y)
var mul = ((x,y)=>x*y)
( sum ); //Summation, 10
( mul ); //Find the product, 24

4. Advanced usage of reduce

(1) Count the number of occurrences of each element in the array

et names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = ((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

(2) Array de-duplication

let arr = [1,2,3,4,4,1]
let newArr = ((pre,cur)=>{
if(!(cur)){
return (cur)
}else{
return pre
}
},[])
(newArr);// [1, 2, 3, 4]

(3) Converting a two-dimensional array into a one-dimensional one

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = ((pre,cur)=>{
return (cur)
},[])
(newArr); // [0, 1, 2, 3, 4, 5]


(4) Converting multi-dimensional arrays into one-dimensional ones

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return ((pre,cur)=>((cur)?newArr(cur):cur),[])
}
(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

 



<Previous Next>