JavaScript - 陣列 .reduce() 方法

在 JavaScript 中，Array.reduce() 方法用於運算元組。此方法對陣列中的每個元素（從左到右）執行一個 reducer 函式，並返回一個“單個值”作為結果。

它接受一個名為'initialValue' 的可選引數。如果我們沒有將此引數傳遞給該方法，它將把 arr[0] 的值視為初始值。此外，它將在傳遞的 initialValue 引數上執行回撥函式。

此方法不會對空陣列元素執行 reducer 函式。此外，它不會修改原始陣列。

注意 - 如果當前陣列為空或不包含任何 initialValue，此方法將丟擲'TypeError' 異常。

語法

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

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

引數

此方法接受兩個引數。下面描述了相同的內容 -

callbackFn - 這是要在陣列中的每個元素上執行的函式。此函式接受四個引數
- accumulator - 這是 initialValue，或函式先前返回的值。
- currentValue - 這是陣列中正在處理的當前元素。如果指定了 initialValue，則其值為 arr[0]，否則其值為 arr[1]。
- currentIndex (可選) - 這是陣列中正在處理的當前元素的索引。
- array (可選) - 這是呼叫 reduce() 方法的陣列。
initialValue (可選) - 第一次呼叫回撥函式時，累加器引數初始化到的值。

返回值

此方法返回單個值，該值是在減少陣列後得到的結果。

示例

示例 1

在以下示例中，我們使用 JavaScript Array.reduce() 方法來對提供的陣列中存在的所有元素求和。

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

累加器從 0 開始，對於陣列中的每個元素，它將當前元素新增到累加器中。累加器的最終結果 (150) 是所有元素的總和。

輸出

示例 2

在此示例中，我們計算指定陣列中所有元素的乘積 -

<html>
<body>
   <script>
      const numbers = [10, 20, 30, 40, 50];
      const product = numbers.reduce((accumulator, currentValue) => accumulator * currentValue, 1);
      document.write(product);
   </script>
</body>
</html>

累加器從 1 開始，對於陣列中的每個元素，它將當前元素乘以累加器。累加器的最終結果 (12000000) 是所有元素的乘積。

輸出

12000000

示例 3

在下面的示例中，我們將陣列的陣列 (nesetedArray) 扁平化成一個單一的、一維陣列 (flattenedArray) -

<html>
<body>
   <script>
      const nestedArray = [[1, 2], [3, 4], [5, 6]];
      const flattenedArray = nestedArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
      document.write(flattenedArray);
   </script>
</body>
</html>

輸出

1,2,3,4,5,6

示例 4

如果當前陣列不包含任何元素（沒有可用的初始值），則 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

列印頁面