數組中元素累加 reduce


例:

 

  

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

 

 

 

    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM