JavaScript 数组 reduce()方法

reduce()方法通过执行一个reducer函数，将给定的数组减少到一个单一的值。用户实现了在数组中的每个元素上工作的reducer函数。

Reducer函数

reducer函数是用户实现的代码。它使用以下四个参数执行其任务：

累加器： 它累积数组的返回值。
当前值： 当前元素是当前值。
当前索引： 当前元素的索引是当前索引的值。
源数组： 用户为实现reduce()方法定义的数组。

语法

arr.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

参数

callback： 主要是回调函数，对每个元素进行操作，除了第一个元素外，如果没有指定initialValue。

回调函数拥有以下四个参数：

accumulator（累加器）： 它累加回调函数的返回值，在函数的最后一次调用中返回。
currentValue（当前值）： 它是正在处理的当前元素的值。
currentIndex（当前索引）： 它是一个可选的参数，保存正在处理的当前元素的索引值。如果我们提供了初始值，则索引从0开始。否则从1开始。
array（数组）： 它也是可选的，它带有reduce()将要操作的元素。

initialValue（初始值）： 它是用于第一次调用回调函数的第一个参数值。

返回值

它返回一个单个值作为输出。

注意事项：

如果我们不提供初始值，回调函数将以索引1开始执行，跳过第一个索引。尽管如此，如果提供了初始值，执行将从0开始。
如果提供了一个空数组且没有提供initialValue，它将抛出TypeError。
如果数组为空，但提供了initialValue，或者数组包含一个元素，但没有提供initialValue，该元素将在不调用回调函数的情况下返回。

因此，提供初始值是安全和好的做法。

JavaScript 数组 reduce()方法示例

让我们来实现一些示例以更好地理解：

示例1

这是一个简单的示例，对数组元素求和并显示输出。

<html>
<head> <h5> Javascript Array Methods </h5> </head>
<body>
<script>
var arr=[2,3,1,5];
var a=arr.reduce(function (accumulator,currentValue) {
    return accumulator+currentValue;
    },0);
document.write("The sum of the array elements is: "+a);
</script>
</body>
</html>

输出：

JavaScript 数组 reduce()方法

示例2

这是一个使用reduce()方法显示数组元素差异的示例。

<html>
<head> <h5> Javascript Array Methods </h5> </head>
<body>
<script>
var a=[30,15,5];
document.write("The difference of the array elements is: ");
document.write(a.reduce(reducer_func));
function reducer_func(net,n){
return net-n;
}
</script>
</body>
</html>

输出结果：

JavaScript 数组 reduce()方法

示例3

这是一个使用箭头函数计算数组元素总和的示例。

<html>
<head> <h5> Javascript Array Methods </h5> </head>
<body>
<script>
var net=[3,2,5,1,7];
var calc=net.reduce(
(accumulator,currentValue)=>accumulator+currentValue,0);
document.write("The total of the array elements comes out to be: "+calc);
</script>
</body>
</html>

输出：

JavaScript 数组 reduce()方法

示例4

当数组只包含一个值时。

<html>
<head> <h5> Javascript Array Methods </h5> </head>
<body>
<script>
var net=[3]; //Array with one element.
var calc=net.reduce(
(accumulator,currentValue)=>accumulator+currentValue);
document.write("The total of the array element comes out to be: "+calc);
</script>
</body>
</html>

输出：

JavaScript 数组 reduce()方法