How to use reduce() in JavaScript

reduce() is the best way to accumulate each element of array data into a value, so in this article we will introduce in detail how to use reduce() in JavaScript.

Let’s take a look at the specific content.

Suppose we have an array like this:

var numbers = [1,2,3,4,5,6,7,8,9];

var strings = ['苹果','香蕉','梨子','葡萄','荔枝'];

In this example, we have prepared an array to store numeric data and an array to store string data.

The most obvious way to use reduce() is to compute the value of all values ​​stored in such an array.

If it is a numeric value, you can calculate the summed value, if it is a character, you can concatenate the individual strings together.

Let's seeHow to use reduce()?

reduce() can execute any function on the target array.

数组.reduce(function(累积值, 元素) { })

The "cumulative value" of the first parameter represents the value obtained by processing the array elements in sequence.

The second parameter "element" represents the currently processed array element.

Use "return" in this function. By returning any processing, the result is retained in the accumulated value, and finally a value can be obtained.

Let’s look at a specific example

Sum each element of the array

The code is as follows

var numbers = [1,2,3,4,5,6,7,8,9];
var result = numbers.reduce(function(a, b) {
  return a + b;
})
console.log(result);

The running results are as follows

In this example, reduce() is performed on an array storing numbers from 1 to 9.

In the function you can see the accumulated values ​​and each element is simply added.

becomes "1 2" in the first processing, stores the sum in the accumulated value, and performs "3 3" in the next processing.

By doing this, the running result output is that the sum of all values ​​​​is "45".

Finally we need to explain one thing:

It is not allowed to use the "break" interrupt processing method in the reduce() function, so as an alternative, there is an interrupt that uses the index number of the array Let’s take a brief look at the method below.

Actually, the reduce() function can have up to four parameters.

配列.reduce(function(累积值, 元素, 索引号, 数组) { })

The third parameter "index number" represents the index number of the currently processed array.

The fourth parameter "array" represents the array itself currently being processed.

Using this parameter, the interrupt process can be implemented as follows!

var numbers = [1,2,3,4,5,6,7,8,9];
var result = numbers.reduce(function(a, b, index, arr) {
  if(index >= 3) arr.splice(1);
  return a + b;
});
console.log(result);

The running results are as follows

Please pay attention to the IF statement in the reduce() function!

By describing "index> = 3" in the conditional expression, when it becomes the third index number of the array, arbitrary processing can be performed.

The process becomes "arr.splice(1)" and removes all array elements after the third index.

Thus, the processing of reduce() will end, so you can perform the same function as "break".

The above is the detailed content of How to use reduce() in JavaScript. For more information, please follow other related articles on the PHP Chinese website!