Javascript的高阶函数

函数是头等公民

我们知道在JavaScript里，函数是头等公民。因此，函数也可以赋给一个变量。

比如

1
2
3
4
5
6
7
8

var abc = function(x,y) {
  return x+y
}

var a = abc(33,55)

console.log(a);

既然函数可以是一个变量，而变量可以作为参数，那么理所当然的，函数也可以作为一个参数。

1
2
3
4
5
6
7
8
9
10
11

function add(a,b,f) {
  return f(a)+f(b)
}

f = Math.abs;

var sum = add(11,22,f);

console.log(sum);

编写高阶函数的实质就是让函数的参数可以接收函数本身。

Map

假定我们要编写一个函数，对一个数组，进行求幂运算。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

也就是f(x) = x*x

function pow(x) {
  return x*x
}

var arr = [1,2,3,4,5];

var x = arr.map(pow);

console.log(x);

//这里其实就是把数组的元素都变成了pow函数的参数。

还可以展开

arr.map(String);

//['1','2','3','4']

reduce

reduce也是一个高阶函数,我们常常用它来进行数组求和。

1
2
3
4
5
6
7

var arr = [1,2,3,4,5];
var sum = arr.reduce(function(x,y){
  return x+y
})
console.log(sum);

也可以将reduce用来，将一个数组变成整数。

1
2
3
4
5
6
7
8

var arr = [1,2,3,4,5];
var integer = arr.reduce(function(x,y){
  return x*10+y
})

//12345

filter

filter 常常用来对字符串进行过滤

1
2
3
4
5
6
7
8
9
10

var arr = [1,2,3,4,5,6,9];

arr.filter(function(x){
  return x % 2 !== 0
})

//1,3,4,9
//模运算的结果不为0，则说明他是奇数

filter也可以接收两个参数，接收参数的作用和foreach类似。都是，index，element，self.

1
2
3
4
5
6
7
8
9
10
var arr = [a,b,c];

arr.filter(function(index,element,self){
  console.log(index);   //数组下标
  console.log(element);  //数组元素
  console.log(self);   //数组变量

  return true
  })

sort

sort常常用来对数组进行排序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var arr = [1,2,3,6,0];

arr.sort();

//直接使用，在没有十位数的情况下，结果还正常。有了十位甚至百位，那么结果就会出问题了。因为，sort函数，在排序时，会把整数转换成字符串。因此，我们要做一道处理。

var arr [1,3,10,67,9];

arr.sort(function(x,y){
  if(x < y) {
     return 1
  }
  if(x > y) {
     return -1
  }
  return 0
})

函数作为返回值

在前面我们说到，函数可以是一个变量，而变量可以是一个返回值，那么函数当然也是可以作为返回值的。

比如说，我们写一个数组求和的函数.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//求和函数
function lazy_sum(arr) {
  arr.reduce(function(x,y){
    return x+y
  })
}  
//函数作为返回值
function lazy_sum(arr) {
  var sum = function(){
    arr.reduce(function(x,y){
      return x+y
    })
  }
  return sum;
}

//调用
var arr = [1,2,3,4];

//因为返回的是函数，因此这里的调用不是具体的值
lazy(arr)

//调用
lazy(arr)()


January 23, 2018

Javascript