提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

vue高阶函数

Vue
2023-04-18 15:42:17 时间 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-if="isShow">holle world</p>
        <p v-else>holle python</p>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                isShow:true,
            },
            methods:{
                
            }
        })

        const nums = [10,90,400,20,600,20,40,125,10]
        // filter函数
        let newnums = nums.filter(function(n){
            return n < 100
        })
        console.log(newnums)

        //map函数
        let newnums1 = nums.map(function(n){
            return n * 2
        })
        console.log(newnums1)

        // reduce函数
        // 对数组数据汇总
        let newnums3 = nums.reduce(function(preValue, n){
            return preValue + n
        }, 0)
        console.log(newnums3)

        // 
        let total = nums.filter(function(n){
            return n<100
        }).map(function(n){
            return n *2
        }).reduce(function(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(total1)

    </script>
</body>
</html>

 

相关文章