【JavaScript】26_高阶函数(回调函数)

目前我们的函数只能过滤出数组中age属性小于18的对象,

我们希望过滤更加灵活:

比如:过滤数组中age大于18的对象

age大于60的对象

age大于n的对象

过滤数组中name为xxx的对象

过滤数组中的偶数

一个函数的参数也可以是函数,

如果将函数作为参数传递,那么我们就称这个函数为回调函数(callback)

    <script>
        class Person {
            constructor(name,age){
                this.name = name;
                this.age = age
            }
        }

        const personArr = [
            new Person('孙悟空',180),
            new Person('沙和尚',36),
            new Person('红孩儿',5),
            new Person('白骨精',19),
        ]

        //filter()函数式用来对数组进行过滤的
        function filter(arr, cb) {
            const newArr = []

            // console.log("-->", cb)
            // cb()

            for (let i = 0; i < arr.length; i++) {
                // arr[i].age >= 18
                // arr[i].age > 60
                // arr[i].age > n
                // arr[i].name === "xxx"
                // arr[i] % 2 === 0
                if (cb(arr[i])) {
                    newArr.push(arr[i])
                }
            }

            return newArr
        }

        function fn(a){
            return a.name === "孙悟空"
        }

        result = filter(personArr, fn)
        console.log(result)
    </script>

14、高阶函数

高阶函数(回调函数)

  • 如果一个函数的参数或返回值是函数,则这个函数就称为高阶函数

  • 为什么要将函数作为参数传递?(回调函数有什么作用?)

  • 将函数作为参数,意味着可以对另一个函数动态的传递代码

    <script>
        class Person {
            constructor(name,age){
                this.name = name
                this.age = age
            }
        }

        const personArr = [
            new Person('孙悟空',18),
            new Person('沙和尚',37),
            new Person('红孩儿',3),
            new Person('白骨精',54),
        ]

        function filter(arr,cb){
            const newArr = []

            for(let i = 0; i <arr.length; i++){
                if(cb(arr[i])){
                    newArr.push(arr[i])
                }
            }
            return newArr
        }

        // 我们这种定义回调函数的形式比较少见,通常回调函数都是匿名函数
        function fn(a){
            return a.name === '孙悟空'
        }

        result = filter(personArr,a => a.name === '孙悟空')
        result = filter(personArr,a => a.age >= 18)

        const arr = [1,2,3,,4,5,6,7,8,9,10]
        result = filter(arr,a => a % 2 === 0)

        console.log(result)
    </script>

动态生成新数组,非破坏性函数

希望在someFn()函数执行时,可以记录一条日志

在不修改原函数的基础上,为其增加记录日志的功能

可以通过高阶函数,来动态的生成一个新函数

    <script>
        function someFn(){
            return 'hello'
        }

        function outer(cb){
            return () => {
                console.log('记录日志~~~')
                const result = cb()
                return result
            } 
        }

        let result = outer(someFn)

        function test(){
            console.log("test~~~")
            return 'test'
        }
        let newTest = outer(test)
        newTest()
    </script>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

名之以父

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值