当前位置: 首页 > Web前端 > JavaScript

Javascript高阶函数的理解与学习(一)

时间:2023-03-27 10:49:43 JavaScript

最近在学习和工作中使用了curry,而curry是高阶函数(High-orderFucntion)的一种实现。为了更好的学习和理解D3js的编程方式,首先需要明确高阶函数的概念。1.高阶函数的定义高阶函数(High-orderFunction)是可以接收另一个函数作为参数,或者返回另一个函数作为输出的函数。换句话说:高阶函数是可以对其他函数进行操作的函数。这个操作可以是输入其他函数作为参数,也可以是返回输出其他函数。另外,我们还需要了解两个概念,函数式编程和一等函数。函数式编程是一种将函数作为参数传递给其他函数或将函数作为值返回的编程形式。这种编程形式就是函数式编程。由此可见,高阶函数是函数式编程的一种实现。头等函数(First-classFunction)或头等函数是指当函数可以作为变量使用时(该函数可以被其他函数传入或返回,也可以赋值给其他变量),它据说这种编程语言具有一流的功能。在Javascript语言中,函数被看作是一个对象,可以作为参数传入,也可以作为返回值,还可以赋值给其他变量,所以我们说Javascript语言首先——类函数。2.使用高阶函数上面我们已经讲了高阶函数相关概念的定义。下面就让我们实际使用高阶函数来体验一下高阶函数能给我们带来什么。首先我们来练习一下Javascript自带的高阶函数,比如Array.prototype.map和Array.prototype.reduce这两个数组方法。先看Array.prototype.map的使用。我们有一个数组arr=[1,2,3,4,5],假设我们要得到另一个数组arr2,我们希望数组arr2是数组arr中每个元素的值乘以2。如果我们不使用高阶函数,我们必须这样实现:constarr=[1,2,3,4,5]constarr2=[]for(leti=0,len=arr.length;iitem*2)console.log('arr2:',arr2)代码是不是很简洁?其中item=>item*2是箭头函数(item)=>{returnitem*2}的简写。可见map函数的参数也是一个函数。如果完全展开,代码是这样的:constarr=[1,2,3,4,5]functiondoubleFn(item){returnitem*2}constarr2=arr.map(doubleFn)console.log('arr2:',arr2)接下来我们写一个myMap高阶函数来实现原生map函数的功能。//定义高阶函数myMapfunctionmyMap(arr,fn){constnewArr=[]for(leti=0,len=arr.length;i{returnitem*2})console.log('arr2:',arr2)从这个例子可以看出,我们常用的回调函数(callback)是一个作为参数传入的函数。我们刚才讨论的map函数,就是输入另外一个函数作为参数值。接下来,让我们看一个将函数作为返回值输出的例子。functionmultiply(num){returnfunction(times){returnnum*times}}constresult=multiply(10)(5)console.log('result:',result)在这个例子中,函数myltiply返回一个匿名函数.这个匿名函数实现了对数字的乘法运算。当我们使用myltiply(10)时,我们得到的是里面的apply函数本身。所以我们在使用multiply(10)(5)的时候,运行这个匿名函数,两次传入参数10和5,最后返回乘法的结果。以上就是Javascript中高阶函数的理解和使用。相信通过上面的学习,我们对高阶函数有了初步的了解。如果后面在具体使用上有新的想法和经验,我会继续和他们交流。大家分享。