JS中高阶函数filter,map和reduce的使用

最新推荐文章于 2021-01-27 02:55:19 发布

qq_43179622

最新推荐文章于 2021-01-27 02:55:19 发布

阅读量134

点赞数

文章标签： javascript vue

本文链接：https://blog.csdn.net/qq_43179622/article/details/106258620

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>filter,map,reduce等高阶函数的使用</title>
</head>
<body>
    <div id="app">
        <h2>不使用高阶函数,计算结果:{{fn1}}</h2>
        <h2>使用高阶函数,计算结果:{{fn2}}</h2>
        <h2>使用高阶函数,计算结果:{{fn3}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                //编程范式:命令式编程/声明式编程
                //编程范式:面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)
                nums : [56,45,88,99,108,23,123],
                total: 0
            },
            computed: {
                //未使用高阶函数: 将数组nums中的数字小于100的数字再乘以2然后再相加输出结果
                fn1(){
                    //需求一: 从数组中取出所有的小于100的数字
                    let newNums = [];
                    for (let i = 0; i<this.nums.length; i ++){
                        if(this.nums[i] < 100){
                            newNums.push(this.nums[i])
                        }
                    }
                   //newNums:56,45,88,99,23
                    console.log('newNums:'+newNums)

                    //需求二: 将所有小于100的数字进行转化: 全部*2
                    let newNums2 = [];
                    for (let i = 0; i<newNums.length; i ++){
                            newNums2.push(newNums[i] * 2)
                    }
                    //newNums2:112,90,176,198
                    console.log('newNums2:'+newNums2)

                    //需求三: 将newNums2中的数字全部进行相加
                    let total = 0;
                    for (let i = 0; i<newNums2.length; i ++){
                       total += newNums2[i]
                    }

                    console.log("total: "+total)

                    return total
                },

                //使用高阶函数: 将数组nums中的数字小于100的数字再乘以2然后再相加输出结果
                fn2(){
                    //需求一: 从数组中取出所有的小于100的数字
                    let newNums = this.nums.filter(function (n) {
                        return n < 100;
                    })
                    console.log('newNums:'+newNums)

                    //需求二: 将所有小于100的数字进行转化: 全部*2
                    let newNums2 = newNums.map(function (n) {
                        return n * 2;
                    })
                    console.log('newNums2:'+newNums2)

                    //需求三: 将newNums2中的数字全部进行相加
                    //reduce函数的作用：对数组中的内容进行汇总
                    let total = newNums2.reduce(function (preValue,n) {
                        return preValue + n;
                    },0)
                    console.log('total:'+total)
                    return total;
                },
                //未使用高阶函数以及箭头函数: 将数组nums中的数字小于100的数字再乘以2然后再相加输出结果
                fn3() {
                    let total = this.nums.filter(n => n< 100).map(n => n*2).reduce((pre,n)=>pre+n);
                    console.log('total:'+total)
                    return total;
                }
            }
        })
    </script>
</body>
</html>

输出结果:
不使用高阶函数,计算结果:622
使用高阶函数,计算结果:622
使用高阶函数,计算结果:622

浏览器控制台打印结果:

newNums:56,45,88,99,23
newNums2:112,90,176,198,46
total: 622

newNums:56,45,88,99,23
newNums2:112,90,176,198,46
total:622

total:622

qq_43179622

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中高阶函数filter,map和reduce的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>filter,map,reduce等高阶函数的使用</title></head><body> <div id="app"> <h2>不使用高阶函数,计算结果:{{fn1}}</h2>
复制链接

扫一扫