JavaScript - Reduce 方法

什么是 Reduce 方法?

在 JavaScript 中，Reduce 方法用于操作数组。该方法对数组的每个元素(从左到右)执行 reducer 函数，并返回一个"单个值"。

它接受一个名为"initialValue"的可选参数。如果我们不将此参数传递给该方法，它将把 arr[0] 的值视为初始值。此外，它将对传递的 initialValue 参数执行回调函数。

此方法不会对空数组元素执行 reducer 函数。除此之外，它不会修改原始数组。

注意:如果当前数组为空或不包含任何初始值，此方法将抛出"TypeError"异常。

语法

以下是 JavaScript Array.reduce() 方法的语法

reduce(callbackFn(accumulator, currentValue, currentIndex, array), initialValue)

参数

reduce() 函数有两个参数，分别是callbackfn() 和 initialValue。下文将详细介绍它们。

• initialValue(可选):首次调用回调函数时，accumulator 参数的初始化值。
• callbackFn:这是对数组中每个元素执行的函数。

callbackFn() 函数有四个参数，分别是:

• accumulator:这是数组中当前正在处理的元素。如果指定了 initialValue，则其值为 arr[0];否则，其值为 arr[1]。
• currentValue: 指向当前元素。
• currentIndex(可选): 这是正在处理的当前元素在数组中的索引。
• array(可选): 这是调用 reduce() 方法的数组。

返回值

此方法返回对数组进行归约后的结果。

示例

在下面的示例中，我们使用 JavaScript Array.reduce() 方法对提供的数组中所有元素求和。

<html>
<body>
<script>
const number = [10, 20, 30, 40, 50];
const sum = number.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
document.write(sum);
</script>
</body>
</html>

累加器从 0 开始，对于数组中的每个元素，它将当前元素添加到累加器中。累加器的最终结果 (150) 是所有元素的总和。

输出

以下是上述代码的输出

150

示例

如果当前数组不包含任何元素(没有可用的初始值)，reduce() 方法将抛出 "TypeError" 异常

<html>
<body>
<script>
const numbers = [];
   try {
      numbers.reduce((accumulator, currentValue) => accumulator * currentValue);
   } catch (error) {
      document.write(error);
}
</script>
</body>
</html>

输出

以下是上述代码的输出

TypeError: Reduce of empty array with no initial value

TypedArray 上的 Reduce 方法

我们也可以在 TypedArray 上使用 reduce 方法。它与普通数组类似，这意味着我们可以像处理数组一样处理和组合元素。

语法

以下是 JavaScript TypedArray reduce() 方法的语法

TypedArray.reduce(callbackFn(accumulator, currentValue, currentIndex, array), initialValue)

示例

计算类型数组中所有元素的乘积。类型数组

在下面的示例中，我们使用 JavaScript TypedArray reduce() 方法对该类型数组 [1, 2, 3, 4, 5] 的每个元素执行用户提供的名为 multi() 的函数。 multi() 函数将当前类型数组中的所有元素相乘。

<html>
<head>

</head>
<body>
<script>
//function
function multi(accumulator, currentValue){
   return accumulator * currentValue;
}
const T_array = new Uint16Array([1, 2, 3, 4, 5]);
document.write("Typed array: ", T_array);
      
//使用 reduce() 方法
document.write("<br>The product of typed array elements: ", T_array.reduce(multi));
</script>    
</body>
</html>

输出

以下是上述代码的输出

Typed array: 1,2,3,4,5
The product of typed array elements: 120

示例

如果当前类型数组不包含任何元素(没有可用的初始值)，reduce() 方法将抛出"TypeError"异常。

在下面给出的示例中，我们使用 JavaScript TypedArray 的 reduce() 方法对这个空类型数组 ([]) 的每个元素执行用户提供的名为"ArrowFunction"的 Reducer 回调函数。

<html>
<head>
<title>JavaScript TypedArray reduce() Method</title>
</head>
<body>
<script>
const T2_array = new Uint16Array([]);//empty typed array
document.write("Length of the typed array: ", T2_array.length);
//使用 reduce 方法
try {
   T2_array.reduce((a, b)=> a + b);
} catch (error) {
    document.write("<br>", error);
}
</script>    
</body>
</html>

输出

以下是上述代码的输出

Length of the typed array: 0
TypeError: Reduce of empty array with no initial value

Map 上的 Reduce 方法

我们也可以在 Map 上使用 reduce 方法。它与普通数组类似，这意味着我们可以像处理数组一样处理和组合元素。

语法

以下是 JavaScript Map reduce() 方法的语法

Map.reduce(callbackFn(accumulator, currentValue, currentIndex, array), initialValue)

示例

对 Map 中所有元素求和。

在下面的示例中，我们使用 JavaScript Map reduce() 方法对该 Map 中的每个元素执行用户提供的名为 add() 的函数。add() 函数会将当前 Map 中的所有元素相加。

<html>
<head>
<title>JavaScript Map reduce() Method</title>
</head>
<body>
<script>
//function
function add(accumulator, currentValue){
   return accumulator + currentValue;
}
const map = new Map([[1, 2], [3, 4], [5, 6]]);
document.write("Map: ", map);
        
//使用 reduce() 方法
document.write("<br>The sum of map elements: ", [...map.values()].reduce(add));
</script>
</body>
</html>

输出

以下是上述代码的输出

Map: 1 => 2,3 => 4,5 => 6
The sum of map elements: 12