前端学习之函数式编程—高阶函数

Posted 2021-08-28 萌萌的DDD

  什么是高阶函数(Higher-order function)

•         可以把函数作为参数传递给另一个函数
•         可以把函数作为另一个函数的返回结果

Part 1 可以把函数作为参数传递给另一个函数

实现forEach函数

// 高阶函数-函数作为参数

function forEach(array, fn) {
    for (let i = 0; i < array.length; i++) {
        fn(array[i])
    }
}

// 测试
let arr = [1, 2, 3, 4, 7, 8]

forEach(arr, function(item) {
    console.log(item)
})

// console.log ==> 1,2,3,4,7,8

实现filter函数

//filter
function filter(array, fn) {
    // 存储筛选后的结果
    let results = []
    for (let i = 0; i < array.length; i++) {
        // 如果满足条件返回true
        if (fn(array[i])) {
            // 追加到结果中
            results.push(array[i])
        }
    }
    return results
}

// 测试
let arr = [1, 2, 4, 5, 8, 9]

const r = filter(arr, function(item) {
    return item % 2 == 0
})
console.log(r);

// [2,4,8]

当函数作为参数,可以将函数的使用变化的更加灵活

同时通过函数的语义化使用起来更加便捷,不需要考虑代码是如何执行的,大大增加了开发效率

拓展:将forEach封装到Array的原型链中,让所有数组都能使用新的forEach

let arr = [1, 2, 3, 4, 7, 8]

Array.prototype.newForEach = function(fn) {
    for (let i = 0; i < this.length; i++) {
        fn(this[i], i, this)
    }
}
arr.newForEach((item, index, arr) => {
    console.log(item, index, arr)
})

 

---

Part 2  将函数作为返回值

如果将函数作为返回值,本质上就是通过一个函数生成一个新的函数

// 高阶函数-函数作为返回值

 function makeFn() {
     let msg = 'hello function'
     return function() {
        console.log(msg)
    }
 }

 const fn = makeFn()
 fn()

 makeFn()()


//'hello function'

 实现once 只执行一次的事件

// once 函数 只会执行一次的事件

function once(fn) {
    // 定义一个标记  若done为false说明函数还没有执行,如果为true说明函数已经执行过一次了
    let done = false
    return function() {
        if (!done) {
            done = true
            return fn.apply(this, arguments)
        }
    }
}

let pay = once((money) => {
    console.log(`支付了:${money}元钱`)
})

pay(5)
pay(6)
pay(7)
pay(8)
pay(9)
pay(10)

即使多次调用,也只执行了一次fn 

---

Part 3 高阶函数的意义

函数式编程的思想:将运算过程进行抽象,屏蔽细节,只关注我们的目标,例如参数和结果

// 面向过程的方式

let array = [1,2,3,4]
for(let i = 0; i<array.length;i++){
    console.log(array[i])
}



// 函数式编程-高阶函数


let arr = [1, 2, 3, 4, 7, 8]

forEach(arr, function(item) {
    console.log(item)
})

高阶函数可以让我们更少的关注方法的细节从而实现结果

让我们的代码更简洁,复用性更高