前端学习之函数式编程—高阶函数(代码片段)

萌萌的DDD 萌萌的DDD     2022-12-12     314

关键词:

  什么是高阶函数(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)
)

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

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

前端学习之函数式编程—闭包(代码片段)

闭包Part01闭包的概念闭包(closure):函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包. 可以在另一个作用域中调用一个函数的内部函数并访问到该函数作用域中的成员//函数作为返回值functionmakeFn()letmsg='hellofunction'... 查看详情

前端学习之函数式编程—柯里化(代码片段)

part01--柯里化概念柯里化是为了解决函数中不纯函数或函数硬编码的问题什么是硬编码functiongetAge(age)letmin=18returnage>min 函数式编程是保证相同的调用总能得到相同的结果,但当相同的调用有可能不能得到相同的结果时则... 查看详情

前端学习之函数式编程—函数组合(代码片段)

Part01函数组合纯函数和柯里化很容易写出洋葱代码=====>h(g(f(x)))一层一层套起来不宜阅读例如:获取数组最后的一个元素再转大写字母_.toUpper(_.first(_.reverse(array)))函数组合可以让我们把细粒度的函数重新组成... 查看详情

前端学习之函数式编程—纯函数(代码片段)

Part01纯函数概念纯函数:相同的输入永远会得到相同的输出,而且没有任何可观察的副作用纯函数就类似数学中的函数,用来描述输入与输出之间的关系,例如:y=f(x)Part02案例:slice和splice函数 数组的slice和splice分别是纯函数和不纯... 查看详情

scala学习之函数式风格编程(代码片段)

FUNCTIONALPROGRAMMINGhttps://docs.scala-lang.org/overviews/scala-book/functional-programming.htmlScala允许您以面向对象编程(OOP)风格、函数式编程(FP)风格甚至混合风格编写代码,结合使用这两种方法。本书假设您是从Java、C++或C#等OOP语言来... 查看详情

kotlin学习之高阶函数及常用基本高阶函数(代码片段)

基本概念f(g(x))与普通函数不一样,高阶函数是传入或者返回函数的函数,例如,我们可能用到的forEach就是一个高阶函数示例代码:funmain()valmyOperate=AdvanceOperate()//定义实例valoperate1=myOperate.multipleOperate(2,3)//高阶函... 查看详情

kotlin函数式编程①(函数式编程简介|高阶函数|函数类别|transform变换函数|过滤函数|合并函数|map变换函数|flatmap变换函数)(代码片段)

...数式编程简介1、编程范式2、高阶函数3、函数式编程4、前端开发技术二、函数类别三、变换函数四、map变换函数1、map函数原型分析2、map函数设计理念3、代码示例五、flatMap变换函数1、flatMap函数原型分析2、代码示例一、函数式... 查看详情

python函数式编程以及高阶函数(代码片段)

文章目录一、什么是函数式编程二、高阶函数的概念1.map和reduce函数2.filter函数3.sorted函数此文章参考廖雪峰大神的官网,地址:函数式编程-廖雪峰的官方网站(liaoxuefeng.com)一、什么是函数式编程首先要知道的是,函数... 查看详情

scala函数式编程初步(高阶函数)(代码片段)

参数式函数定义一个参数是函数的函数。(完整定义=>匿名函数)objecthelloWorlddefmain(args:Array[String]):Unit=defaddxy(x:Int,y:Int):Int=x+ydefmulxy(x:Int,y:Int):Int=x*ydeffunc1(a:Int,b:Int,f:(Int,Int)=> 查看详情

函数式编程—高阶函数(代码片段)

一、函数式编程概念简介函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解成简单的任务,这种分解可以称之为面向过程的程序设计。函数就是面向过程的程序设... 查看详情

13.函数式编程:匿名函数高阶函数装饰器(代码片段)

#defadd(x,y):#returnx+y#print(add(1,2))#3#匿名函数#lambda表达式#f=lambdax,y:x+y#print(f(1,2))##三元表达式#x=2#y=1#r=xifx>yelsey#print(r)#2 #map#list_x=[1,2,3,4,5,6,7,8]#defsquare(x):#returnx*x#方法1#forxinl 查看详情

scala学习(函数式编程面向对象编程)(代码片段)

文章目录函数式编程基础函数编程函数定义函数参数函数至简原则高阶函数编程面向对象编程基础面向对象编程高阶面向对象编程函数式编程基础函数编程函数定义packagelearn03objectdemo01defmain(args:Array[String]):Unit=//无参、无返回... 查看详情

scala学习(函数式编程面向对象编程)(代码片段)

文章目录函数式编程基础函数编程函数定义函数参数函数至简原则高阶函数编程面向对象编程基础面向对象编程高阶面向对象编程函数式编程基础函数编程函数定义packagelearn03objectdemo01defmain(args:Array[String]):Unit=//无参、无返回... 查看详情

js高阶函数filterreducemap(代码片段)

...程/声明式编程//编程范式:面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)//filter/map/reduce//filter中的回调函数有一个要求:必须返回一个boolean值//true:当返回true时,函数内部会自动将这次回调的n加入到新的数组中//false:当... 查看详情

函数式编程和面向对象编程(代码片段)

介绍函数式编程,以函数思维作为核心,在这种思维的角度去思考问题。这种编程最重要的基础就是λ演算,接受函数当作输入输出。面向对象编程,把问题看作由对象的属性与对象所进行的行为组成。基于对象的概念,以类作... 查看详情

12-函数式编程(代码片段)

Python语言的高级特性函数是编程(FunctionalProgramming)基于lambda演算的一种编程方式程序中只有函数函数可以作为参数,同样可以作为返回值纯函数式变成语言:LISP,HaskellPython函数式编程只是借鉴函数式编程的一些特点,可以理... 查看详情

scala的函数式编程(代码片段)

Scala的函数式编程  Scala的函数式编程的特点  -高阶函数  -闭包  -模式匹配可参考:http://blog.51cto.com/14048416/2337136  -单一赋值  -延迟计算  -类型推导  -尾部调用优化 &e... 查看详情

kotlin初学者函数式编程(代码片段)

...),移动端:https://bbs.csdn.net/topics/603956616目录一、函数式编程概念1.1面向函数编程(FOP)1.2高阶函数1.3为什么使用函数式编程二、函数式编程类别2.1变换transform2.1.1map2.1.2flatMap2.2过滤filter2.3合并combine2.3.1zip2.3.2fold三... 查看详情