JavaScript高阶函数map/reduce、filter和sort

时间:2024-01-19 14:30:10

map()

举例说明,比如我们有一个函数f(x)=x²,要把这个函数作用在一个数组[1,2,3,4,5,6,7,8,9]上。

由于map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果:

  function pow(x) {
return x*x;
} var arr = [1,2,3,4,5,6,7,8,9];
arr.map(pow);//[1,4,9,16,25,36,49,64,81]

map()传入的参数是pow,即函数对象本身。

map()作为高阶函数,事实上它把运算规则抽象了,因为,我们不但可以计算简单的f(x)=x²,还可以计算任意复杂的函数,比如Array的所有数字转为字符串:

  var arr = [1,2,3,4,5,6,7,8,9];
arr.map(String);//['1','2','3','4','5','6','7','8','9']
//只需要一行代码

reduce()

再看reduce的用法,Array的reduce()把一个函数作用在这个Array的[x1,x2,x3……]上。这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做积累计算,其效果就是

[x1,x2,x3,x4].reduce(f) = f(f(f(x1,x2),x3),x4)

比如说对一个Array求和,就可以用reduce实现:

  var arr = [1,3,5,7,9];
arr.reduce(function(x,y){
return x+y;
});//

要把[1,3,5,7,9]变换成整数13579,reduce()也能派上用场:

  var arr = [1,3,5,7,9];
arr.reduce(function(x,y) {
return x*10+y;
});//

filter()

filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。

和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。

例如,在一个Array中,删掉偶数,只保留奇数,可以这么写:

  var arr = [1,2,4,5,6,9,10,15];
var r = arr.filter(function(x) {
return x % 2 !== 0;
});
r;//[1,5,9,15]

把一个Array中的空字符串删掉,可以这么写:

  var arr=['A','','B',null,undefined,'C',' '];
var r=arr.filter(function(s){
return s && s.trim();//注意,IE9版本没有trim()方法
});
r;//['A','B','C']

filter()这个高阶函数,关键在于正确实现一个“筛选”函数。

回调函数

filter()接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:

  var arr = ['A','B','C'];
var r=arr.filter(function(element,index,self) {
console.log(element);//依次打印'A','B','C'
console.log(index);//依次打印0,1,2
console.log(self);//self就是变量arr
return true;
})

sort

排序算法:

排序也是在程序中经常用到的算法。无论使用冒泡排序还是快速排序。排序的核心是比较两个元素的大小。如果是数字,我们可以直接比较。但如果是字符串或者两个对象呢?直接比较数字上的大小是没有意义的,因此,比较的过程必须通过函数抽象出来。通常规定,对于两个元素x和y,如果认为x<y,则返回-1,如果x==y,则返回0,如果认为x>y,则返回1,这样,排序算法就不用关心具体的比较过程,而是根据比较的结果直接排序。

Array的sort()方法就是用于排序的。但是排序结果可能让你大吃一惊。

这是因为Array的sort()方法默认把所有元素先转换为String再排序,结果‘10’排在了‘2’的前面,因为字符‘1’比字符‘2’的ASCII码小。

如果不知道sort()方法的默认排序规则,直接对数字排序,大吃一惊。

sort()也是一个高阶函数。可以接收一个比较函数实现自定义排序。

  var arr=[10,20,1,2];
arr.sort(function(x,y){
if(x<y) {
return -1;
}
if(x>y) {
return 1;
}
return 0;
});//[1,2,10,20]

默认情况下,对字符串排序,是按照ASCII的大小比较的,现在,我们提出排序应该忽略大小写,按照字母序排序。要实现这个算法,不必对现有代码大加改动,只要我们能定义出忽略大小写的比较算法就可以:

  var arr = ['Google','apple','Microsoft'];
arr.sort(function (s1,s2){
x1 = s1.toUpperCase();
x2 = s2.toUpperCase();
if(x1<x2) {
return -1;
}
if(x1>x2) {
return 1;
}
return 0;
});//['apple','Google','Microsoft']

忽略大小写来比较两个字符串,实际上就是先把字符串都变成大写(或者小写),再做比较。

高阶函数的抽象能力是非常强大的,而且,核心代码可以保持得非常简洁。

sort()方法会直接对Array进行修改,它返回的结果仍是当前Array:

  var a1 = ['B','A','C'];
var a2 = a1.sort();
a1;//['A','B','C']
a2;//['A','B','C']
a1 === a2;//true,a1和a2是同一对象。