Javascript高阶函数之理解

最近在学习和工作中用到了柯里化(curry),而柯里化是高阶函数(High-order Fucntion)的一种实现方式。为了更好的学习和理解D3js的编程方式,先把高阶函数的概念好好理清楚。

1,高阶函数的定义

高阶函数(High-order Fucntion),是一个可以接收另一个函数作为参数,或者将另一个函数作为输出返回的函数。
或者说:高阶函数是可以对其他函数进行操作的函数,这种操作可以是把其他函数作为参数输入,也可以是把其他函数作为返回输出。

另外,我们还需要了解两个概念,函数式编程和一等函数。
函数式编程(Functional Programming),是一种编程形式,将函数作为参数传给其他函数,或者将函数作为值返回,这样的编程形式就是函数式编程。由此可以看出,高阶函数就是函数式编程的一种实现。
一等函数(First-class Function) 或者头等函数,是指当函数可以被当做变量一样使用(函数可以被其他函数传入或返回,也可以被赋值给其他变量),就称这种编程语言拥有一等函数。在Javascript语言中,函数是被当做一种对象,可以被当做参数传入,也可以被当做返回值,还可以赋值给其他变量,因此我们说Javscript语言有一等函数。

2,使用高阶函数

上面我们讲了高阶函数相关的概念定义了,现在我们来实际使用高阶函数,来体会高阶函数能给我们带来什么。

首先我们来实践一下Javascript自带的高阶函数,例如Array.prototype.map和Array.prototype.reduce这两个数组方法。

首先看一下Array.prototype.map的使用。我们有一个数组arr=[1,2,3,4,5],假设我们想得到另一个数组arr2,我们希望数组arr2是数组arr中每个元素的值乘以2的值的集合。如果不使用高阶函数,我们就要这样去实现:

const arr = [1,2,3,4,5]
const arr2 = []
for(let i = 0, len = arr.length; i < len; i++) {
  arr2.push(arr[i] * 2)
}
console.log('arr2:',arr2)

使用数组的map方法我们就可以这样:

const arr = [1,2,3,4,5]
const arr2 = arr.map(item => item *2)
console.log('arr2:',arr2)

代码是不是很简洁?
其中 item => item * 2(item) => { return item * 2 } 这个箭头函数的简写形式。可以看到,map这个函数的参数也是一个函数,如果完全展开的话,代码是这样的:

const arr = [1,2,3,4,5]
function doubleFn(item) {
  return item * 2
}
const arr2 = arr.map(doubleFn)
console.log('arr2:',arr2)

接下来,让我们自己来写一个myMap高阶函数,来实现原生map函数的功能。

// 定义高阶函数 myMap
function myMap(arr, fn) {
  const newArr = []
  for(let i = 0, len = arr.length; i < len; i++) {
    newArr.push(fn(arr[i]))
  }
  return newArr
}
// 使用高阶函数
const arr = [1,2,3,4,5]
const arr2 = myMap(arr, item => { return item * 2 })
console.log('arr2:',arr2)

刚才我们探讨的map函数,是把另外一个函数作为参数值输入了,下面我们再看一个把函数当做返回值输出的例子。

function multiply(num) {
  return function(times) {
    return num * times
  }
}
const result = multiply(10)(5)
console.log('result:', result)

这个例子里,myltiply这个函数,返回的是一个匿名函数。这个匿名函数实现了对数字的乘法运算。当我们使用myltiply(10)的时候,我们得到的是里面的应用函数本身。所以当我们使用multiply(10)(5),就运行了这个匿名函数,并传入了两次参数10和5,最终返回了乘法的结果。


以上就是对Javascript中的高阶函数的理解和使用,相信通过上面的学习,我们对高阶函数有了初步的认识,后面我在具体使用中如果有了新的心得和体会,也会继续和大家分享。

你可能感兴趣的:(Javascript高阶函数之理解)