数组中元素累加 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>

数组中元素累加 reduce

猜你喜欢