JavaScript Array reduce()用法及代码示例

reduce() 方法通过执行 reducer 函数将给定的数组缩减为单个值。用户实现了对数组中存在的每个元素起作用的 reducer 函数。

减速机函数

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

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

用法

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

参数

callback:main 是为每个元素执行的回调函数，不包括第一个，如果没有指定 initialValue。

回调函数接受以下四个参数：

accumulator:它累积回调函数的返回值，在最后一次调用函数时返回。
currentValue:它是正在处理的当前元素的值。
currentIndex:它是一个可选参数，用于保存正在处理的当前元素的索引值。如果我们提供初始值，索引将从 0 开始，否则从 1 开始。
array:它也是可选的，它携带 reduce() 将在其上工作的元素。

initialValue:它是第一次调用回调函数时使用的第一个参数值。

它返回单个值作为输出。

注意事项：

如果我们不提供初始值，回调函数将以索引为 1 开始执行，它将跳过第一个索引。但是，如果提供了 intialValue，则执行将从 0 开始。
如果没有提供初始值的空数组，它将抛出一个类型错误。
如果数组为空，但提供了 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>

输出：

例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>

输出：

例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>

输出：

例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>

输出：

因此，在存在单个数组元素的情况下，无需创建回调函数。此外，因为当数组包含单个元素时，不会调用回调。

我们可以使用数组 reduce() 方法执行几个示例。

相关用法

注：本文由纯净天空筛选整理自 JavaScript Array reduce() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。