例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p> [65,14,22,5] </p> <button onclick="myFunction()">求和</button> <div id="demo"> </div> <script> var numbers=[65,14,22,5]; function getSum(total,num){ return total+num; } function myFunction(item){ document.getElementById('demo').innerHTML=numbers.reduce(getSum); } </script> </body> </html>
reduce()方法接收一個函數作為累加器,數組中的每個值(從左到右)開始縮減,最終計算為一個值。
reduce()方法可以作為一個高階函數,用於函數的compose。
注意:reduce()方法對於空數組是不會執行回調函數的。
語法:
array.reduce( function( total , currentValue , currentIndex , arr) , initialValue)
參數:
function( total, currentValue, currentIndex, arr) 必需。用於執行每個數組元素的函數。
函數參數:
total:必需。初始值,或者計算結束后的返回值。
currentValue:必需。當前元素
currentIndex:可選。當前元素的索引
arr:可選。當前元素所屬的數組對象。
initialValue 可選。傳遞給函數的初始值。
例:
四舍五入后計算數組元素的總和:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body> <p> [15.5,2.3,1.1,4.7] </p> <button onclick="myFunction()">點我</button> <p>數組元素之和:<span id="demo"></span></p> <script> var numbers=[15.5,2.3,1.1,4.7]; function getSum(total,num){ return total+Math.round(num); } function myFunction(item){ document.getElementById("demo").innerHTML=numbers.reduce(getSum,0); } </script> </body> </html>