JavaScript31_高阶函数（回调函数）

Posted 2023-02-28

目前我们的函数只能过滤出数组中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>