JavaScript高阶函数：filter/map/reduce

<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">

    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {

            },

        })
　　　
        //编程范式：命令式编程、声明式编程
        //编程范式：面向对象编程（第一公民：对象）、函数式编程（第一公民：函数）
        //高阶函数：filter/map/reduce

        //filter中的回调函数有一个要求，必须返回一个boolean值
        //true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中
        //false:当返回false时，函数内部会过滤掉这次的n
 
 
　　 //1.需求：取出所有小于100的数字

        //2.需求：将所有小于100的数字进行转化 ：全部*2

        //3.得出所有数字的总和
 
        const nums = [23, 553, 54, 66, 75, 213, 54];
 

        //1.filter函数的使用
        // let numsOver100 = nums.filter(function(n) {
        //     return n < 100;
        // })
        let numsOver100 = nums.filter(n => {
            return n < 100;
        })

        //2.map函数的使用
        // let nums2Over100 = numsOver100.map(function(n) {
        //     return n * 2;
        // })
        let nums2Over100 = numsOver100.map(n => {
            return n * 2;
        })

        // 3.reduce函数的使用
        // reduce作用：对所有的值进行汇总
        // preValue： 上一次汇总的值，0：初始化值，第一次就是将 0 赋值给preValue
        // n：nums2Over100 中的每一项
        let numsTotal = nums2Over100.reduce((preValue, n) => {
            return preValue + n;
        }, 0)

        console.log(nums2Over100);
        console.log(numsTotal);
 
//优化方案1：
   let total = nums.filter(n => {
            return n < 100
        }).map(n => {
            return n * 2
        }).reduce((preValue, n) => {
            return preValue + n
        }, 0);
        console.log(total);
 
//最优方案：
        let total1 = nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n);
 
        console.log(2222222, total);
        
    </script>
</body>

</html>
posted @ 2020-08-10 15:20  莯汐  阅读(190)  评论(0)    收藏  举报