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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。