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

简介: 目前我们的函数只能过滤出数组中age属性小于18的对象,我们希望过滤更加灵活:比如:过滤数组中age大于18的对象age大于60的对象age大于n的对象过滤数组中name为xxx的对象过滤数组中的偶数...**一个函数的参数也可以是函数,**如果将函数作为参数传递,那么我们就称这个函数为**回调函数**(callback)```html <script> class Person { constructor(name,age){ this.name = name;

目前我们的函数只能过滤出数组中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>
相关文章
|
2天前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
1天前
|
JavaScript API
Node.js 回调函数
Node.js 异步编程的直接体现就是回调。
10 2
|
4月前
|
JavaScript 前端开发 Go
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
712 1
|
4月前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
38 3
|
2月前
|
JavaScript 前端开发 API
Node中的AsyncLocalStorage 使用问题之Node.js将 JavaScript 层的 nativeHooks 注册到 C++ 层的问题如何解决
Node中的AsyncLocalStorage 使用问题之Node.js将 JavaScript 层的 nativeHooks 注册到 C++ 层的问题如何解决
|
3月前
|
存储 前端开发 JavaScript
回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。
【6月更文挑战第27天】回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。它作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,模拟异步操作后,调用`handleResult`传递结果。这样,当异步任务完成时,`handleResult`负责处理结果。
25 1
|
3月前
|
前端开发 JavaScript
JavaScript异步处理避免了单线程阻塞,如回调函数、Promise和async/await。
【6月更文挑战第22天】JavaScript异步处理避免了单线程阻塞,如回调函数、Promise和async/await。回调是基础,用于在操作完成后执行函数;Promise管理异步状态,支持链式调用;async/await提供同步代码外观,简化错误处理。每种技术在处理耗时任务时都起着关键作用。
31 3
|
3月前
|
JavaScript 前端开发 测试技术
JavaScript进阶-高阶函数与柯里化
【6月更文挑战第18天】在JavaScript中,高阶函数和柯里化是函数式编程的核心。高阶函数接收或返回函数,常用于数组操作和事件处理。柯里化将多参数函数转化为单参数的逐次求值过程,用于参数预绑定和函数组合。两者能简化逻辑、提高复用性,但也需注意易错点,如混淆参数、过度柯里化,应适度使用并配合测试保证正确性。通过实践和使用工具,如lodash的`_.curry`,能更好地利用这些技术。
40 5
|
3月前
|
前端开发 JavaScript 开发者
JavaScript基础-异步编程:回调函数
【6月更文挑战第12天】本文介绍了JavaScript中的异步编程基础,重点讨论回调函数。回调函数是处理延迟操作的关键,常见于事件监听、定时器、Ajax请求和文件操作。然而,它们可能导致回调地狱、错误处理不一致和控制流混乱等问题。为了解决这些问题,文章推荐使用Promise链、async/await来扁平化异步逻辑,并提供了相关代码示例,强调了现代JavaScript特性的优势,以提升代码可读性和可维护性。
72 7
|
3月前
|
JavaScript API
Node.js 回调函数
Node.js 回调函数
23 1